This is part 1 of my “How to write a wordpress theme” guide. I’ve never written anything like this before, so bare with me.
First things first, this isn’t going to be a comprehensive guide. It assumes HTML, CSS and PHP experience. In other words, it expects you to be able to write a website without wordpress.
All themes in WordPress are kept in a folder called, “/wp-content/themes”, each in their own, unique folder. Make this the name of your theme. My theme, for example, is called, “softwareandunicycles”, since I only plan on having it used for this blog. The most basic wordpress themes will have two files: “style.css”, where all the CSS for your theme will be kept, and, “index.php”, which does the heavy-lifting in terms of classes, elements and the like.
Write your “style.css” file as though you’re writing it for your own website. Make sure that you test it on a separate, static webpage first so that you know and can sort out how the page is going to look before publishing it to the web. If you already have a stylesheet for a static website, great! Just use that. All you need to do is add some comments at the top of it to provide details about your theme. Here’s a simple example:
/*
Theme Name: Our First Theme
Theme URI: http://example.com
Description: This is our first example theme
Author: Your Name
Author URI: http://example.com
Version: 0.1
Tags: flat, single-column, one-column, white-background
License:
License URI:
This is a simple example theme in order to convey the use of CSS in WordPress themes. It'll include theming some basic HTML elements as well as creating some IDs and classes. */
h1 {
font-weight: normal;
font-family: sans-serif;
}
h1.heading {
font-weight: bold;
font-family: monospace;
text-align: center;
}
.post {
margin: 20px 0px;
}
p {
font-family: sans-serif;
}
p:first-line {
margin-left: 20px;
}
The top comment is mandatory, and most of it should be self-explanitory. Note that all these fields have to be present, in this order, in order for WordPress to read it properly. At the end, we can just write a nice little comment saying whatever we like: treat it like a normal comment you’d put at the top of your CSS file.
After that, the actual stying! Currently it’s quite basic, and it’s going to result in a website that’s pretty drab, but importantly there there are some settings for standard HTML stuff and some settings for custom classes, namely “.post” and “.navigation”. There are WP-specific classes and IDs, but for the most part they’re used internally by WordPress and you can always use your own classes instead.
Moving on to index.php, this is the file that defines how all the pages on your WordPress are going to be formatted, unless you add more special files for individual types of pages – I’ll likely cover that in a new blog post. It will contain what WordPress calls, “The Loop”. By default, your WordPress’ root will show users a page with a great big long list of your blog posts. The Loop goes through each of those blog posts, does what you tell it to to each of those posts, then prints them out. It’ll also do that when someone views an individual post, though only for that post, or an individual page, but only for that page. This makes it incredibly powerful and flexible in how you can manipulate your blog posts.
Here’s a simple example index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html <?php language_attributes(); ?>>
<!-- Example index.php
This is going to be a simple example to demonstrate the loop, some of the loop items and how you can manipulate the look and layout of your website.
First, the boring heading stuff that goes at the top of every HTML page (Note that this will be different, depending on e.g. what standards you want to use): -->
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>
<?php
wp_title("|", true, "right");
bloginfo('title');
?>
</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<!-- Then, the heading that appears at the top of every page. -->
<h1 class="heading"><a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'title' ); ?></h1>
<!-- A list of links, automatically generated by WordPress for each of our pages. -->
<?php wp_nav_menu() ?>
<!-- The loop. -->
<?php while ( have_posts() ) : the_post(); ?>
<!-- Here we can see an example of using an element for a class in every post. This <div class="post"> tag will be repeated around every post in the long list of posts WordPress generates automatically for us. -->
<div class="post">
<!-- The heading. PHP functions prefixed with, "the_" are used in the loop to get information about the current post, such as its title or its permalink. -->
<h1><a href="<?php the_permalink(); ?>><?php the_title(); ?></a></h1>
<!-- The actual content of the posts. -->
<?php the_content(); ?>
<!-- Finally, we close everything up and end the loop. -->
</div><?php endwhile; ?>
<!-- All the stuff you put at the end of your typical HTML file. -->
</body>
</html>
There’s an awful lot of code up there, and a lot of it will look alien, so lets take a moment to look at what each of those PHP functions (wrapped in <?php ?> tags) do.
First is the language_attributes() function. This simply grabs the language and font encoding of the blog and puts it in a friendly manner for the <html> tag. This is mostly useful for if you plan to redistribute your theme: other people will be blogging in other languages, and this makes sure the theme adapts to those differences. For more information, refer to the relevant page in the WordPress Codex.
The second and third functions are in the <title> tags. The first function, wp_title(), optionally takes three arguments, as demonstrated above: the first is the separator between the current page title and the blog title, which we’ve used a pipe “|” for; whether or not to echo the title (returning it as a HTML string instead of a PHP string), which in this case is true; and finally, on which side the separator should go on, left or right. You don’t need to define any of these options, in which case the first will be the » “»” symbol, the second will be true, and the third will be “none”, meaning it will go on the left. For more information, refer to the relevant page in the WordPress Codex. The third function, bloginfo(), is a function to quickly get different bits of information about your blog, including the blog’s name, description and the admin’s E-mail address. This is used in a variety of places in this theme to automatically add functionality (see the link “href” attribute in the heading, for example), and can potentially be used to add more functionality to the website. For more information, refer to the relevant page in the WordPress Codex.
The next function we come across is wp_head(). This function simply automatically generates more WordPress header information for different scenarios, such as the admin bar at the top of the page if you’re logged in to the blog. This simply goes at the end of the <head> tags, just before it closes. For more information, refer to the relevant page in the WordPress Codex.
The final function we call before entering the loop is wp_nave_menu(). This automatically generates an unordered list of hyperlinks to all the pages on your blog, so when you add/delete pages this list is updated automatically. There are a lot of arguments for this command, but for most cases the default is all that’s necessary. for more information, refer to the relevant page in the WordPress Codex.
The loop always begins with the PHP statement, <?php while (have_posts()): the_post(); ?>. Everything after this and before endwhile; is part of the loop. There are special WordPress functions that can only go inside the loop, and they have the_ prepended to them (such as the_title() and the_content()). Here, you define what goes into every blog post and page. As you can see, there’s some formatting HTML (<div class="post">, <h1> etc.). This can be used to provide a consistent look and feel about the content in all your posts and pages. For more functions that go in the loop, as well as other functions to display generated content, refer to the relevant page in the WordPress Codex.
That’s it! You’ve written your first WordPress theme. Watch this space for more posts about WordPress themes, including special template pages, sidebars for plug-ins, multiple loops and more(?).
=-=-=-=-=
Powered by Blogilo
=-=-=-=-=
Powered by Blogilo
