• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How to create word press theme from scratch
 

How to create word press theme from scratch

on

  • 6,299 views

This tutorial is a step-by-step guide to WordPress theme development. It’s really simple – nothing close to rocket science. You don’t have to be an expert in website design and development to ...

This tutorial is a step-by-step guide to WordPress theme development. It’s really simple – nothing close to rocket science. You don’t have to be an expert in website design and development to create a WordPress theme. You can find more tutorials here at http://blogrevised.com

Statistics

Views

Total Views
6,299
Views on SlideShare
6,298
Embed Views
1

Actions

Likes
3
Downloads
110
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How to create word press theme from scratch How to create word press theme from scratch Document Transcript

    • blogrevised.com Written by Siku Kamaldeen Twitter: http://twitter.com/blogrevised [HOW TO CREATE WORDPRESS THEMES FROM SCRATCH] This tutorial is a step-by-step guide to WordPress theme development published on http://blogrevised.com
    • [HOW TO CREATE WORDPRESS THEMES FROM SCRATCH] http://blogrevised.com How to Create Your Own WordPress Theme from Scratch WordPress is one of the best blogging platforms or let’s just say Content Management System out there. With a huge range of useful free plugins and stunning themes available for download from different sites, WordPress is the most used Open Source CMS available on the internet. But have you ever wondered how WordPress themes are developed? It’s really simple – nothing close to rocket science. You don’t have to be an expert in website design and development to create a WordPress theme. All you have to be acquainted with is HTML, CSS and a basic knowledge of PHP. This tutorial is a step-by-step guide to WordPress theme development. We’ll be creating a WordPress theme from a blank HTML template file. Since this tutorial is based on WordPress theme development, I’m not going to cover how to develop HTML templates and its design. The HTML template I’m going to use for this tutorial consists of the 4 sections:  Header  Content Area  Sidebar  Footer I’ll provide you with the blank HTML template I use for this tutorial. Feel free to download it and make any changes you want. If you want you can use your own HTML template as well. The Basics Structure The CSS file fine points everything about the theme. The basic files used and goes into our theme directory are:  style.css  header.php  index.php  sidebar.php  footer.php  archives.php  functions.php Now let’s get started. Page 2 of 7 http://twitter.com/blogrevised Find Blogrevised on Facebook
    • [HOW TO CREATE WORDPRESS THEMES FROM SCRATCH] http://blogrevised.com Step 1: style.css This style sheet defines the theme for WordPress. /* Theme Name: Blog Revised Tutorial Theme Theme URI: http://www.blogrevised.com/ Description: An image less template used for blogrevised.com tutorial Author: Siku Kamaldeen Author URI: http://twitter.com/sik00 Version: 1.0 . General comments/License Statement if any. */ Add the above code to the top of the style.css file with no white space before it. The code is all contained in a comment, thus it will not affect the style definition. Page 3 of 7 http://twitter.com/blogrevised Find Blogrevised on Facebook
    • [HOW TO CREATE WORDPRESS THEMES FROM SCRATCH] http://blogrevised.com Step 2: The Header & Footer Now let’s create two files in the theme directory: header.php and footer.php header.php After you create the header.php, open the index.html (the HTML template) we’re using and copy-paste the below code to the header.php file. Note that this is going to be the header and will be displayed on every page of the site. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Blog Revised - blogrevised.com</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="wrapper"> <div id="header"> </div> Now we’re going to add the WordPress template tags to header.php file. These tags direct WordPress where to insert the various contents into the theme. It’s very important to remember to change the link to the style sheet. <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>> <head profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> <meta http-equiv="Content- Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" /> <?php wp_head(); ?> </head> <body> <div id="wrapper"> <div id="header"> <p class="description"><?php bloginfo('description'); ?></p> <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> </div> footer.php Now create the footer.php in the theme directory. From the html template copy everything from <div id=”footer”> downwards and paste it in the footer.php file. Note that this is going to be the footer of every page of the site. To add the copyright information and feed link to the footer, add the following code in between the <div id=”footer”> and </div> in the footer.php file. © <?php the_time('Y'); ?> <?php bloginfo('name'); ?><br /> <a href="<?php bloginfo('rss2_url'); ?>">Grab the feed</a></p> Page 4 of 7 http://twitter.com/blogrevised Find Blogrevised on Facebook
    • [HOW TO CREATE WORDPRESS THEMES FROM SCRATCH] http://blogrevised.com Step 3: The Core File - index.php Now let’s create the index.php file and save it in the theme directory. The index.php file is one of the two required files (index.php and style.css) for WordPress theme development. After creating the index.php file, add the following code: <?php get_header(); ?> <?php get_footer(); ?> This directs WordPress to where to include the header.php and footer.php files. Copy the following code in between <?php get_header(); ?> and <?php get_footer(); ?> tags. <div id=”content”> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> <p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | < ?php comments_number('No comment', '1 comment', '% comments'); ?></p> <?php endwhile; else: ?> <h2>Woops...</h2> <p>Sorry, no posts we're found.</p> <?php endif; ?> <p align="center"><?php posts_nav_link(); ?></p> </div> <div id=”sidebar”> </div> Page 5 of 7 http://twitter.com/blogrevised Find Blogrevised on Facebook
    • [HOW TO CREATE WORDPRESS THEMES FROM SCRATCH] http://blogrevised.com Step 4: Sidebar Create a new file in the theme directory called functions.php and paste the following code. <?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h2>', 'after_title' => '</h2>', )); ?> This tells WordPress that our theme’s sidebar is ready for widgets. Now create a new file in the theme directory called sidebar.php and paste the following: <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <h2>Sidebar</h2> <p>This default sidebar goes here.</p> <?php endif; ?> The purpose of this is to direct WordPress where the sidebar is meant to be. Finally we need to include sidebar in the index.php. In the core file (index.php), right in between <div id=”sidebar”> and </div>, insert the following tag: <?php get_sidebar(); ?> Step 5: The Comment System Open the index.php file and insert the following right after post details (i.e. the_time etc.): <?php comments_template(); // Get wp-comments.php template ?> You can style the comment area as you fancy in the style.css file. Page 6 of 7 http://twitter.com/blogrevised Find Blogrevised on Facebook
    • [HOW TO CREATE WORDPRESS THEMES FROM SCRATCH] http://blogrevised.com Step 6: The Archive Archives.php is one of the standard files in WordPress. Here’s how it’s done. Create a new in the theme directory called archives.php and type down the following code: <?php get_header.php(); ?> <div id=”content”> <h2 class="entry-title"><?php the_title() ?></h2> <?php the_content() ?> <ul id="archives-page" class="xoxo"> <li id="category-archives"> <h3>Archives by Category</h3> <ul> <?php wp_list_categories('optioncount=1&title_li=&show_count=1') ?> </ul> </li> <li id="monthly-archives"> <h3>Archives by Month</h3> <ul> <?php wp_get_archives('type=monthly&show_post_count=1') ?> </ul> </li> </ul> </div> <div id=”sidebar”> <?php get_sidebar.php(); ?> </div> <?php get_footer.php(); ?> The archives.php file looks very much like the index.php file. However unlike the core file, there is no loop in it. Conclusion! That’s about it. Now let’s install the WordPress theme we’ve developed and see if it works. I hope this helps you understand and get started with WordPress theme development. For further reference, check out the official WordPress codex. Page 7 of 7 http://twitter.com/blogrevised Find Blogrevised on Facebook