Writing Your First WordPress Theme
- Jan 31st, 2015
- Add a comment
The aim of this tutorial is to get you building your first WordPress theme. We’ll start with quite a basic, generic website layout consisting of a header, main area (for posts & pages), footer and sidebar. The idea is that once you understand how this all comes together you can start to look at more exotic ideas.
I’m going to assume a moderate level of experience with WordPress and web development in general, but otherwise I’m going to try and keep it quite beginner friendly.
To put the initial building blocks in place for your theme all we have to do is create a folder and some basic files reflecting particular elements of your theme. So let’s first create the folder and then decide what these elements will be. We can then create files for each of them.
In your WordPress installation go to wp-content/themes and create a subfolder. We’ll call it “my_theme”, though of course you can more or less call it what you want, this is just a place holder for the purposes of this tutorial.
As mentioned previously we’re going to have a footer, main area, header & sidebar in this theme. So we need to create php files for each one:
You’ll also need to create style.css as this will control the styling of our new theme.
Now we can fill in these files with some generic code. You can largely copy and paste this in for now, changing only instances of the theme name if you used something different. Once this code is in place we have a boring theme, but a theme nonetheless. A basis from which to grow and adapt this plain layout into the stunning, award-winning theme I know you’re capable of!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php get_header(); ?> <div id="main"> <div id="content"> <h1>Main Area</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <h4>Posted on <?php the_time('F jS, Y') ?></h4> <p><?php the_content(__('(more...)')); ?></p> <hr> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); </p> <?php endif;> </div> <?php get_sidebar(); ?> </div> <div id="delimiter"></div> <?php get_footer(); ?> |
We can see a handy little php function on the first and last lines here; pulling in your header and footer respectively. So we’d best fill the code in for those next then! You can also see it handling your posts, with an exception case covered in case no posts match.
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <title>My Theme</title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"><br /> </head> <body> <div id="wrapper"> <div id="header"> <h1>Header</h1> </div> |
You can see in the code above that this is where we’re bringing in the main stylesheet and setting a rather boring header of ‘Header’. We can make things a little more tricky later on by using a variable here to bring in post/page titles for the h1 tag.
|
1 2 3 4 5 6 |
<div id="footer"> <h3>Footer</h3> </div> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="sidebar"> <h2><?php _e('Recent Posts'); ?></h2> <ul> <?php $recent_posts = wp_get_recent_posts(); foreach( $recent_posts as $recent ){ echo '<li><a href="' . get_permalink($recent["ID"]) . '">;'; . $recent["post_title"].'></a> </li>';; } </ul> <h2><?php _e('Archives'); ?></h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </div> |
Above we’re using inbuilt WordPress functions to grab the recent posts and archives. Have a look through the WordPress Codex’s Function Reference section for further ideas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* Theme Name: My Theme Theme URI: http://www.example.com/themes Description: A Basic Starter Theme. Author: Owen Radford Author URI: http://example.com Version: 1.0 . General comments/License Statement if any. . * body { text-align: center; } #wrapper { display: block; border: 2px #a4b5c4 solid; width:90%; margin:1px auto; } #header { border: 2px #a4b5c4 solid; } #content { width: 75%; border: 2px #a4b5c4 solid; float: left; } #sidebar { width: 25%; border: 2px #a4b5c4 solid; float: right; } #delimiter { clear: both; } #footer { border: 2px #a4b5c4 solid; } .title { font-size: 12pt; font-family: verdana; } |
The theme information has to be in a comment at the top of this file with no whitespace before it. This way admins using your theme will be able to see this information. Following this you can see we’ve set some colours for each section and set out where it will sit – e.g sidebar is set to the right and content to the left. When you’re ready you can go further in this file and start styling individual elements, such as h1 tags etc.
Where can you go next? Well you can dive into that CSS and use more interesting colours for a start! We’ve just used one colour there, so perhaps start looking at an overall colour palette for your theme? Then as mentioned, start styling individual elements.
As we hinted at earlier there’s a whole host of inbuilt functions (and if you’re clever enough you can write your own), so start to look at what you can add to these standard blocks. Additionally, for the sake of simplicity we only used a few initial blocks (indeed you really only need style.css & index.php but you wouldn’t get far with those alone!), there’s a whole list more you can look at:
I hope that’s helped you put together your first WordPress theme and understand a little more about how it all works.
