Building a custom wordpress theme 101
WordPress is one of the most powerful blogging and content management tools out there to date. There are thousands of plug-ins and themes out there that you can use with a click of a button however sometimes these themes done meet your custom designs needs.
1) Create a new folder in your themes directory!
Let’s start with your folder structure. WordPress stores themes within the wp-content/themes folder. Create a folder called myTheme. Once you create your folder we need to create a few mandatory files. These files will drive your theme and allow you to apply it to your website.
2) CSS can do more than just style
You may wonder why the second step is to create a style sheet. WordPress reads your style sheet and grabs important information such as your theme name, author, author URI, description, and version number. So let’s create this file. Name it style.css and place it inside the folder myTheme. Now open up your newly created css file and add the following to the very top.
/*
Theme Name: myTheme
Author: Netgain SEO
Author URI: https://www.netgainseo.com
Description: A custom wordpress theme for my client.
Version: 1.0
*/
Make changes to these values as you see fit. Once that is complete we can move on. Once we have done this we can apply myTheme to our site in the backend of wordpress.
3) Screenshot (optional)
This is one of the easier steps. Take a screen shot of your design or save out a png from photoshop. Crop it to 300 x 225 and name it screenshot.png. Place it inside the myTheme folder.
4) Theme file structure.
WordPress looks for specific files inside your theme. The main files you will want to create are: index.php, single.php, header.php, footer.php
There are more files you can use however this will get us started. Your themes blog page will automatically call in index.php.
5) Header.php
Header.php should contain your doctype, body, and head tags. Inside the head tag you will want to include a title tag. WordPress uses a system to dynamically grab page titles based on post name, page name or any SEO plug-in you may install. You will want to place <?php wp_title(); ?> within the title tag.
Next we will want to pull in your stylesheet. The best way to grab your style sheet is to use wordpress built in function bloginfo(). We then pass a parameter of stylesheet_url like so: <?php bloginfo(‘stylesheet_url’); ?>
And lastly we need to pull in any javascript or css a plug-in may be using. By calling wp_head() wordpress will take care of this.
<!DOCTYPE html>
<html >
<head>
<title><?php wp_title(); ?></title>
<link rel=’stylesheet’ type=”text/css” href=”<?php echo bloginfo(‘stylesheet_url’); ?>” />
<?php wp_head(); ?>
</head>
<body>
6) Index.php
In order to call in your header and footer your index file should look like the following:
<?php get_header(); ?>
<!—- HTML WILL GO HERE—->
<?php get_footer(); ?>
Get_header() calls in your header.php file and get_footer() calls in your footer.php file.
7) Footer.php
The footer is fairly straight forward. We want to ensure that you close your body and html tags. There is also a function we will want to include that will place an admin tool bar at the top of your site when your logged in. This tool bar gives you quick links to edit a page, log out and more.
<?php wp_footer(); ?>
</body>
</html>
8) Conclusion
Now we have created the start of what could be a great dynamic website. Of course there is much more to it than this however this is where every theme should start. We can now add in our html to index.php placing wordpress loops, adding sidebars, and creating functions.
– Andrew MacPherson, Head of Web Development
