After quite a while coming back with our featured series tutorial on developing a WordPress theme. Let’s take a look on previous part, we’re discussing about fundamentals and basic structure of a WordPress theme. Today we’ll learn an important and very beginning part for WordPress theme development.
Hopefully you’ll build plenty of themes over the coming weeks, months, and years 🙂 . This part is all about that: what to consider before you begin, site goals that can make it easier to plan for the long run, and checklists for stuff you just can’t forget about, such as required template files and basics for good framework design. Whether you’re looking to release your theme for anyone to download, or just want to build a cool site for yourself, your clients, or other projects, these are things to consider.
Plan Before You Build
Before you create a brand new theme, make things as easy as possible for yourself. Establish a plan before you get carried away building your theme files and designing a layout. There are many ways to plan a theme, but I tend to go about it in this way.
At the concept stage, I want to answer the following questions:
- What is the primary goal for this theme?
- Do I need to build it up for later use, or can I just get it out there in the minimum amount of time?
- Do I want to release this theme to the general public at some point?
- Do I need outside help to create this theme?
Next, start thinking about the design, and more specifically the layout of design. How you go about creating a design is unique to each individual. Some people build mockups in Photoshop, while others prefer to draw them on paper. I carry a notebook with me (as you see in figure bellow) to sketch design ideas (and other ideas as well, for that matter).
However you start, you need to figure out how you want your theme to look.
These scribbles can end up as many pretty websites in a browser near you.
Creating Layout
Now time to action and setup your plan to visual layout. In last part we did some CSS coding with theme information. That was something like bellow.
/* Theme Name: W3Programmers Theme URI: https://www.w3programmers.com/ Description: A clean theme completely compatible with WordPress 3.0 Author: m.h.mithu Author URI: http://mithu.info/ Version: 1.0 Tags: 2 column, content, 1 sidebar, widget ready */
We’ll add rest of code after the code block above.
*{ margin:0; padding:0; outline:0; } .clear{clear:both} body{ background:#f0f0f0; } #wrapper{ margin:0 auto; width:960px; height:1000px; border:1px solid #ccc; background:#fff; }
Now open header.php
file and paste the following codes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <!-- BEGIN html head --> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> <?php wp_head(); ?> </head> <!-- END html head --> <!-- Start Body from here --> <body> <div id="wrapper"> <div id="header"></div>
In above code bloginfo()
function displays various information for your blog. It has total 21 parameters. Go for details.
Open footer.php
and paste the codes bellow
<div class="clear"></div> <div id="footer"> </div> </div><!-- End wrapper--> </body><!-- End Body --> </html>
We’ve to create a new file name sidebar.php
Now open index.php
and paste these codes
<?php get_header(); //load header.php ?> <div id="content"> </div> <?php get_sidebar(); //load sidebar.php ?> <?php get_footer(); //load footer.php ?>
So far this is the layout
Creating Header Layout
Now we’re going to create header layout. Add these codes to style.css
file
#header{ background:#FF82AB; height:200px; }
Creating Content Layout
To create content layout add these lines into style.css
#content{ background:#FFD39B; width:660px; height:600px; float:left; }
Creating Sidebar Layout
Add these lines into style.css
#sidebar{ background:#79CDCD; width:300px; height:600px; float:right; }
Now open sidebar.php
and add these line there.
<div id="sidebar"> </div>
Creating Footer Layout
For footer, add these codes into style.css
file
#footer{ background:#A2CD5A; height:200px; float:none; }
Fresh layout
Now we’re going to run a loop inside index.php
file to getting our post title
<div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); the_title(); echo "<br>"; endwhile; endif; ?> </div>
And finally we’re going to get our result 🙂 Click the button bellow to see the action in live 😛
Hi, I’m Mirazul Hossain Mithu. A PHP philanderer by passion along with WordPress. Dreaming to join WordCamp. Loving Open Source and also like to play with Linux Tux. Now living only with PHP to achieve a most desired dream.
great work……its very easy to learn…….Thnx for the post