Are you a Wordpress beginner looking to create your own Wordpress theme?
Building basic Wordpress themes only takes 2 things: CSS knowledge and some Wordpress Code.
If you already know how to put a stylesheet together to give your theme the “looks”, than all that is left is to learn some basic Wordpress tags, conditionals, what if’s and other code to turn your pretty looking CSS into a fully functional Wordpress Theme.
If you search how to make a Wordpress theme you may be bombarded with TOO much code. However, I will only provide you with the basic Wordpress code for theme building.
Wordpress Theme Building Code for Beginners
1. Theme Structure
A basic Wordpress theme is composed of the following php files:
header.php ……………………………………… Header Section
index.php ……………………………………….. Main Section (homepage)
sidebar.php …………………………………….. Sidebar Section
single.php ……………………………………….. Post Template
page.php …………………………………………. Page Template
comments.php …………………………………. Comment Template
search.php ……………………………………….. Search Content
searchform.php …………………………………. Search Form Template
archive.php …………………………………….. Archive Template
functions.php ………………………………….. Special Functions
404.php ………………………………………….. Error Page template
style.css …………………………………………. Style Sheet
2. The Loop
The basic Wordpress loop to call posts/pages is:
<?php if(have_posts());?>
<?php while(have_posts()); the_post();?>
// Put your custom HTML & PHP code here
<?php else;?>
<?php endif;?>
3. Category Based Loop
Basic loop to call your categories:
<?php query_posts(’category_name=
Category&showposts=10′); ?>
<?php while (have_posts()) : the_post(); ?>
// Put your custom HTML & PHP code here
<?php endwhile;?>
4. Defining the Theme
When creating a Wordpress file the main stylesheet must first define the Theme in the following way:
/*
Theme Name: Wordpress
Theme URI:
http://wpexplorer.comDescription: Wordpress Theme Development Cheat Sheet
Version: 1.0
Author: WpExplorer
Author URI:
http://wpexplorer.comTags: worpress, cheat, sheet, theme, development
*/
5. Template Include Tags
You can call one Wordpress file form another using the following template include tags
< ?php get_header(); ?>
< ?php get_sidebar(); ?>
< ?php get_footer(); ?>
< ?php comments_template(); ?>
6. Wordpress Template Tags
Wordpress Template tags have many purposes from display titles, categories…etc
Displays the posts/pages title:
<?php the_title() ?>
Displays the content of the post/page:
<?php the_content() ?>
Displays the excerpt of the current post/page:
<?php the_excerpt() ?>
Displays the time of the current post/page:
<?php the_time() ?>
Displays all the pages:
<?php wp_list_pages(); ?>
Displays a tag cloud:
<?php wp_tag_cloud(); ?>
Displays the categories:
<?php wp_list_cats(); ?>
Displays the calendar:
<?php get_calendar(); ?>
Displays a date-based archives list:
<?php wp_get_archives() ?>
Displays Previous page and Next Page links:
<?php posts_nav_link(); ?>
Displays Newer Posts link:
<?php next_post_link() ?>
Displays previous link:
<?php previous_post_link() ?>
Displays the edit link:
<?php edit_post_link(__(’Edit Post’)); ?>
Value for search form:
<?php the_search_query();?>
Displays the register link:
<?php wp_register();?>
Displays the log in/out link:
<?php wp_loginout();?>
Meta for administrators:
<?php wp_meta();?>
Time to load the page:
<?php timer_stop(1);?>
Displays the custom field1:
<?php echo c2c_custom(’test’);?>
Display links from Blogroll:
<?php get_links_list(); ?>
Displays the built-in calendar:
<?php get_calendar(); ?>
Link of the posts comments:
<?php comments_popup_link(); ?>
Displays the date of a post or set of post/page:
<?php the_date() ?>
Displays the URL for the permalink:
<?php the_permalink() ?>
Displays the category of a post:
<?php the_category() ?>
Displays the author of the post:
<?php the_author(); ?>
Displays the numeric ID of the current post:
<?php the_ID(); ?>
7. Blog info Tags
Like it sounds, the Blog info Tags will allow you to call certain aspects of your blog such as title, description, address, etc.
Title of the blog:
<?php bloginfo(’name’); ?>
The character set:
<?php bloginfo(’charset’); ?>
The description of the blog:
<?php bloginfo(’description’); ?>
The address of the blog:
<?php bloginfo(’url’); ?>
The RSS URL:
<?php bloginfo(’rss2_url’); ?>
The URL of the template:
<?php bloginfo(’template_url’); ?>
The pingback URL:
<?php bloginfo(’pingback_url’); ?>
The URL for the template’s CSS file:
<?php bloginfo(’stylesheet_url’); ?>
URL for WordPress installation:
<?php bloginfo(’wpurl’); ?>
Version of the WordPress installation:
<?php bloginfo(’version’); ?>
HTML version of the site:
<?php bloginfo(’html_type’); ?>
8. Blog Info Tag Conditionals
These Tags will allow you to set conditionals so that you can do certain tasks only on certain pages/posts/templates…
is_home() ……………………………. Do task if the user is on the blog home page
is_front_page() …………………….. Do task when the user is on the home page
is_single() ……………………………. Do task if when the single post displayed
is_sticky() …………………………….Check to see if a post is sticky
is_page() ………………………………Do task as soon as a page is displayed
is_category() ………………………… Do task if when a category is displayed
9. Navigation Menu
You can not have a working blog without a navigation. These tags will allow you to add a basic navigation to your wordpress theme
Category Based Navigation
<ul id=”menu”>
<li <?php if(is_home()) { ?>< ?php } ?>>
<a href=”<?php bloginfo(’home’); ?>”>Home[/url]</li>
< ?php wp_list_categories(’title_li=&orderby=id’); ?>
</ul>
Pages based Navigation
<ul id=”menu”>
<li <?php if(is_home()) { ?>< ?php } ?>>
<a href=”<?php bloginfo(’home’); ?>”>home[/url]</li>
< ?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’); ?>
</ul>
