• No categories

Create WordPress Theme

Today i am going to show you which files are needed or created to create a wordpress theme. This is a small tutorial which covers only the basics of theme creation, so it give you a clear view how to start creating themes of wordpress. You can download wordpress from wordpress.org.

Commonly Used WordPress Theme Files

404.php -Error page, served up when someone goes to a URL on your site that doesn’t exist
archive.php – Page that displays posts in one particular day, month, year, category, tag, or author
comments.php – This file delivers all the comments, pingbacks, trackbacks, and the comment form when called
footer.php – Included at the bottom of every page. Closes off all sections. (Copyright, analytics, etc)
header.php – Included at the top of every page. (DOCTYPE, head section, navigation, etc)
images – a Folder – Keeps all the images that make up your theme in one place
index.php – This is typically the “homepage” of your blog, but also the default should any other views be missing
page.php – Template for Pages, the WordPress version of static-style/non-blog content
screenshot.png – This is the image thumbnail of your theme, for help distinguishing it in the Appearance picker
search.php – The search results page template
sidebar.php – Included on pages where/when/if you want a sidebar
single.php – This file is displays a single Post in full (the Posts permalink), typically with comments
style.css – The styling information for your theme, required for your theme to work, even if you don’t use it

Create a file named screenshot.png and put it in your themes folder (300px x 225px in size)
Put this info at the top of your style.css file
/*Theme Name: Theme NameTheme URI: http://your-website.com/cool-theme/Description: Totally awesome WordPress theme by <a href="http://your-website.com/">Yours Truly</a>Version: 1 (WP2.8.4)Author: Your NameAuthor URI: http://your-website.com/Tags: super, awesome, cool, sweet, potato nuggets*/
The header file is the first file that is called when WordPress is rendering any type of web page. As such, its contents begin with the DOCTYPE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
After DOCTYPE element is the opening HTML tag.
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
After the opening <html> tag, we move into the <head>.. Within the <head> section, we begin with <meta> tags.
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
Other important meta tags include “description” (very important) and “keywords” (less important). But because the description and keywords for any given page on your site depend on the actual content of that page, it is best to dynamically generate these tags rather than include them directly here.
Simply use this code as the <title> element in your theme’s header.php file and you’re good to go:

<?php if (function_exists('is_tag') && is_tag()) {
single_tag_title('Tag Archive for "'); echo '" - ';
} elseif (is_archive()) {
wp_title(''); echo ' Archive - ';
} elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - ';
} elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - ';
} elseif (is_404()) {
echo 'Not Found - ';
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description');
} else {
if ($paged > 1) {
echo ' - page '. $paged;
} ?>

The <head> is also the place to link to external resources like CSS and JavaScript files. Since your theme requires the presence of a style.css file in the root directory of your theme, you might as well use it.
<link rel='stylesheet' href='<?php bloginfo("stylesheet_url"); ?>' type='text/css' media='screen' />
The parameterized function, bloginfo(“stylesheet_url”), returns the exact URL of the stylesheet.
you want to include the popular JavaScript library jQuery on your page. WordPress ships with a copy of jQuery you can link to. To do so, simply call this function in your head area or functions.php file:
<?php wp_enqueue_script('jquery'); ?>
You can load your own script on the page like this:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/myscript.js"></script>
bloginfo function here outputs the URL path to the active theme directory. You can also link your custom css like below
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/listings.css" type="text/css" media="screen" />

The wp_head() Function

A must for any theme, the wp_head() function simply tells WordPress “Right here, this is inside the <head>.” It is kind of a generic function that is used as a “hook” on which the WordPress core, plugins, and custom functions may attach things. In the previous section, the code uses the wp_enqueue_script function. All by itself, that function doesn’t have any effect. But when the wp_head tag is also present, it serves as a hook that serves as the location at which the wp_enqueue_script function will load the script.
Plugins also use the wp_head function to load their own scripts and CSS files.

Blog_info() function:

there is a WordPress function for pulling out a variety of information about your blog. This information is useful on a regular basis when creating themes. Here is the function…
<?php bloginfo('template_url'); ?>
…and here is the different types of data that you can get from it:
admin_email = mail@amandip.com
charset = UTF-8
comments_rss2_url = http://www.amandip.com/comments/feed/
description = Improve Your WordPress Skills to the Top Level!
url = http://www.amandip.com/
html_type = text/html
language = en-US
name = Help of WordPress
rdf_url = http://amandip.com/home/feed/rdf
rss2_url = http://amandip.com/home/feed
rss_url = http://amandip.com/home/feed/rss
siteurl = http://amandip.com/
stylesheet_directory = http://amandip.com/wp-content/themes/mytheme
stylesheet_url = http://amandip.com/wp-content/themes/mytheme style.css
template_directory = http://amandip.com/wp-content/themes/mytheme
template_url = http://amandip.com/wp-content/themes/mytheme
text_direction = ltr
version = 2.8.5
wpurl = http://amandip.com/
Loop used to display posts after checking posts are available or not :

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>
<span>Posted on</span> <?php the_time('F jS, Y'); ?> <span>by</span> <?php the_author(); ?>
<?php the_content('Read Full Article'); ?>
<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', '); ?> <?php comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?></p>
<?php endwhile; ?>
<?php next_posts_link('Older Entries'); ?>
<?php previous_posts_link('Newer Entries'); ?>
<?php else : ?>
<h2>Nothing Found</h2>
<?php endif; ?>

Here is a number of common and highly useful “inside-loop-only” functions:
• the_permalink() – displays the permalink URL for each post
• the_ID() – displays the ID of each post
• the_author() – displays the name of the author for each post
• the_category() – displays the category/categories to which each post belongs

While you are inside the loop, you also have access to a bunch of preset variables that are populated after the_post() is executed. These variables exist in the object $post.
$post->ID – returns the ID of post; useful for other functions that need an ID.
• $post->post_content – the actual post content, including all markup; useful when you need to process the content of a post before outputting it.
• $post->post_modified – returns the datestamp of the last time the post was updated.
• $post->post_name – returns the slug of the post.
Some Common “Outside Loop” Functions
Here is a number of common and frequently used “outside-loop-only” functions:
• wp_list_pages() – displays a list of links to your static pages
• next_posts_link() – displays a link to older posts in archive views
• wp_tag_cloud() – displays a tag cloud of all your tags
• get_permalink() – returns the permalink of a post for use in PHP
To check which query is used by wordpress to handle a page, simply put following variable in the file:
<?php echo $query_string; ?>

Show sidebar on some pages and hide in others
you want some of your Pages to display your regular sidebar, and hide it from some of your other Pages. Apart from this difference, all of your pages will be exactly the same. A better approach is to use a custom field to designate if you want to have a sidebar or not. Then in the template, look for that custom field and behave accordingly. Here is how this could look in your index.php file:

<?php // conditional sidebar display
if (!get_post_meta($post->ID, "noSidebar", true)) {
} ?>

You could use this exact same technique for anything that you wish conditionally to include or not include on a page template, without having to create multiple templates.


In any of your theme files where you wish to display a sidebar, simply place the following template tag where you would like it to appear:
<?php get_sidebar(); ?>
That function will go get the file “sidebar.php” and place its content where this function was called. Working with multiple sidebars?
<?php get_sidebar('secondary'); ?>
That function will retrieve the file called “sidebar-secondary.php” and load that.

List recent posts

<?php wp_get_archives(array(
'type' => 'postbypost', // or daily, weekly, monthly, yearly
'limit' => 10, // maximum number shown
'format' => 'html', // or select (dropdown), link, or custom
'show_post_count' => false, // show number of posts per link
'echo' => 1 // display results or return array
)); ?>

This will output a list of linked Post titles according to the specified parameters.

Display a tag cloud

<?php wp_tag_cloud(array(
'smallest' => 10, // size of least used tag
'largest' => 20, // size of most used tag
'unit' => 'px', // unit for sizing
'orderby' => 'name', // alphabetical
'order' => 'ASC', // starting at A
'exclude' => 9 // ID of tag to exclude from list
)); ?>

List of categories

<?php wp_list_categories(array(
'orderby' => 'name', // alphabetical
'order' => 'ASC', // starting at A
'show_count' => 0, // do NOT show # of posts per cat
'title_li' => __('Categories'), // include title list item
'exclude' => 12, // ID of category to exclude
'depth' => 0 // levels deep to go down cat tree
)); ?>

Widgetizing a sidebar, or any other region for which you wish to have manageable areas, is pretty easy.

<div id="sidebar">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()) : ?>
<li><!-- stuff shown here in case no widgets active --></li>
<?php endif; ?>
Now in your functions.php file, you “register” the sidebar with a custom function:
if (function_exists('register_sidebar')) {
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',

Now every widget you add will appear inside list tags with corresponding <h2> headings, which should fit well into the surrounding markup.

The Footer

Footers are so commonly used that WordPress again has a special template tag for including them into your theme:
<?php get_footer(); ?>
This function will accept only one parameter, a string, which works like the sidebar function. Used without a parameter it will fetch the footer.php file and insert it. When used with a parameter like so…
<?php get_footer("mini"); ?>
<?php get_footer("mega"); ?>
…the get_footer() template tag will retrieve the theme files “footer-mini.php” and “footer-mega.php,” respectively

The wp_footer() Hook

The wp_footer() hook is only used down in the footer instead. It tells WordPress, “the footer is right here.” All by itself, it doesn’t do anything, it’s just a generic hook that can be used to which scripts and other functionality may be attached.
For example, it is fairly common practice to load HTML-dependent JavaScript files from within the footer instead of the header. The location of the wp_footer() hook within your footer.php file will determine where the JavaScript is displayed in the source code. Thus, a good place for this hook is just before the closing <body> tag.
<?php wp_footer(); ?></body>
Just a thin black bar with a copyright and a small illustration in footer. Even that small bit of text could be kept dynamic:
© <?php echo date("Y"); bloginfo('name'); ?>


WordPress themes can include a special file, functions.php, which gives you a lot of control and power over things that happen in your theme. Think of it like a file that can do anything a plugin can do, without needing a plugin.Because the functions contained within the functions.php file reside within the theme folder itself, the code inside it depends on that particular theme being active in order to run. Plugins on the other hand, remain operational (or inoperational, as the case may be) regardless of which theme is active. Thus, don’t put anything in functions.php that is required by multiple themes. Likewise, don’t do anything with a plugin that is only relevant to the current theme.

About the Author:

Comments are closed.