Developing WordPress Themes
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
One of the main attractions for WordPress users is the great themes contributed by the thousands of users around the world. Some of these themes are proprietary and some are free. Using these themes, you can decorate and display your WordPress blog in whatever style you want. Though in general bloggers are happy with customized themes, sometimes to make something different from others, you may want to customize the look and feel of your blog. If that is so, there is no way other than editing the theme files.
In this tutorial, we will show you how to develop WordPress themes on your own. We will also show you some quick tricks to achieve the desired functionality by editing the minimum amount of code. Design hacks and directions will help you to develop awesome themes for the rest of the WordPress community.
Just keep in mind that creating a WordPress theme doesn't require you to be a PHP pro. All you need is a basic idea about PHP, loops, and variables. Sometimes even just a cut-copy-paste will work fine. The most important thing that you need is a good knowledge about CSS.
[edit] Start Using a Blank Page
Before going deep into theme development, we need to understand how WordPress actually works and how the contents are served to the end users. So we will start with a blank theme (a blank PHP file) and play with it. Once you get the basic idea, we will dive into further details.
[edit] Set It Up
Using your favorite text editor or PHP editor, create a blank PHP file inside the themes folder. WordPress themes have a lot of code in CSS and a minimal amount of code in PHP. A theme consists of at least one CSS file and a couple of PHP files.
To set up a blank theme, we need to create two files first and then we will grow gradually. So how do you want to name your theme? Choose an interesting name, because the WordPress community will know you by the name of your theme. For the time being, let our theme be known as "zephyr".
Every theme must stay in its own directory, and you must place each theme under the themes folder inside the wp-content/themes folder. Let us create a folder "zephyr" under the themes folder.
Inside this zephyr folder (wp-content/themes/zephyr), we will now create a CSS file by the name of style.css in which we will define our theme for the WordPress blogging engine (it may sound a bit weird, but that is easy). Let us create the CSS file with the following content:
/* Theme Name: Zephyr Theme URI: http://our_wordpress_url Description: Some description about our theme Version: 1 Author: Its You Author URI: http://author_website_url */
This content must be at the top of the CSS file.
Now create a blank index.php file in the same folder. Just keep it blank with absolutely no code in it.
That's it; we have developed our first theme. If you don't believe it, just log into the WordPress admin panel and click on the Presentation menu. At the bottom of the page, you will find our theme zephyr listed there.
If you select this theme and go to your WordPress blog, you will find a blank page. This is because we didn't add any code in our index file. The following sections will show you how to do this.
[edit] Adding Content to Our Theme
Now it's time to add some content to our theme. Let us display the title of all our posts. Open your index.php file inside the zephyr folder and add the following code:
<?php
if (have_posts())
{
the_post();
the_title();
}
?>
This code is totally self-explanatory. It means that if there are posts in our blog, we have to fetch them and display the titles. Please note that the content of the post is fetched by the the_post() function, which is a built-in function in WordPress. Now go to your blog and run it. You will be able to see only one title, which is from our last post. Clearly this is not what we were expecting. We wanted to see the titles of all our posts. To do this, we have to just add a loop.
<?php
if (have_posts())
{
while(have_posts())
{
the_post();
the_title();
echo "<br/>";
}
}
?>
The preceding code works by checking whether there are posts, and if so looping through them, fetching their content, and displaying the title. Now take a look at the blog. You will see something like the following screen:
It is interesting to note that we displayed all these titles with just nine lines of code. Let's have some fun now. Each and every post in WordPress has an ID. We will now add a link to each of these titles. We will also see the content of the posts when the respective titles are clicked.
<?if (have_posts()):?> <? while(have_posts()):?> <? the_post()?> <a href='<?=the_permalink()?>'><?=the_title()?></a> <br/> <?endwhile;?> <?endif;?>
( Please note how we use the block syntax here for if and while loops. If you are not familiar with this syntax, please visit the alternative syntax for control structures in the PHP manual, which is available online at http://www.php.net/manual/en/control-structures.alternative-syntax.php. )
If you now visit the blog, you will find that every title is displayed as a text link; however, nothing happens when we click on them. To further modify it, we will add some more code so that we can see the content when we click on these titles.
<?if (have_posts()):?> <? while(have_posts()):?> <? the_post()?> <a href='<?=the_permalink()?>'><?=the_title()?></a> <?if (!is_home()):?> <p> <?the_content();?> </p> <?endif;?> <br/> <?endwhile;?> <?endif;?>
Now if you click on any title, you will see the content of that particular post.
Please note that an Edit link is also available if you are logged in as the administrator.
Next we are going to add the category name and modify the look and feel of this page. So far WordPress has been displaying our posts using only one file, index.php. If we want to modify the look and feel for just the single-post display as shown in the preceding screenshot, then we can add some code in the index.php file; however, it is a wise idea to split the code into multiple files for the sake of manageability. WordPress seeks a file called single.php for displaying a single post and if that is not available, WordPress uses the index.php file. We are now going to add the following code to the single.php file to display the post with a better look and feel:
<? if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><? the_title(); ?></h2>
<? the_content(); ?>
<? edit_post_link(__('Edit'), '<p>', '</p>'); ?>
<? endwhile; endif; ?>
If you now browse any post, you will view it in the following format:
[edit] Displaying the Post Excerpt on the Front Page
We displayed just the title of our posts on our front page. To display the excerpt under each post title, let us modify our front page as follows:
<?if (have_posts()):?>
<? while(have_posts()):?>
<? the_post()?>
<a href='<?=the_permalink()?>'><?=the_title()?></a>
<?the_content("more");?>
<br/>
<?endwhile;?>
<?endif;?>
The <the_content("more")> function will split the post content and display the portion before the <more> tag placed inside the post, if any is available.
Please note the more link displayed in the preceding screenshot.
[edit] Retrieving the Category Name for Each Post
If we want to display on the front page the category name under which a post belongs, let us modify the code in the index.php file as follows:
<?if (have_posts()):?>
<? while(have_posts()):?>
<? the_post()?>
<a href='<?=the_permalink()?>'><?=the_title()?></a>
in <strong><?the_category(",");?></strong>
<?the_content("more");?>
<br/>
<?endwhile;?>
<?endif;?>
Now if you browse the front page, it will display the category names beside all the posts.
[edit] Retrieving the Date and Author
Again, we may want to display the date and author of each post beneath the post title. The WordPress API contains all the necessary functions for themes, and we have built-in functions for displaying the name and author of each post as well. Let us modify the single.php file as follows:
<?if (have_posts()):?>
<? while(have_posts()):?>
<? the_post()?>
<h1><a href='<?=the_permalink()?>'><?=the_title()?></a></h1>
<?php _e("Posted "); ?> by <?php the_author() ?> at <?php the_time('F jS, Y')?><hr/>
<?the_content("more");?>
<br/>
<?endwhile;?>
<?endif;?>
[edit] Retrieving Lists of Categories, Archives, and Calendars
There are several ways in which you can sort your blog posts, for example, through categories and archives. You can also display a calendar where all the posts are linked by dates; so whenever you click on any date, you can see all the posts made on that day. The WordPress API has built-in functions for all these.
To retrieve the list of categories, you can use the wp_list_cats() function. While using this function, you can exclude some categories and sort them according to different criteria. For example, take a look at the following code:
<?
//this will display all categories
wp_list_cats();
echo "<hr>";
//this will display all available categories excluding some specified //exclusively
wp_list_cats("exclude=2,5,1,6&sort_column=name");
?>
If you run this code in the index.php file, you will understand the difference.
To display the archive of your posts, use the wp_get_archives() function. You can display archives in the following formats:
- Monthly
- Daily
- PostByPost
- Weekly
You can limit the length of the archive by supplying an additional limit parameter. You can also enclose each archive link by supplying before and after parameters.
<? wp_get_archives('type=monthly&limit=5'); ?>
Take a look at the different archiving styles as shown in the following screenshot:
You can display a calendar in your WordPress blog using the wp_get_calendar() function.
The date on which a post was made will be shown as a link so that anyone can click it and view the posts.
[edit] Display an RSS Feed Image beside Every Category
If you want to display the RSS feed link for each of the categories, you just need to specify the feed image in the wp_list_cats() function. For example, take a look at the following code block:
<?
wp_list_cats("exclude=2,5,1,6&sort_column=name&feed_image=feed.gif");
?>
When you run the code (assuming you have placed a small RSS icon, feed.gif, in your WordPress root folder), you will see the following output:
Since we haven't defined any style for links yet, they are displayed in the default format.
All the category parameters are documented in detail in http://codex.wordpress.org.
[edit] Displaying Blogroll and Pagelinks
To display all the links in your blogroll, use the wp_get_links() function. It will deliver all the blogroll links enclosed by any HTML tag that you supply.
<?php get_links('-1', '<li>', '</li>', '', 0, 'name', 0, 0, -1, 0, true);?>
The preceding line of code will display links from your blogroll under every category. The second and third parameters indicate the HTML tags that are to be used to wrap each of these links. Here, the <li> and </li> parameters mean that they will output links in the <li><a href='linkurl'>linktext</a></li> format. The sixth parameter indicates the field to be used to sort the links. The last parameter is a very interesting one. We supplied true, which indicates that the function will output the links on the page. If we supplied false, it would have returned the output instead of displaying it.
To display the links of the available pages, use the wp_list_pages() function. You can supply the title to be displayed as shown below.
<? wp_list_pages("title_li=MyPages")?>
[edit] Displaying Blog Information
You may also want to display some basic information about your blog in your theme. This information could be your admin_email, rss_url, atom_url, pingback_url, or comments_url.
To display all or some of this information, you need to invoke only one function, which is bloginfo(). Let us see the following example:
<a href='<?bloginfo('rss_url')?>'>RSS</a><br/>
<a href='<?bloginfo('rss2_url')?>'>RSS2</a><br/>
<a href='<?bloginfo('atom_url')?>'>Atom</a><br/>
<a href='<?bloginfo('comments_rss2_url')?>'>CommentsRSS</a><br/>
This code will produce the following HTML output, specific to my blog settings.
<a href="http://localhost/wp/feed/rss/">RSS</a><br> <a href="http://localhost/wp/feed/">RSS2</a><br> <a href="http://localhost/wp/feed/atom/">Atom</a><br> <a href="http://localhost/wp/comments/feed/">CommentsRSS</a><br>
Since I am running the blog example from my PC, the URL is localhost. However, it will vary from blog to blog.
There are several other parameters available that can be passed to bloginfo. These parameters are needed while developing plug-ins and themes where you need information to access specific files.
These parameters are wpurl, siteurl, description, name, pingback_url, stylesheet_url, stylesheet_directory, template_directory, admin_email, charset, and version.
[edit] Displaying a Search Bar
A search bar is a essential part in the sidebar. If we want to display a search bar in our theme, we need to add the following code in our sidebar file, sidebar.php:
<li id="search"> <?php include (TEMPLATEPATH . '/searchform.php'); ?> </li>
The preceding code includes a file named searchform.php from our current theme directory. This searchform.php file includes the following block of code:
<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <p> <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" /> <input type="submit" value=" Search " /> </p> </form>
[edit] Displaying Comments under Each Post
We are now going to display a section for adding comments under each post, especially in single-post mode. When a visitor clicks over a post title, then he or she can read the post content, read the existing comments, and post his or her comments.
For displaying the comment submission form and the existing comments, we need to place code in a new file, comments.php. The following section explain this.
[edit] Displaying Existing Comments
Let us modify our comments.php file as follows. We will first check for available comments and display them, if any. If commenting is open for this post, we will also display an RSS feed for the comments and a trackback URL for this post.
<?php if ( $comments ) : ?>
<ol id="commentlist">
<?php foreach ($comments as $comment) : ?>
<li id="comment-<?php comment_ID() ?>">
<?php comment_text() ?>
<p><cite><?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?>
<?php _e('by'); ?>
<?php comment_author_link() ?> —
<?php comment_date() ?> @
<a href="#comment-<?php comment_ID() ?>">
<?php comment_time() ?>
</a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
</li>
<?php endforeach; ?>
<?php else : // If no comment is available ?>
<p><?php _e('No comments.'); ?></p>
<?php endif; ?>
Now if you visit the page, you will find the screen looking as follows:
Now add the following section in your comments.php file to enable visitors to make comments.
<? if ( comments_open() ) : ?>
<form action="<? echo get_option('siteurl'); ?>/wp-comments-post.php" method="post"id="commentform">
<? if ( $user_ID ) : ?>
<p>Logged in as <a href="<? echo get_option('siteurl'); ?>/wp-admin/profile.php"><? echo
$user_identity; ?></a>
<a href="<? echo get_option('siteurl'); ?>/wp-login.php?action=logout"title="<? _e('Log out of this
account') ?>">Logout »</a></p>
<? else : ?>
<p><input type="text" name="author" id="author" value="<? echo $comment_author; ?>" size="22"
tabindex="1" />
<label for="author"><small>Name <? if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="email" id="email" value="<? echo $comment_author_email; ?>"
size="22"tabindex="2" />
<label for="email"><small>Mail (will not be published) <? if ($req) _e('(required)');
?></small></label></p>
<p><input type="text" name="url" id="url" value="<? echo $comment_author_url; ?>" size="22"
tabindex="3" />
<label for="url"><small>Website</small></label></p>
<? endif; ?>
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<? echo $id; ?>" />
</p>
<? do_action('comment_form', $post->ID); ?>
</form>
<? endif; ?>
Now if you visit the page, you will see the following output:
We have discussed all the basic things you need to know for kick-starting theme development. We will now create a nice theme for ourselves with all these features and having a good look and feel.
[edit] Plan for a Design
Before creating a theme, always have a clear idea about the look and the features of your theme. WordPress themes can be of one-column, two columns, three columns, or four columns. Among these, one-column and two-column themes are the most common and popular as opposed to four-column themes.
Please note that table-based layout designs are not a good idea for designing layouts. Try to use <div> object and CSS for layout design. This will give you extreme flexibility over your themes.
In this tutorial, we will cover a typical two-column theme since it is impossible to cover every type of layout. However, we will also cover the layout code for three-column and four‑column themes. A two-column theme could be either of the following two; that is, we can have our sidebar either on the left or the right side.
Out of the preceding two layouts, we will design the first one here. However, it is not a big issue to convert our design to the second one.
In the sidebar, we will display categories, recent comments, recent posts, a calendar, a search bar, a login link, a blogroll, and some introductory text. We will also fetch RSS feeds from outside and display them in our sidebar.
In the header section, we will display our blog title and an image.
In the footer section, we will display some RSS links and copyright information.
Later in this tutorial, we will also discuss widget-enabled themes and how to add several options in the administration panel. We will start by creating the CSS code
for our layout and design in a single index.php and style.css file. Gradually, we will split the components. Our theme will be Opera-, IE_, and Firefox-compatible.
[edit] CSS and HTML Code for a Two-Column Theme
As we start with a blank index.php file, we will not insert any PHP code at first. Let us make a simple index.php file with the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
div
{
border: 1px solid #ccc;
}
body
{
margin:0px;
margin-top: 10px;
}
#container
{
width: 900px;
margin:auto;
border: 0px solid #ccc;
}
#header
{
height: 100px;
}
#post_container
{
border: 0px solid #ccc;
}
.separator
{
clear:both;
margin-top: 10px;
margin-bottom:5px;
border: 0px solid #ccc;
}
#left_pan, #right_pan
{
float: left;
height: 400px;
}
#left_pan
{
width: 200px;
}
#right_pan
{
width: 690px;
margin-left: 5px;
}
#footer
{
clear: both;
height: 20px;
}
</style>
<body>
<div id="container">
<div id="header">
</div>
<div class="separator">
</div>
<div id="post_container">
<div id="left_pan">
</div>
<div id="right_pan">
</div>
<div class="separator">
</div>
</div>
<div class="separator">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
( Note - The code marked as bold in the preceding file is redundant. This is just to demonstrate how CSS-based layout actually works. In our original theme, we will remove these lines.)
Now if you browse the page, you will see the following output:
The layout is same in Firefox, IE, and Opera. If you want your sidebar on the right side, just change the CSS code in the preceding file as follows and your sidebar will instantly move to the right.
#left_pan
{
width: 690px;
}
#right_pan
{
width: 200px;
margin-left: 5px;
}
So you now understand why CSS-based layouts are so widely used. They are easy to maintain, easy to modify, and of course flexible to work with.
Next, we will split our theme into smaller parts for the sake of maintainability. For example, we will split our theme into four parts:
- Header
- Body
- Sidebar
- Footer
Let us modify our index.php file as follows:
<?php get_header(); ?> <div id="post_container"> <?php get_sidebar(); ?> <div id="right_pan"> </div> <div class="separator"> </div> <?php get_footer(); ?>
You may wonder about the small size of the previously big index.php file. Well, the other parts of the file are distributed among four files: style.css, header.php, sidebar.php, and footer.php. The built-in function get_header() includes the content in header.php in the current directory (that is our theme directory). get_sidebar() does the same, but it includes content from sidebar.php; get_footer() includes content from footer.php.
We moved out all style content to the style.css file. Let us now see the content for the other files.
[edit] header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<body>
<div id="container">
<div id="header">
</div>
<div class="separator">
</div>
[edit] sidebar.php
<div id="left_pan"> </div>
[edit] footer.php
</div> <div class="separator"> </div> <div id="footer"> </div> </div> </body> </html>
We have split our index.php file into four small parts. Here, we see three parts, namely header.php, sidebar.php, and footer.php. The index.php
file will itself contain another part that is the body. Since the body is quite large, we will create it step-by-step
later in the tutorial. All the four parts are included together in the index.php file; so the output remains same. We split our code into four separate files so that we can design each part more conveniently.
[edit] Design the Header
Now it's time to design our header. Open the header.php file in your favorite text editor. We need to see the blog title and the blog subtitle in the header. Besides, we also need a header image.
We need to create a nice background for our header section; so we create a 5*150 pixel GIF file with a gradient effect. We save that file as bg.gif in the images folder under our themes folder.
Let us now code our header.php file as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<body>
<div id="container">
<div id="header">
<div id="header_title">
<?php bloginfo('name'); ?>
</div>
<div id="header_subtitle">
<?php bloginfo('description'); ?>
</div>
</div>
<div class="separator">
</div>
We will also add the following CSS code to our style.css file:
#header
{
height: 150px;
background-image: url("images/bg.gif");
border: 1px solid #000;
}
#header_title
{
font-family:Georgia;
font-size: 28px;
margin-top: 45px;
margin-left: 20px;
color: #eee;
}
#header_subtitle
{
font-family:Georgia;
font-size: 12px;
margin-top: 5px;
margin-left: 22px;
color: #edc;
}
Our page now looks as follows:
[edit] Design the Sidebar
We need to place the following content in our sidebar:
- Some description
- Pages
- Categories
- Archives
- Blogrolls (links)
- RSS links
We know how to fetch this content; so let us open the sidebar.php file and modify it as follows:
<div id="left_pan">
<div class="sidebar_container">
<ul>
<li><h2>About</h2></li>
<h2>About</h2></li>
<li>Packt publishing is a great publisher. Packt publishing is a great publisher. Packt publishing is a great
publisher.</li>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Pages</h2></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Categories</h2></li>
<?php wp_list_cats("exclude=2,5,1,6&sort_column=name"); ?>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Archives</h2></li>
<?php wp_get_archives();?>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Links</h2></li>
<?php wp_get_links();?>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Meta</h2></li>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
<li><a href="http://wordpress.org/">WP</a></li>
</ul>
</div>
</div>
Let us also modify the CSS code for our sidebar as follows:
#left_pan
{
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
}
#left_pan h2
{
margin-top: 0px;
padding-top: 2px;
margin-bottom: 10px;
font-size: 16px;
padding-bottom: 5px;
display: block;
border-bottom: 1px solid #ccc;
color: #8CBFF8;
}
#left_pan ul
{
padding:0px;
margin: 0px; /* for IE */
list-style:none;
}
.sidebar_container
{
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #093C76;
color: #eee;
}
#left_pan a:link, #left_pan a:hover, #left_pan a:visited
{
color: #eee;
text-decoration: none;
}
#left_pan a:hover
{
text-decoration: underline;
}
[edit] Design the Body
We have now reached the most crucial part of our blog. We need to design the body of our blog. We need to display the post title, the post author, the date on which the post was made, the post excerpt, and the number of comments. Let us first design the body. Open the index.php file and modify it as follows:
<?php get_header(); ?>
<div id="post_container">
<?php get_sidebar(); ?>
<div id="right_pan">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>">
<?php the_title(); ?></a></h2>
<div class="meta">
<?php _e("Posted in"); ?>
<?php the_category(',') ?> by <?php the_author() ?> on the
<?php the_time('F jS, Y') ?>
<?php edit_post_link(__('Edit This')); ?></div>
<div class="main">
<?php the_content(__('(more...)')); ?>
</div>
</div>
<div class="comments">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('<strong>0</strong> Comments'), __('<strong>1</strong> Comment'), __('<strong>%</strong> Comments')); ?>
</div>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<div class="warning">
<p><?php _e('Sorry, no posts matched your criteria, please try and search again.'); ?></p>
</div>
<?php endif; ?>
</div>
<div class="separator">
</div>
<?php get_footer(); ?>
The CSS code for the style.css file is as follows:
#right_pan
{
padding-left: 10px;
}
#right_pan h2
{
margin-top: 0px;
font-size: 18px;
display: block;
margin-bottom: 5px;
}
#right_pan .meta
{
font-size: 12px;
padding-bottom: 5px;
border-bottom: 1px solid #ABB9C8;
}
#right_pan a:hover, #right_pan a:link, #right_pan a:visited
{
text-decoration: none;
color: #27486E;
}
#right_pan .comments
{
padding-bottom: 20px;
}
After adding the body, our page will look as follows:
When someone selects a single post, the screen will look as follows:
[edit] Design the Footer
This is the simplest part of our theme. Here is the code for footer.php:
</div> <div class="separator"> </div> <div id="footer"> sample theme for wordpress book. powered by wordpress. </div> </div> </body> </html>
The code for style.css is as follows:
/* footer */
#footer{
border-top: 1px solid #ccc;
padding-top: 20px;
padding-bottom: 20px;
font-size: 12px;
}
[edit] Themes in Minutes
In the previous section, we learned how to create themes from scratch. We had ultimate flexibility over our design and created exactly what we wanted. However, all this comes at a cost. To develop a theme completely from scratch needs a lot of time.
Recall how we started our theme development process. We first planned our theme, thought over its design, and probably sketched roughly with some illustration software. Finally, after fixing the design and content, we started coding. You should not self-design a theme unless you are delivering a very complex theme like the one http://www.ajaxian.com has. If you go to the Ajaxian website, you will find a lot of gadgets there and it represents its content in a very nice and stylish way.
For creating quick themes, you can pick an already existing theme that is similar to your planned design (at least in terms of layout) and modify its code. Sometimes these themes are so similar to each other that all you need to do is edit the CSS file.
Ian Marine's very popular Green Marine theme is a very interesting theme with a lot of work around. This theme comes in different color schemes obtained just by modifying its CSS file and sometimes slightly changing the image files. For example, there are two variations of the Green Marine theme created by Ian Marine. They are called Blue Marine and Orange Marine, respectively.
These two variations will help you to understand that you can bring considerable changes to the look and feel of the theme by modifying the CSS file.
There is one more trick for instantly getting a suitable theme for yourself. Many of these themes have built-in banner images. You can modify these banners and get a native look for your site. If you are not sure where to find these banner images, you can search for the images folder inside the theme folder. Usually theme developers use this images folder to store the images relevant to themes. If that doesn't work, you can search the image files inside the theme folder one by one or directly go to header.php and see where the banner image has been taken from.
You can go to http://codex.wordpress.org to look for some appropriate themes for your site. There you will find some popular WordPress theme repositories.
[edit] Instant Theme Builders
Besides editing existing themes and developing from scratch, you can also obtain themes using theme builders. Theme builders are web-based or desktop-based applications where you can specify colors, layouts, and other styles for the different parts of a theme (namely, header, sidebar, body, and footer).You can then generate CSS files accordingly.
The most advanced instant theme builder is available at: http://redalt.com/tools/builder.php.
[edit] Step 1: Select the Layout
In the theme builder by RedAlt, there are four supported layouts. You can select any of the four layout styles. Take a look at the following screenshot overleaf:
[edit] Step 2: Select Some Options
In this step, you can select some options for the different sections, like whether you want to display RSS Links, Trackback links, and so forth.
[edit] Step 3: Select a Color Scheme
This step allows you to select a basic color scheme for your theme.
[edit] Step 4: Details of Colors and Download
In this step, you can specify the color details for the different sections.
Finally, you can download the theme by clicking on the Download link at the bottom of the page.
After downloading, you can use this theme file as usual.
[edit] Widgetizing Themes
In WordPress 2.0, there is a plug-in called widge't,' which is an interesting part of WordPress. This plug-in has been developed by Automatic.com where the developer of WordPress, Matt Mullenweg also works. Using this plug-in, you can dynamically customize your sidebar by dragging and dropping widgets. Widgets
are small dragable parts that handle different types of functionality in the WordPress blog. For example, a Text Widget helps to display some text; an RSS widget fetches RSS contents from remote sites, and so forth.
In a standard widget plug-in, there are six types of built-in widgets. However, there are a lot of third-party widgets also. Let us see how to manage these widgets.
Log into the WordPress admin panel and select any theme from the Presentation menu. If that theme is "widget-ready" or compatible with widgets, you will instantly find a sub-menu called Sidebar Widgets available under the Presentation menu.
If you select the Sidebar Widgets menu, you will find something like the following:
Now you can drag each of these items onto your sidebar (on the right) and your sidebar will contain only those items. For example, let us drag three widgets: recent posts, recent comments, and a text widget. If you click on the icon on the right-hand side of each widget, you can configure that widget.
Now if you browse your blog, you will see the change in your sidebar.
[edit] Making Your Theme Widget Enabled
To make our theme widget enabled, we need to make some simple changes. Open your sidebar file and modify according to the following:
<div id="left_pan">
<div class="sidebar_container">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<li><h2>About</h2></li>
<li>Packt publishing is a great publisher. Packt publishing is a great publisher. Packt publishing is a great publisher.</li>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Pages</h2></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Categories</h2></li>
<?php wp_list_cats("exclude=2,5,1,6&sort_column=name"); ?>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Archives</h2></li>
<?php wp_get_archives();?>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Links</h2></li>
<?php wp_get_links();?>
</ul>
</div>
<div class="sidebar_container">
<ul>
<li><h2>Meta</h2></li>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
<li><a href="http://wordpress.org/">WP</a></li>
<? endif;?>
</ul>
</div>
<div style="azimuth:behind">
</div>
</div>
Well, one last step for completion. Create a file called functions.php in our theme folder, i.e. zephyr, and add the following code in it:
<?
if ( function_exists('register_sidebars') )
register_sidebars(1);
?>
Now if you select zephyr as your theme, you will find that a Sidebar Widgets menu appears.
Now you can drag and drop widgets from this menu. For example, make your sidebar like this:
After making all the desired changes, your blog will look as follows:
[edit] Additional References
- For instructions on Configuring WordPress Themes, click here
- For instructions on installing and setting up WordPress, click here
- For more information, visit blogstheme.com
- For downloading themes, visit premiumwp.com
[edit] Source
The source of this content is Chapter 7: Developing Themes of WordPress Complete by Hasin Hayder (Packt Publishing, 2006).
