Making Your Own WordPress Theme with Genesis

I often ask the visitors here what they would like to me write about and the most common subject people mention is making your own WordPress theme.

WordPress is a powerful publishing platform which can be made to act and look like just about any kind of website.

What are WordPress themes and how do you make them? Themes are a collection of PHP, CSS and image files that change the design or “skin” of your website. But they also do much more than that. They can also change the interface, producing different templates for different pages, etc.

There are two main ways to create a new theme for WordPress:

• First you get use an existing simple theme like Starkers and modify it to produce your own theme

• Secondly, and this is the method I recommend, you can get a theme framework like Genesis or Thesis and create a child theme to run on top of the framework.

Setting up a child theme on a framework sounds more complicated but it actually simplifies the process of creating a website.

Using a theme framework makes your WordPress website future proof as these frameworks will be updated along with the WordPress core updates so there’s no way your site will suddenly stop working when you update WordPress.

Theme frameworks The benefit of using a framework is that the core theme coding is already done and done right. When you create your own custom theme, you are responsible for everything – so if anything goes wrong it’s up to you to fix.

Matt Mullenweg, WordPress founder developer:“Child themes are the only way you should build your WordPress site on top of a framework, andGenesis has great support for child themes and other WordPress functionality.”

I used to create WordPress themes from scratch but when I wanted to add improvements to them, like nested comments for example, I found it would conflict with another element of the theme and fixing it would mean starting again from scratch.

Even if you think you know everything, you will always be asked to do something you’re not quite sure how to accomplish. When using a WordPress theme framework like Genesis you have the support of thousands of top quality developers – and amongst them there is bound to be someone who knows the exact and best solution to any query.

Here are some other advantages of using theme frameworks:

• Good for SEO. Frameworks such as Genesis and Thesis are much better structured for SEO. WordPress SEO expert Joost de Valk gives Genesis 5 out of 5 for SEO. The SEO controls are so good you don’t even need an SEO plug-in, although if you do want one it’s fully compatible and transferable with Yoast’s WordPress SEO plug-in and others.

• Quicker to develop with. Because it is all expertly coded and follows best practices it allows you to cherry pick the best elements (drop down menus, post thumbnails, jQuery sliders) and drop them into your design.

• WYSIWYG controls. Theme frameworks have robust settings sections and widgetized areas, enabling drag-and-drop control over the website’s elements, allowing design changes without coding.

The reasons I use Genesis I’ve been using Genesis for most of this year and I can honestly say that I’ll never go back to writing themes on my own again. I can do everything I want with Genesis and I can do it quicker.

Yes, I’m using affiliate links in this article so if you make a purchase through one of the links I may get a commission. However, I would never recommend something to you that I don’t use myself. And this is why I use Genesis:

• Support. The documentation and developer support is awesome. You can ask how to do something through their forums and an expert developer will tell you within hours.

• Future-proof. Studiopress are always looking to the future. The next release, Genesis 1.8, will be responsive and create different device-dependent versions of the site for mobiles, iPads, tablets, etc. This is a big winner for me because the mobile web is going to be huge and so far the WordPress mobile plug-ins are not very customizable.

• Compatibility. It’s totally compatible with all the major WordPress extensions such as Gravity Forms, bbPress, WordPress Multi-Lingual, etc.

• Price. It is, actually, rediculously cheap. And cheaper than Thesis or Headway. Just $60 for the framework – which is all you need. You can create as many sites as you want and have access to the support. $60 is a small price to pay for total certainty in SEO, security, and website development.

•

Darren Rowse – Founder ProBlogger.net:“Genesis lets me sleep easy. Knowing my blog is well optimized, secure and easy to update lets me get on with developing content, community and building a business from my blogging.”

Creating a child theme on the Genesis framework for WordPress I have just made 10 videos explaining how I create websites – from the Photoshop mock-up to the finished site online. I’ll be writing blog posts about every stage of the process over the next few weeks. You can see all the videos on my YouTube channel now.

Here is the first video where I create a Genesis child theme for WordPress.

I always start to create a WordPress theme and website locally on my computer before loading it up to a host for final tweaking. It only takes a few seconds to install WAMP (PC) or MAMP (Mac) on your computer

and run WordPress locally and I recommend you do so when creating themes.

Once you have WordPress up and running you need to install your Genesis theme framework and your child theme. You will get your copy of Genesis as soon as you make the purchase. Un-zip it and put it in the /themes/ folder which, as you know, can be found in /wp-content/ amongst your WordPress files. No need to touch that folder ever again – all your theme changes will go in your child theme.

And then to load your child theme download a sample child theme from the StudioPress website or here:

You may want to re-name the child theme by changing the folder name and editing the style.css and the functions.php, but put the child theme next to the Genesis theme in the /theme/ folder and activate it in the WordPress back-end.

90% of the changes you make to the child theme will be to the CSS file. The other 10% – adding custom page templates, removing certain elements from certain pages, adding widgetized areas, etc., these changes can all be put in the functions.php file. Here is the functions.php file of the above sample child theme.

<?php /** Start the engine */ require_once( get_template_directory() . '/lib/init.php' );

/** Child theme (do not remove) */ define( 'CHILD_THEME_NAME', 'Sample Child Theme' ); define( 'CHILD_THEME_URL', 'http://www.studiopress.com/themes/genesis' );

If you add any code to the above, make sure it’s below the '/lib/init.php' ); line and that there are no spaces after the last character in the file.

Don’t worry about getting your hands dirty with PHP. The solution to any requirement you have of Genesis will either be in the documentation or will be sorted out in the forums. There are also a couple of Genesis plug-ins (Simple Hooks and Simple Edits) which further simplify the process. And once you start pasting in PHP you begin to understand the logic behind it.

What do you think? I’m really looking forward to sharing my methods of developing websites – there are more videos to come!

And, is there anything else you would like to know about creating WordPress sites?

Be sure to leave your comments and questions here.