WordPress Theme Development

Pro WordPress Theme Development
Following is a step by step Tutorial for WordPress Theme Development
Setting Up Work Station
To get started with this tutorial we should set up a server on our computer
using either XAMPP or WAMP (usually if working on a PC), or MAMP if you are
working on a Mac. All of these tools allow for a local testing environment for
WordPress.
Make necessary folders and files
In the folder containing your WordPress installation, go to wp-content/themes/

and create a folder named “new theme”. This is where we will hold all of our files
during this tutorial. Now create the following files and folders:
/images(folder)
style.css
header.php
index.php
single.php
footer.php
archive.php
page.php
sidebar.php
functions.php
Step 1 – Style.css
The style.css will contain all of the elements that style our WordPress theme. We
will use it to declare the name of our theme as well as the author name and link,
and description and version of our theme. Put the following code in the start of
this file, please make sure that it should be a commented code.
/*
Theme Name: New theme
Theme URI: http://www.if-any.com
Description: Anything you want to write here
Author: Your name
Author URI: http://www.if-any.com
Version: 1.0
*/
Now we will create some basic styles in this file so that we will later implement in
some of the theme's files. All IDs and CLASSs are used as we normally write in CSS
file.
body{ #header{
font-family: Arial, Helvetica, Georgia, width: 750px;
Sans-serif; height: 100px;
font-size: 12px; }
background: #d9d9d9;
color: #000000; #blog{
} float: left;
a:link, a:visited{ width: 520px;
text-decoration: none; padding: 0 10px 10px 10px;
color: #000000; }
}
a:hover{ .sidebar{
color: #5f5f5f; float: left;
} width: 200px;
h1 { margin: 0 0 0 10px;
font-size: 54px; font-size: 14px;
} list-style: none;
h3 { }
font-size: 24px;
} #footer{
#wrapper{ clear: both;
margin: 0 auto; text-align: center;
width: 750px; height: 50px;
text-align: left; background: #ccc;
background: #fff; padding: 10px;
padding: 20px; }
}
Step 2 – Header.php
Now we will create the header.php, which at the moment will contain our
website logo, as well as our custom navigation, put the following code inside this
file.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title ( '|', true,'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo(
'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/*
* Add this to support sites with sites with threaded comments enabled.
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_head();
wp_get_archives('type=monthly&format=link');
?>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="<?php echo get_option('home'); ?>"><?php
bloginfo('name'); ?></a></h1>
</div>
The above code should be in the header.php of all of your themes. First we
declare the doctype, as well as use the standard that will be used to show the
name of your website as you type it in your WordPress settings, and then your
style.css and the PHP code that will enable WordPress 3.0's threaded comments.
Threaded comments?
Allow comment authors to reply to other comments, and display them in a

threaded layout.
Step 3 – Adding Custom Navigation
Now that we have coded up our header.php with our basic information and our
blog's name, we can add our custom navigation menu. Before we actually add the
code to our header.php file though, we have to first open up the functions.php
and add the necessary code to enable the custom menus, because we first have
to enable the navigation then it will be shown in our theme, add the following
code in functions.php file.
<?php
//Add support for WordPress 3.0's custom menus

add_action( 'init', 'register_my_menu' );
//Register area for custom menu

function register_my_menu() {
register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}
?>
As you can see via the commented sections of the code, the first part, with add
action is used to add support for custom menus, and next we register a custom
menu and name it “Primary Menu”. Now, we will move on to implementing the
menu into our theme.
To do this, we will have to add this line of code below at the end of our
header.php document.
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' =>
'nav', 'theme_location' => 'primary-menu' ) ); ?>
Now on to understanding exactly what this means. The primary function that is
being used is wp_nav_menu, with sort_column, container_class, and
theme_location as the arguments being used. What sort_column does is makes
sure that the order you pick in your WordPress dashboard is followed.
container_class will allow for you to choose the CSS class that you have created
to be used to style your menu. Lastly, theme_location just assigns the menu to
wherever we choose, which at the moment happens to be primary-menu.
Step 4 – Styling the Navigation
We have our custom header navigation up and running, but at the moment it just
looks like a boring old list of links. To fix this, we will create a class called nav in
our style.css, now we will add the following code into our STYLE.css file.
.nav{ .nav ul ul a{
width:750px; height:auto;
background: #000; line-height:1em;
display:block; padding:10px;
float:left; width:130px;
position:relative; }
}
.nav li:hover > a,.nav ul ul:hover >
.nav ul{ a{
list-style:none; color:#ccc;
} }
.nav li{ .nav ul li:hover > ul{

float:left; display:block;
}
position:relative;
} .nav ul ul ul{
.nav a{ top: 30%;
display:block; left:100%;
text-decoration:none; background: #343434;
}
color:#fff;
padding:0 15px 10px 0;
font-size:13px;
font-weight:bold;
}
.nav ul ul{
display:none;
position:absolute;
top:100%;
left:0;
float:left;
z-index:99999;
background: #212121;
}
Please note that above code is a simple code we usually write for navigation for
our templates.
Step 5 – Index.php
The index.php will be the home page of our website, and will contain code to
include our header, footer, and sidebar, which I will explain below, as well as the
code to include the most recent posts from our blog and take advantage of
WordPress's post thumbnails feature. Open index.php file and paste this code
there.
<?php get_header(); ?>
<div id="blog">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post">
<h3><a href="<?php the_permalink(); ?>"><?php the_title();
?></a></h3>
<div class="entry">
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?>
<?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment
»', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ',
''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>

</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
These lines of code are used to output all of the information in the header.php,
sidebar.php, and footer.php wherever you place them in your theme files.
Step 6 – Enabling Post Thumbnails
We have added our code to show the post thumbnails on the homepage, but at
the moment nothing happens as we have not actually enabled the feature to
work. Now open up the functions.php that we worked on before, and the below
code should be added after your menu navigation code.
// Enable post thumbnails
add_theme_support('post-thumbnails');
set_post_thumbnail_size(520, 250, true);
The code above is pretty self-explanatory as it spells out almost exactly what it
does. The second line will add the support for post thumbnails in our theme,
while the third line defines the exact dimensions of our thumbnail, which for this
article, will be set at 520 pixels for width, and 250 pixels for height.
Step 7 – Sidebar.php
The sidebar.php is, as you guessed, the file that will display all of the information
we want in the sidebar. Since we have already included the file in our index.php,
all we have to do is put the following code in this file and our sidebar will show up
on the homepage.
<div class="sidebar">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else :
?>
<?php endif; ?>

</div>
That will be all of the code that's added to our sidebar.php to make it functional.
We call the div that we created in our style.css, and the code below will make it
so that we can add widgets to our sidebar in the order and way we want them via
the WordPress backend. However, like many features, we have to add the
following code to our functions.php file first to make this feature work properly.
//Some simple code for our widget-enabled sidebar
if ( function_exists('register_sidebar') )
register_sidebar();
The code just tells WordPress to register a sidebar which we called in our
sidebar.php.
Step 8 – Single.php
The single.php is what will be used for a single post page, and most of the code
should look pretty similar since we've already coded up our index.php. Really the
only thing that's different is that we have added in our comments-template div,
and the code to include the comments.php.
Open the file single.php and add the following code inside that file.
<div id="blog">
<div class="post">
?></a></h3>
<div class="entry">
<?php the_post_thumbnail(); ?>
''); ?>
</p>
</div>
<div class="comments-template">
<?php comments_template(); ?>
</div>
</div>
<?php endwhile; ?>
<?php previous_post_link('< %link') ?> <?php next_post_link(' %link
>') ?>
</div>
<?php endif; ?>

</div>

Step 9 – Page.php
When you create a page in WordPress, a different file is used to display the
content of what you typed into the page, and that is page.php. The code will look
almost completely identical to what we typed up in our single.php, except since it
is a page we are going to omit the comments template, and change the post
navigation slightly to handle a page instead of a post. Other than that, the code
will be exactly the same.
Open page.php file and paste the code below.

<div id="blog">
<div class="post">
?></a></h3>
<div class="entry">
''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>

</div>

Step 10 – Category.php
The category.php will serve as the file that, whenever a user looks at a specific
post category, time for posts, or specific author, will be the file that serves up the
information to display posts. As with our page.php, most of the code here is going
to be the exact same as the single.php we created before, except for a chunk
right at the beginning.
Open the category.php file and paste the following code inside it.
<div id="blog">
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2>Archive for the ‘<?php single_cat_title(); ?>’
Category:</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2>Posts Tagged ‘<?php single_tag_title(); ?>’</h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2>Archive for <?php the_time('F, Y'); ?>:</h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2>Archive for <?php the_time('Y'); ?>:</h2>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2>Author Archive</h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged'])
&& !empty($_GET['paged'])) { ?>
<h2>Blog Archives</h2>
<?php } ?>
<div class="post">
?></a></h3>
<div class="entry">
''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>

What this does is use a bunch of if/elseif statements in PHP to show what we are
currently browsing on our blog. So if we're looking at a specific category called
“Test Category 1”, it will show in the h2 heading “Archive for the ‘Test Category 1’
Category:” before all posts, and it will do this for certain dates, authors, and so
on.
Step 11 – Footer.php
To finish off our work here, we are going to create our footer.php file, which too
will use the #footer that we declared in our style.css, and will just contain some
basic copyright information as well as a link to the stories and comments RSS feed
at the bottom.
<div id="footer">
<p>
<strong>Copyright 2011 <?php bloginfo('name'); ?> | All Rights
Reserved.</strong> </a>
Designed by <a href="#">testing</a>
</p>
<p><a href="<?php bloginfo('rss2_url'); ?>">Latest Stories RSS</a> | <a
href="<?php comments_rss_link('comment feed'); ?>">Comments RSS</a></p>
</div>
</div>
</body>
</html>
Add images or files <img src=”<?php bloginfo('template_url'); ?> /images/cat.jpg” >
Get home page url <?php get_home_url(); ?>
Add custom header
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>"

width="<?php echo get_custom_header()->width; ?>" alt="" />
add_theme_support( 'custom-header' ); function.php

$args = array(
'width' => 350,
'height' => 47,
'default-image' => get_template_directory_uri() . '/images/templatemo_logo.png',
'uploads' => true,
);
add_theme_support( 'custom-header', $args );
add default header
Add custom background add_theme_support( 'custom-background' ); function.php
<body <?php body_class(); ?>> header.php
Tag line <?php bloginfo('description'); ?>
Post tags
Title <?php the_title(); ?>
Date <?php the_date(); ?>
Comments <?php comments_popup_link('0', '1', '%'); ?>

Author <?php the_author(); ?>
Category <?php the_category(', ') ?>
Tags <?php the_tags('',', '); ?>
Thumb <?php the_post_thumbnail(); ?>
Content <?php the_content(); ?>
Max post on a pge index.php/blog.php
<?php // max post on a page
$page_num = $paged;
if ($pagenum='') $pagenum =1;
query_posts ('showposts=7&paged=' page_num);
?>
Or we can use this for specific categories
query_posts('cat=1&showposts=5&paged='.$page_num);
// Set post title text limit
function ShortTitle($text)
$chars_limit = 40; // here is the limit text
$chars_text = strlen($text);
$text = $text." ";
$text = substr($text,0,$chars_limit);
$text = substr($text,0,strrpos($text,' '));
if ($chars_text > $chars_limit)
$text = $text."...";
return $text;
}
Post title text limit
Add this to function.php
And here is the index page new title
Instead of <?php the_title(); >?
<?php echo ShortTitle(get_the_title()); ?>
Post content text limit
Enable thumbnail first in function.php
// Enable post thumbnails
add_theme_support('post-thumbnails');
set_post_thumbnail_size(520, 250, true);
use <?php the_excerpt(); ?> instead of <?php the_content(); ?> in index.php
the default limit of the (the_excerpt) is 53 and for customize this use this in function.php
// content Text Post limit
function custom_excerpt_length( $length ) {
return 20; //limit
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
// this function for replace the […]
function new_excerpt_more( $more ) {
return ' [...]'; // show this instead of default [...]
add_filter('excerpt_more', 'new_excerpt_more');
Pervious post and next post link
<ul>
<li><?php previous_post_link(' %link','Pervious Post') ?></li>
<li><?php next_post_link(' %link ','Next Post') ?></li>
</ul>
Register sidebar and footer in function.php
//Some simple code for our widget-enabled sidebar
if ( function_exists('register_sidebar') )
register_sidebar();
or use this way
register_sidebar( array(
'name' => __( 'Right Sidebar' ),
'id' => 'sidebar-1',
'description' => __( 'Widgets in this area will be shown on the right side.' ),
) );
Add new pages without side bar
Create a same copy of page.php (no-sidebar.php) and remove this <?php get_sidebar(); ?>
Add this at the very top of the page
<?php
/*
Template Name: No-Sidebar Page Template
*/
?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/flexslider.css" type="text/css"

media="screen" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.7.2.min.js"></script>

WordPress Theme Development

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

WordPress Theme Development

Transféré par

Droits d'auteur :

Formats disponibles

Pro WordPress Theme Development

Following is a step by step Tutorial for WordPress Theme Development

Setting Up Work Station

Make necessary folders and files

In the folder containing your WordPress installation, go to wp-content/themes/

<link rel="profile" href="http://gmpg.org/xfn/11" />

Allow comment authors to reply to other comments, and display them in a

Step 3 – Adding Custom Navigation

//Add support for WordPress 3.0's custom menus

//Register area for custom menu

Step 4 – Styling the Navigation

.nav li{ .nav ul li:hover > ul{

<?php endif; ?>

<?php endif; ?>

<?php endwhile; ?>

<?php endif; ?>

<?php get_sidebar(); ?>

Open page.php file and paste the code below.

<?php endwhile; ?>

<?php endif; ?>

<?php get_sidebar(); ?>

<?php endwhile; ?>

<?php endif; ?>

<?php get_sidebar(); ?>

Add images or files <img src=”<?php bloginfo('template_url'); ?> /images/cat.jpg” >

Get home page url <?php get_home_url(); ?>

Add custom header

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>"

add_theme_support( 'custom-header' ); function.php

'width' => 350,

'height' => 47,

'default-image' => get_template_directory_uri() . '/images/templatemo_logo.png',

'uploads' => true,

add_theme_support( 'custom-header', $args );

add default header

Add custom background add_theme_support( 'custom-background' ); function.php

<body <?php body_class(); ?>> header.php

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

Date <?php the_date(); ?>

Comments <?php comments_popup_link('0', '1', '%'); ?>

Category <?php the_category(', ') ?>

Tags <?php the_tags('',', '); ?>

Thumb <?php the_post_thumbnail(); ?>

Content <?php the_content(); ?>

Max post on a pge index.php/blog.php

<?php // max post on a page

if ($pagenum='') $pagenum =1;

query_posts ('showposts=7&paged=' page_num);

Or we can use this for specific categories

// Set post title text limit

$chars_limit = 40; // here is the limit text

$text = $text." ";

$text = substr($text,0,strrpos($text,' '));

if ($chars_text > $chars_limit)

Add this to function.php

And here is the index page new title

Instead of <?php the_title(); >?

<?php echo ShortTitle(get_the_title()); ?>

Post content text limit

Enable thumbnail first in function.php

// Enable post thumbnails

set_post_thumbnail_size(520, 250, true);

use <?php the_excerpt(); ?> instead of <?php the_content(); ?> in index.php

// content Text Post limit