February 20, 2014 / IST / Web Development.

WordPress theme development is very easy. You can design a theme only having index.php and style.css or separate for all. In this article I want to share them architecture and some useful function.

Let’s know theme architecture first. Theme folder has 10 php file and 1 CSS file. Now i am listing bellow with description.

  1. header.php : This file contains header part of your theme. Ex: title, description, logo, menu etc.
  2. index.php : This is necessary and most important file. When you open any blog then this file is called first. Index.php contains post loop to show recent article. It also call header.php, sidebar.php and footer.php by function  to display proper.
  3. functions.php : This is also a important file having sidebar support or any hook or custom theme function.
  4. page.php : If you have page than page.php brings matter to show.
  5. single.php :  single.php is responsible for full post display.
  6. sidebar.php : sidebar.php calls dynamic widget. You can use two, there or more sidebar.
  7. archive.php : It display category post or according to date.
  8. footer.php : It contains footer information. Ex: footer menu, copyright text etc.
  9. search.php : If you searches ant text than search.php display all post related to search text.
  10. 404.php : Basically 404 is an error, triggered by your server when file is not find. But you can customized 404 error if you have 404.php file in theme’s folder.
  11. style.css : Here you can deside template style. Ex : Color, Font, Background etc.

Now your theme is complete. Let’s discuss on necessary function according to file with html script to understand easily.

header.php

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

language_attributes builds up a set of html attributes containing the text direction and language information for the page. Ex: UTF-8

<title><?php wp_title(''); ?></title>

wp_title display post or page title.

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" />

Use is code to attache favicon icon. Favicon.ico is inside image folder. You can change it. bloginfo(‘template_url’) echos full template url up to theme folder.

<style type="text/css" media="screen">@import url( <?php bloginfo('stylesheet_url'); ?> );</style>

bloginfo(‘stylesheet_url’) echos stylesheet url means style.css automatically.

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

bloginfo(‘rss2_url’) echos RSS 2.0 url of your blog.

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

bloginfo(‘rss_url’) echos RSS 1.0 url.

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

bloginfo(‘atom_url’) echos Atom url.

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

bloginfo(‘pingback_url’) echos ping back url of post or page.

<?php wp_head(); ?>

This is important function to work plugins correctly. It is used by almost every plugins to hook css , java script or php function.

<?php bloginfo('name'); ?>

bloginfo(‘name’) displays name of site.

<?php bloginfo('description'); ?>

bloginfo(‘description’) displays site description.

<?php wp_nav_menu(array('menu' =>'menu-name','container_id'=>'main-id')); ?>

Recent wordpress introduces this function to display custom menu items to avoid wp_page_list or wp_list_cats  problems.

index.php, archive.php and search.php

<?php get_header(); ?>

This function is used to call header.php to display header information and style.

       <div id="content">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <h2><?php the_title(); ?></h2>
                <?php the_content('<p>Read the rest of this entry &raquo;</p>');
                endwhile;
            <?php endif; ?>
        </div>

have_posts checks your wordpress has posts or not this function returns boolean. While loop starts to run by default 10 times. Because wordpress sets 10. You can change from setting menu. If your wordpress has less than 10 post then it run only equal to no of published posts. the_post fetches post one by one. the_title displays title of post. the_content displays content of post.

<?php get_sidebar();?>

This function calls sidebar.php to disply widget.

and

<?php get_footer();?>

get_footer calls footer.php and displays footer material.

page.php and single.php

These files have same function what you use in index.php with 2-3 extra function. I shall discuss latter.

       <div id="content">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <h2><?php the_title(); ?></h2>
                <?php the_content('<p>Read the rest of this entry &raquo;</p>');
                endwhile;
            <?php endif; ?>
        </div>

An important thing is that here while loop runs only one time automatically.

<?php comments_template(); ?>

This function displays comment box and comments of people.

sidebar.php

<?php
        if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-name')):
        endif;
?>

function_exists checks the availability of dynamic _sidebar function then dynamic_sidebar takes argument as sidebar name and display entire sidebar’s widgets.

footer.php

It contains footer information. ex htmls tag, javascript file.

<?php wp_footer(); ?>

wp_footer is an important function. without using it, theme can break important features provided by plugins

functions.php

<?php
register_sidebar(array(
  'name' => __( 'Sidebar' ),
  'id' => 'right-sidebar',
  'description' => __( 'Widgets in this area will be shown on the right-hand side.' ),
  'before_title' => '<h1>',
  'after_title' => '</h1>'
));

add_theme_support( 'post-thumbnails' );
add_image_size( 'small-thumb', 145, 95, true );
?>

register_sidebar registers a sidebar. add_theme_support supports set featured thumbnail option. add_image_size creates custom thumbnail size.

404.php

No basic function is needed by this page. Write only 404 error….page not found.

Other Functions:

get_search_form() :  to display search form.

the_author_posts_link() : displays author name with hyper link to author page.

the_time(‘F jS, Y’) : display post or page published date.

the_category(“, “) : display post’s category with hyper link.

the_tag(“,”) : display post’s tag lists with hyper link.