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
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.)
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!