In this seven-week series, we step things up a notch to\u00a0really test your skills. You’ll learn how to:<\/p>\n
- \n
- Develop a\u00a0WordPress theme with include files, template parts, template tags,\u00a0plus action and filter hooks<\/li>\n
- Add Customizer functionality to your theme<\/li>\n
- Develop plugins using best practice for coding<\/li>\n
- Add complex, custom queries and loops to your themes and plugins<\/li>\n
- Create and work with custom post types<\/li>\n
- Work with metadata, including post metadata (or custom fields) and other metadata e.g. author metadata, and<\/li>\n
- Translate your code and get it ready for release<\/li>\n<\/ul>\n
When you’ve worked through this series and applied what you’ve learned, you’ll come out the other end a competent WordPress developer, ready to create your own themes and plugins and distribute them to other users or even sell sites built on them to clients.<\/p>\n
Note: It\u2019s important that you have a working knowledge of PHP as this is the foundational language of WordPress and I’ll be referring to code snippets throughout this series.<\/em><\/p>\n
Let’s get started.<\/p>\n
Missed a tutorial in our WordPress Development for Intermediate Users series? You can catch up on all seven posts here:<\/strong><\/p>\n
- \n
- WordPress Development for Intermediate Users: Theme Development in Detail<\/a><\/li>\n
- WordPress Development for Intermediate Users: Making Your Themes Customizer-Ready<\/a><\/li>\n
- WordPress Development for Intermediate Users: Building Plugins<\/a><\/li>\n
- WordPress Development for Intermediate Users: Custom Post Types and Taxonomies<\/a><\/li>\n
- WordPress Development for Intermediate Users: Queries and Loops<\/a><\/li>\n
- WordPress Development for Intermediate Users: Custom Fields and Metadata<\/a><\/li>\n
- WordPress Development for Intermediate Users: Internationalization<\/a><\/li>\n<\/ul>\nThat’s right, tons of WordPress knowledge, peer review, instructor feedback and certification, for free for WPMU DEV members<\/span>Start Learning<\/span><\/a>\n
<\/p>\n
Before You\u00a0Begin<\/h3>\n
This course assumes you have coded for WordPress before and that you have a basic understanding of how themes and plugins work. If you haven’t developed for WordPress before, or you’d like a\u00a0refresher, I\u00a0strongly\u00a0recommend you read through\u00a0WordPress Development for Beginners<\/a>, which will give you everything you need to know before you start this series.<\/p>\n
You’ll also need access to a few things so that you can follow along and work alongside me. These are:<\/p>\n
- \n
- A development WordPress installation. I recommend working on your local machine<\/li>\n
- A code editor with FTP access if you’re working remotely (which you will be doing eventually)<\/li>\n
- If your code editor doesn’t have FTP access, an FTP client<\/li>\n<\/ul>\n
I deliberately haven’t given you links to help you find all these things \u2013 I’m assuming that you’re already at the level where you know about this kind of stuff\u00a0and can find them yourself.<\/p>\n
For this tutorial in this series as well as the next tutorials, we’ll be working with a demo theme that I’ve created, which you can find on Github<\/a>. I’ve also created a demo site<\/a> that I’ll be updating as we work through the series. Here’s how it looks right now:<\/p>\n
![\"demo](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/05\/starting-demo-site.png\")
<\/div>\nAs we work through the different topics in this part of the course, I’ll show you how to apply what you’ve learned to the demo theme. So if you want to follow along, download it before you start and install and activate it on your development site.<\/p>\n
Take a look at the starting theme so you can see how it’s structured. It includes template files, widgets and a menu \u2013 all covered in our beginner development series. It also includes some basic styling \u2013 I’m not claiming that it’s beautiful, and you might want to improve on it!<\/p>\n
What We’ll Cover in This\u00a0Tutorial<\/h3>\n
In this first tutorial,\u00a0we’re going to dive straight into theme development. This tutorial will build on what you learned\u00a0if you studied the following modules in our WordPress Development for Beginners course:<\/p>\n
- \n
- Building Themes<\/a><\/li>\n
- Widgets and Menus<\/a><\/li>\n<\/ul>\n
So, I’m not going to show you how to create a basic theme or how to register a widget area or a menu. If you don’t know how to do these things, go back to that series and check it out!<\/p>\n
Instead, we’re going to look at more advanced aspects of theme development, specifically:<\/p>\n
- \n
- Approaches to theme development<\/li>\n
- Structuring your theme \u2013 the template hierarchy<\/li>\n
- Using\u00a0template parts<\/li>\n
- Adding template tags for styling<\/li>\n
- Adding functionality in the functions\u00a0file<\/li>\n
- Adding hooks to your theme<\/li>\n<\/ul>\n
But before we start coding\u00a0that, let’s take\u00a0a look at some of the approaches available for theme development.<\/p>\n
Approaches to WordPress Theme Development<\/h3>\n
Before you start to develop your own themes, it’s worth considering how you’re going to go about it. Let’s take a look at some of the possible approaches.<\/p>\n
Approach 1: Coding from Scratch<\/h4>\n
Writing a theme from scratch isn’t something I’d recommend. It means starting with a blank PHP file (or files) and then adding all of the code you need to create a theme. You might decide to do this the very first time you build a theme but you certainly shouldn’t do it for subsequent themes. After all, there will be a lot of shared code that you can re-use.<\/p>\n
So, whatever approach you use for your first theme, don’t code your next theme from scratch \u2013 either edit your first theme, or use your first theme to create a starter\u00a0theme.<\/p>\n
Approach 2: Adapting Static HTML<\/h4>\n
This has traditionally been the method that people use to learn WordPress, and it’s a good approach if you’ve already created static sites and are comfortable\u00a0with coding HTML. Alternatively, if you’ve created a prototype for the site you’re building using static HTML, this might be the approach you use.<\/p>\n
If you’re starting with static HTML, you’ll need to do a few things to convert your markup to a theme, including:<\/p>\n
- \n
- Changing your index.html<\/em> file to index.php<\/em><\/li>\n
- Splitting it into template parts \u2013 separating out the header, footer and sidebar into different files<\/li>\n
- Adding a loop instead of static content<\/li>\n
- Adding any relevant template tags (more of which shortly)<\/li>\n
- Editing\u00a0information\u00a0in the
<head><\/code> and elsewhere on the page, such as site name and page description. Use functions such asget_bloginfo()<\/code> to fetch this from the database instead of manually coding it into your theme<\/li>\n- Replacing a hard-coded navigation menu with one that uses the WordPress menus interface<\/li>\n
- Replacing static content in the sidebar and footer with widget areas, where relevant<\/li>\n
- Adding extra template files as well as index.php<\/em>\u00a0\u2013 more of which shortly<\/li>\n<\/ul>\n
You’ll have learned about a lot of this in our beginner WordPress development course.<\/p>\n
For a detailed walkthrough that teaches\u00a0you how to create a theme from static HTML, you might find my book, WordPress Theme Development: Beginner’s Guide<\/a>, helpful.<\/p>\n
\n![\"Underscores](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/05\/underscores-wide.png\")
Underscores is a starter theme that can speed up your WordPress theme development<\/figcaption><\/figure>\n<\/div>\n Approach 3: Using a Starter Theme<\/h4>\n
Another approach is to take a third-party starter theme such as underscores<\/a> and use that as the basis for your code. This will give you all the WordPress essentials such as a loop, and save a lot of work.<\/p>\n
Alternatively, you can use your own starter theme, that you create when you develop your first theme. Strip out all of the code that won’t apply to other themes, such as colors, fonts or bespoke layout and functions, and use that to kick things off when you develop your next theme.<\/p>\n
- Changing your index.html<\/em> file to index.php<\/em><\/li>\n
- Widgets and Menus<\/a><\/li>\n<\/ul>\n
- Building Themes<\/a><\/li>\n
- WordPress Development for Intermediate Users: Making Your Themes Customizer-Ready<\/a><\/li>\n
- WordPress Development for Intermediate Users: Theme Development in Detail<\/a><\/li>\n
![\"cherry](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/05\/cherry-framework.png\")
![\"wphierarchy.com](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/05\/wp-hierarchy.png\")