Welcome back! It’s been a month since we published the final part of the WordPress Starter Theme series, and in this post, we’ll do a a quick recap of what we covered in each part up to now. We’ll go through the general process we took to get here and hopefully you’ll have a better understanding of the benefits of tackling theme development this way if you’re a beginner. So, let’s get started.
In this part, we went over what a WordPress Starter Theme actually is. We also saw a few popular starter themes available and the differences between them. For this reason, it’s important to know the project’s goals before choosing or building a starter theme.
We then began writing the HTML. The HTML for this theme will be without classes or IDs to ensure the markup is simple and semantic. This is so that later you can easily choose any grid framework such as Bootstrap or Foundation to use with your theme. The structure/layout is a standard 2/3 content, 1/3 right-hand sidebar layout with a
In this part of the series, we set up our WordPress installation,including our Settings section in the WordPress dashboard. This was simply to ensure as much of our working installation was identical as possible for the dummy content imports later.
Next, we configured our local server. We set up our
httpd.conf file so the
mod_rewrite extension was on so we can change our permalinks structure in WordPress. Then in our
php.ini file we increased our memory limits, file size upload limits and anything else which may cause timeout errors while importing out dummy content. Next we installed a comprehensive amount of dummy content from WP Test. This dummy content is designed for testing themes and plugins.
Once that was done, we turned on
WP_DEBUG so we could see any errors as we progressed through building our theme. Finally, we created the necessary files to get our WordPress Starter Theme to show up in the backend. These are
index.php. Although more files are required to get the most out of WordPress, these are the only two files required to make WordPress recognise it as a functioning theme.
In the third part, we moved our HTML from earlier on into our
index.php file and then begun inserting some common WordPress Template Tags, including the necessary hooks such as
wp_footer() to get our admin bar to display from the frontend of our theme. We looked at a solution to a common problem with the
wp_title() function which causes our title to be blank when we are viewing our frontpage/homepage.
We then looked at the
In this part, we created our
functions.php file and used it to attach our CSS and scripts using
wp_enqueue_scripts(). We also took a look localisation/internationalisation (i18n). i18n relies on the
load_theme_textdomain() function and either a .mo or .po file to pull the relevant translation text from.
We loaded out styles using the
wp_enqueue_styles() function which automatically hooks our style into the head section where the
wp_head() function is placed. Once we had that done, we used a filter to correctly fix our
wp_title() function in our title and thus keeping our template files clean.
In this part, we looked at the process of registering theme support for menus and sidebars, and then how to place them in your theme correctly. To add theme support for menus we used
register_nav_menus() to register the name and location of the menus you want to use in your theme. Once that was done we used
wp_nav_menu() to tell WordPress where in our theme we want the menu to be displayed.
Once our menu was in, we used a similar process to add theme support for our sidebar. This was done with the
register_sidebar() function. We also looked at the benefit of using
register_sidebar() multiple times over using
register_sidebars(). Once our sidebar was registered, we added it to our theme using conditional tags and the
is_active_sidebar() function which checks for the presence of widgets in the sidebar. When we had checked for widgets, we displayed the widgets in our sidebar using the
dynamic_sidebar() function with the name of the sidebar.
In the final part, we moved the reusable parts of our theme into their own files. This is common practice in WordPress theme development. The files we created are
sidebar.php. We then moved the relevant markup into those files, and in our
index.php file, we use
get_sidebar() to include them in the
During this process, we looked at a good workflow in Sublime Text 2 to allow us to easily keep track of the edits we were making. We used
View > Layout > Columns:2 to bring up a second panel in Sublime Text, which would allow us to easily cut and paste our markup from
index.php to the various template parts.
Once the markup was properly broken out into the correct files we added our styles to give us a visual test to ensure out markup was still correct and our layout was as expected.
Finally, I gave some pointers on some extra features you could add to your theme, such as shortcodes, more menus, more sidebars and search functionality. Also, I spoke one more time about how important the Codex is, as if I hadn’t said it enough throughout the series! :)
That’s All, Folks!
I hope you’ve enjoyed this series, and have hopefully learned something new! If you have any comments about how we can improve the way we do Series here at wpContent, please leave a comment below, and our Editor will be sure to get back to you. Also, if you have any questions about this Series, or need some extra assistance, leave a comment and I’ll be sure to help out.