How to Build a WordPress Starter Theme: In Summary

0

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.

Part 1: Writing the HTML

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 looked at the various things you’d need to know before undertaking the task of building a WordPress Starter Theme (or any theme for that matter). Going into this series you should have a strong knowledge of HTML5. Also, a strong PHP background is important. You need good procedural programming knowledge and to be very comfortable with variables, arrays, loops and functions. OOP is a plus but not necessary by any means. You also won’t need too much CSS or JavaScript knowledge for this series, but if you plan to build themes completely by yourself in the future, you will need good CSS and JavaScript/jQuery skills.

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 header, nav and footer.

Part 2: Initialising the Theme

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 style.css and 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.

Part 3: The index.php File

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_head() and 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 wp_head() and wp_footer() tags which are used to hook stylesheets, JavaScript and SEO attributes into our theme from plugins and the functions.php file.

Part 4: The functions.php File

In this part, we created our functions.php file and used it to attach our CSS and scripts using wp_register_script() and 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.

Part 5: Menus and Sidebars

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.

Part 6: Wrapping It Up

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 header.php, footer.php and sidebar.php. We then moved the relevant markup into those files, and in our index.php file, we use get_header(), get_footer() and get_sidebar() to include them in the index.php file.

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.

Share.

About Author

Founder and Lead Developer at Affinity4.ie, a web development agency in Galway, Ireland. Develops mosty with WordPress, Laravel, PHP, MySQL, Git, Github, Sass and Compass.

Leave A Reply