Looking for Something? Search Afriwap now!!!
Add to Flipboard Magazine. | |

How to create a Simple Wordpress Theme

Author Topic: How to create a Simple Wordpress Theme  (Read 1481 times)

0 Members and 1 Guest are viewing this topic.

Offline Timi Dapsin

  • Administrator
  • Hero Member
  • *****
  • Posts: 2,453
  • Today is that tomorrow you worried about yesterday
    • View Profile
How to create a Simple Wordpress Theme
« on: January 04, 2014, 05:22:39 PM »

Difficulty: Moderate
Creating a wordpress theme can be quite Stressful and Difficult but this can be done easily with the below Tutorial
First create a sub-folder in the wp-content/themes directory in your WordPress folder. We are going to call the folder "Test_theme". The name of the folder should correspond to the name of the theme you want to create. To do this you can use either FTP client (Like Filezilla)  or the File Manager tool in your cPanel.
Before you start creating your theme you must decide how you want it to look like on your website.
In this tutorial we will build a WordPress theme that consist of a header, sidebar, content area and a footer ,as shown below:

To do this you have to create the following files into "Test_theme" directory
  • header.php - This is where you input the code for the header section of your Theme;
  • index.php - This is the main file for the theme. It will contain the code for the Main Area and we will specify where the other files will be included;
  • sidebar.php - This file will contain the information about the sidebar;
  • footer.php - This file will contain your footer code;
  • style.css - This is where all styles for the theme will be handled;
You can either create those files locally with a simple text editor(like notepad or notepad++ for example) and upload them via FTP or you can use the File Manager tool in your cPanel to create the files directly on your hosting account.
Now lets start adding the codes into the files we created earlier
For header.php add the below code

Code: [Select]
 <title>Test theme</title>
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<div id="wrapper">
<div id="header">
This is simple HTML code with a line containing a php code and a standard WordPress function.
 In this file you can specify your meta tags such as the title of your website, meta description and the keywords for your page.
Right after the title the line we add
Code: [Select]
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">tells WordPress to load the style.css file. It will handle the styling of your website.
Code: [Select]
<?php bloginfo('stylesheet_url'); ?>part of the line is a WordPress function that actually loads the stylesheet file.
Next, we have added the beginning of a "div" with class wrapper which will be the main container of the website. We have set class for it so we can modify it via the style.css file.
After that we have added a simple label HEADER wrapped in a "div" with class "header" which will be later specified in the stylesheet file.

For The index.php file add the below code
Code: [Select]
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y'?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
<?php get_sidebar(); ?>
<div id="delimiter">
<?php get_footer(); ?>
The code in this file begins with
Code: [Select]
<?php get_header(); ?>which will include the header.php file and the code in it in the main page. It uses an internal WordPress function to do this. We will explain this in details later in this tutorial. Then we have placed a Main Area text to indicate which section of your theme is displayed in this area.
The next few lines consist of a PHP code and standard WordPress functions. This code checks whether you have posts in your blog created through the WordPress administrative area and displays them.
Next, we include the sidebar.php file with this line
Code: [Select]
<?php get_sidebar(); ?>In this file you can display your post categories, archives etc.
After this line, we insert an empty "div" that will separate the Main Area and the Sidebar from the footer.
Finally, we add one last line
Code: [Select]
<?php get_footer(); ?>which will include the footer.php file in your page.Add the below code to sidebar.php fileIn the sidebar.php we will add the following code:
Code: [Select]
<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
 <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
 <?php wp_get_archives('type=monthly'); ?>
In this file we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items, therefore we have wrapped the actual functions in unsorted lists (the <ul> tags).For the footer.php file add the below code
You should add these lines to the footer.php file:
Code: [Select]
<div id="footer">
With this code we add a simple FOOTER lable. Instead of this code you can add links, additional text, the copyright information for your theme and additional objects.For the style.css file add the below code
Add the following lines to the style.css file:
Code: [Select]
body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%;  margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
This simple css file sets the basic looks of your theme. Those lines set the background of your page and surround the main parts of your site with borders for convenience.
After this your website should have a look like this

From now on you can modify the CSS file, add images, animations and other content to your theme in order to achieve the looks you want for your blog! ;)
Dont forget to Like/Tweet below

« Last Edit: January 08, 2014, 05:02:49 PM by Timi Dapsin »


Other Topics To Read

Powered by EzPortal