I’ve posted a few articles recently about making a child theme in Genesis for WordPress as I “filmed” almost the entire process of a client website creation. Here I’m going to put all the videos together and run through the process from beginning to end.
I start off with a mock-up of the home page (and sometimes one other page) of how the client and I want the site to look.
Here, above right is the mock up of the home page for a client site Family Twist – Bespoke luxury family holidays. On the left is how Genesis looks “out-of-the-box”.
Using WordPress locally
I start off locally using MAMP, being a Mac boy, if you are of a Windows persuasion you should use WAMP, and Linux LAMP. The upshot of all these funny words is that you can run Apache, MySQL and PHP on you computer like you do on your host, for free, and within seconds. If you are creating WordPress themes you must do it locally – it saves so much time.
Creating a child theme for Genesis
You have to start by creating a child theme for Genesis which is a very straightforward process.
The above video shows you how to create a child theme for Genesis. Also in this video I make a start styling the child theme by changing the background of the website to a creamy color.
Creating background and logo
The background of the website is further changed in this video where I run a gradient down from the top.
I get rid of the secondary navigation as well as the breadcrumbs through the Genesis Theme Settings area. I also put the logo in.
The above video shows you how to change the background and put the logo in the header in Genesis for WordPress.
Creating header widget and styling navigation bar
Here I create Facebook and Twitter buttons in the header widget and style the top nav bar.
Creating pages, the navigation menu, a home page and a blog page
Staying with the menu I then create the pages in WordPress (pretty easy, just go Pages > Add Pages!), create a primary navigation menu and drag the pages to where I want them to go in the menu. I also create a static home page and a separate blog page by changing the settings in Settings > Reading in WordPress.
The above video shows how to create pages and how to arrange them in the navigation menu and assign the home and blog pages in WordPress.
Creating sidebar widgets and styling the sidebar
Moving onto the sidebar, in this video I explain how to create and style widgets on your WordPress sidebar.
In the above video I show how I use Chrome’s Developer Tools, Photoshop and Dreamweaver to style up widgets to look exactly how you want them.
Editing the footer with Genesis
And now the footer! (As you see, I tend to work from the top to the bottom.)
In Genesis you can modify the content of the footer with the Genesis Simple Edits plugin. In the video I show how you can create the footer with WordPress and Genesis.
Creating custom pages
The home page had a completely different template from all the other pages so I had to create a custom page template in Genesis.
You can see here how I get the template from the web and edit the custom page to create a different template for the home page.
I also show how you can choose standard page templates without sidebars, etc., through the Genesis Theme Settings.
Uploading the local site to a host
I’ve been doing everything locally so far and I have the site more-or-less how I want it so it’s time to put it on the client’s host.
There are other ways of doing this – by exporting and importing the MySQL database, for example – but this method works for me.
Creating child and grandchild pages and a drop-down flyout menu
I perhaps should have done this stage locally but here I explain how you can build a drop-down flyout menu in WordPress and Genesis by creating pages as child pages of a parent page to show the relationship between the pages.
Adding text and images to the pages
The website is online – although, it may not be live yet, I use a plugin like UnderConstruction to create a holding page – now we can add text and images to the pages. Or, even better, get the client to add text and images to the pages.
I always like to explain to my clients that websites are living and breathing entities and should be constantly updated instead of being left to gather dust. So it is important to get the client engaged with the website at an early stage so that they are more likely to continue adding to it and so the website will be more of a success.
So, I usually make a video like the one above explaining how to import images and format text within a WordPress page or post.
Creating WordPress sites for clients
The above 10 videos show how you can build a high quality premium business website. Clients will be prepared to pay a premium rate for this service as you are giving them exactly what they ask for plus the ability to easily change and add to the site in the future.
I’d be interested to hear what you think about this process. Are there any other stages you include when you build a website for a client?
Should I be offering any other service or functionality for the client?
If you like any of the videos, please give them a thumbs up in YouTube!
Hi Rob
Thanks for sharing all the videos.
Will be great for setting up sites for clients.
Only watched the first one but look forward to watching the rest.
Cheers Rob
Thanks Keith, some of the videos were included in the other posts about Genesis but I wanted to put them all in one place in the order that they were made. They’re all quite short, mercifully!
They are good Rob and very informative.
You design a pretty good Genesis site.
Do you ever use any of the off-the-peg child themes?
Some of the latest themes are fantastic.
I’ve only ever bought Streamline which was interesting to see how they widgetize the home page with a jQuery slider. I know they’ve bought out a lot of new themes recently. I’d love to get a few!
I just found your site as I’m looking to move from the Studiopress child themes into designing one of my own. This is a great resource! Appreciate you putting it out there.
Appreciate the comment, Mike, thanks. Best of luck with your Studiopress child theme!
Hi Rob,
Just to let you know that I find your tutorials really helpful. I am currently considering switching from the Thesis framework to Genesis, something that is not for the faint of heart 😉
Thank you, Alexandra, I’m glad you’ve found this helpful.
I’ve just done a quick search on the Studiopress forums. Here’s a quick tip: if you are using Thesis SEO make sure you us the SEO Data Transporter plugin to convert the SEO fields to Genesis SEO or a supported third party plugin.
If you go for it – best of luck!
That’s good to know, Rob. I had in fact been wondering if it were possible to move my existing Thesis SEO settings to Genesis. Thanks!
Let me know if there’s anything else, Alexandra.
Thanks again, Rob. As a small token of my appreciation I’ve just purchased Genesis through your site 🙂
I think I’ll start with setting up a MAMP system as a local playground to get to know the framework better before I actually switch themes on my blog.
That’s very kind, Alexandra. MAMP is great. Easy to set up and perfect for tweaking your own theme until you’re ready to upload it to your host. Best of luck and come back if you have any further questions.
Will do Rob. Thanks again.
Thanks Rob. Really great videos. You make it seem easy.
I am building a Genesis website where I want to use different colors for menu headings, with associated colors (but lighter) for the drop down menus. Is this something I can do in the child theme?
From a fellow Brit living across the Atlantic
Hello Michelle, fellow Brit living across the pond, yes, you can change that in the child theme’s style.css.
HI Rob, I am in two minds about MAMP and local server development. First, I have had a lot of trouble getting MAMP to work, and always end up doing my development on my hosted server (it saves time and frustration with MAMP). Second, if I DID do all of my development on a local server, and had a serious problem – computer dies for whatever reason, house is burgled and computer stolen – then all of my development work is gone too. But if the work is on my server, I can still access it from another machine. Do you have any thoughts on this? Thanks for the great tutorials.
Hey Tim. I really find MAMP saves time. Here’s how I use it. The last time I installed MAMP on my new iMac and new Macbook, it only took me literally a couple of minutes to install MAMP and have WordPress set up. I always use the same WordPress install locally.
I only really use the local install for theme development. So getting the site to look the way the client wants and creating custom page templates, etc. But not to add much content. However, if you do add content here is a video about how to upload a local WordPress site to a host. But the local work only takes a few hours at most so it’s usually a question of uploading the theme files.
This is all a pretty quick process so I don’t tend to worry about back up (although I have Time Machine).
After the site is uploaded then I can work on inputting the content and tweaking the design. Of course, at this stage, the client can help inputting the content as well.
I hope this helps.
Thanks Rob, terrific advice once again – very much appreciated!
Love the feature picture. Surprised no one’s commented on it! Thanks so much for the amazing video. I was struggling to get my header logo stylized properly, searching in vain through the Genesis forums and posting a new topic with no results.
Fortunately I found this post through a Google search and that cleared it up.
Maybe you should write a book: “Genesis for Dummies”, I know I’d buy it 🙂
Thanks again Rob.
Hey Stephen, they certainly don’t make rock groups like they used to, that’s for sure! So glad you’d buy a “Dummies” book from me, that’s made my day! 🙂
Great stuff Rob,
I finally got around the watching the rest of these video’s. Given, I had already made one site with Genesis I got more tips than I was expecting. Nicely done.
Also love the classic 5 piece Genesis line-up photo.
Thanks, again, David. Glad you got some tips.
Yes, don’t they look geeky?
Hi Rob,
The first video isn’t loading. Is it my computer or is something wrong with the link?
Thanks buddy
Works for me, mate, give it another go 🙂