WordPress Theme Tutorial
In this tutorial I will show you the basics of how to write your own WordPress themes. This guide assumes that you already have a fair amount of experience with HTML, CSS, and PHP. In case you do not, this guide won’t help you much, you should brush up on those things before moving on to this guide.
The most important thing to keep in mind when writing your own WordPress themes is that you remember why you are doing it. For me, I wanted to personalize my blog so that it would speak out to my tastes, and have all of the features that I expect from a WordPress theme. Unfortunately most free themes that are available are unable to offer all of the features that I want in a theme, and those that do don’t look very good by my standards. Eventually I got tired of modifying the themes that I did like to support the features that I want, every time a theme updates it would overwrite my changes. After getting fed up, I decided to go about writing my own theme which would include features such as a custom drop down menu, infinite scroll support, and an out of the way, or non-existent footer area. Keep your goal in mind, if this is something you desire enough you will stay motivated.
What You Will Need
These are some essential, and recommended tools and preparation steps you should take before you start working on your first WordPress theme. It’s important that you are properly prepared before you just dive right in. You may not need all of these things, and feel free to substitute where you see fit, but I personally recommend all of the following items.
- A test WordPress installation for seeing your theme live while it is in development. This should not be on your live site so you may need to create a separate WordPress installation for this.
- A code editor with syntax highlighting, such as NotePad++. This isn’t required, but it will make things much easier, and will help you find common errors quickly.
- A method of uploading your theme to your server quickly, such as FTP or a private Git repository. Personally I use SFTP, but started off with Git (Git became a bit of a hassle on Windows).
- It’s probably a good idea to have a basic HTML/CSS theme on file to work with, but it’s okay if you don’t. We will get the basic PHP & HTML out of the way first, and then you can worry about styling with CSS later or as you go. Up to you really, I won’t be going very much into style sheets.
Files We Will Be Working With, and What They Do
The first thing that you should know about WordPress themes is what files you will be working with, and the role that each file plays in your theme. We will dive into how to build these files in a little bit, but I want to give you a basic idea first.
** Typically in web design, a CSS file would just be a file containing all of your CSS elements to style your page. In WordPress the top of your style.css file contains a comment which describes your theme to WordPress, without this WordPress will not know anything about your theme, not even it’s name.
This file is loaded up as soon as a page is loaded, inside of this you can setup hooks, filters, actions, etc. You can also define theme support for items like infinite-scroll, as well as define widget areas, custom menu areas, and all sorts of nifty stuff. Think of this as almost the brain of your theme.
header.php & footer.php
The header and footer files are what goes at the top and bottom of content, think of them as the bread to your sandwich. We’ll go into more detail as to why you need these files later.
Remember how the header & footer files are the bread? Well index.php is the meat & cheese of your sandwich, this is your main loop, this is where the magic happens.
This is where we will keep our “loop”. If you don’t know what the loop is don’t worry, I’ll be covering this topic soon enough.
Similar to index.php, but for singular blog posts.
Similar to index.php, but for pages.
Similar to index.php, but for search results.
This is where you will define what users see when what they are looking for can’t be found.
Let’s Get Started, Shall we?
Okay, so the first thing that you need to do is make your style sheet. Create a new file called style.css and make sure that you at least have the following code at the top, of course, don’t forget to change the information for each field as you see fit.
/*Theme Name: My First Theme Theme URI: https://mywebsite.tld/ Description: My first WordPress Theme! Version: 1.0 Author: My Name <[email protected]> Author URI: https://mywebsite.tld Tags: enter,some,tags,for,your,new theme */
If you don’t already have a style sheet in mind for your new theme, don’t worry about it, you can come back for the rest later, just make sure you have that comment at the top of your file for now.
The next thing we want to do is work on our header, footer & index files. Remember you will need to modify these as you see fit, I’m only providing a basic outline to help you get started in understanding the code behind your WordPress theme. I’m going to let you worry all about the actual design aspects of your theme.
©2014, My Name; All rights reserved.</footer> </body> </html>
index.php & search.php
If you are feeling lazy, you can copy index.php to search.php, it won’t really make a difference either way unless you want to format the two differently. For example, instead of using the_content() for search, you may choose to use the_excerpt(), which will just give a few teaser lines from the beginning of your post in the results.
<nav id="navigation_index"> • </nav>
In content.php we are simply telling WordPress how we want our posts to look when they are put onto a page. Putting this into content.php makes it easier to manage from a single file & WordPress will automatically grab it up for us when we use the get_template_part() function inside of our while statements on index.php & the like.
<div id="post-" ><footer class="post-footer"> </footer> </div>
single.php & page.php
Essentially single.php & page.php are just like index.php in the aspect that we want to bring in our loop, in fact, you could just copy over index.php as single.php & page.php and it would be all the same, except for without comments. The main difference here is that I have added the comments_template() into the code for you, and this is a pretty solid framework for your single & page files.
<div id="post- " ><footer class="post-footer"> </footer> </div>
Now that you have some of your basic files created, let’s go ahead and dive a bit into some of the more advanced features that you can add to your theme with functions.php.
In this example I will show you how to add support for infinite-scroll, a feature provided by WordPress.com’s Jetpack plugin.
'scroll', 'footer_widgets' => false, 'container' => 'content', 'footer' => true, 'wrapper' => false, 'render' => false, 'posts_per_page' => 15, ); add_theme_support( 'infinite-scroll', $mytheme_inf_options ); } add_action( 'init', 'mytheme_init' ); ?>
Given that you have followed the example code I have given you for everything else, your functions.php will now add support for JetPack’s infinit-scroll given that it is activated.
If you don’t like, or don’t understand the options given for the infinite scroll support, then you can find a more detailed overview about this feature <a href="http://jetpack.me/support/infinite-scroll/" target=_blank>here</a>.
So that’s essentially all you really need to know about WordPress themes, there is much more to it, but we have covered the basics.
I’m sure you are eager to get started on the bread and butter of your theme, you know, the actual look and feel.
I’ll be going into more detail about custom menus, widget areas, and more in my next blog post, so remember to subscribe & leave a comment if you have any problems or notice any mistakes.