Design WordPress theme
You may be the user of WordPress, using from years but don’t know how to develop own WordPress theme. This may because you had seen the WordPress theme in an editor, there you find a number of different files in .php, .css, .txt format. All these files create confusion as compared to the HTML5 theme (templates) you have to just create one file with index.html and you have a benefit of using CSS or any other script in HTML file or externally.
But in a case of WordPress theme, you have to be more cautious when developing your own theme developer can use Free WordPress themes for reference.
Design your own WordPress theme
Starting as theme developer for WordPress on the local server, you have to first install server software like XAMPP and use NOTEPAD editor, where you can write different scripts in PHP, designing, CSS, and JavaScript.
Create sub-folder in the wp-content/themes directory in your WordPress folder in simple term first create the folder with name “WordPress” in that folder create the folder with name “wp-content” in that folder again create folder having a name “themes”. You can create the folder with your desired theme name in folder “themes”, for this tutorial we will call the folder “SyncSaS”.
Being good coder is not only material to develop WordPress theme, a developer must have deep knowledge of designing, color combinations and some fragrance of creativity. A mixture of all this will make you the sound WordPress theme developer.
Decide how will be your theme layout should be, always portrait any website in mind while creating WordPress Template. In this tutorial we will build a WordPress theme that consists of a header, sidebar, content area and a footer as shown below:
What Next! Start creating files into the “SYNCSAS” directory, bean about them is discussed below:
Structure of WordPress Theme Folder
- header.php – This file will contain the code for the header section of the theme;
- index.php – This is the main file for the theme. It will contain the code for the Main area and 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 handle your footer;
- style.css – This file will handle the styling of your new theme
As I already told you to use the local server with XAMPP and other tools like Notepad editor, but if you are having the error and can afford online hosting plans. Then buy any one of cheapest hosting from SyncSaS and upload your files via FTP or you can us the File Manager tool in your cPanel to create the files directly on your hosting account.
How to Code WordPress theme?
Starting with header.php file it will look like as below, it is the basic structure for the header file.
<html>
<head>
<title>Tutorial theme</title>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>HEADER</h1>
</div>
In this tutorial, i am using the simple basic theme for WordPress, as in above header.php file code you can see the HTML code and one-line Php script. The header file is used to specify meta tags for your website such as meta description, meta keywords, meta tags. etc.
I used external CSS after the title line
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
Which tells WordPress to load the style.css file function of style file is to handle styling of your WordPress website.
<?php bloginfo(‘stylesheet_url’); ?>
this Php line is actually used to load style sheet file, one of the WordPress functions.
After that, we have added a simple label HEADER wrapped in a “div” with class “header” which will be later specified in the style sheet file.
index.php file
<?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; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id=”delimiter”>
</div>
<?php get_footer(); ?>
The sidebar.php file
<div id=”sidebar”>
<h2 ><?php _e(‘Categories’); ?></h2>
<ul >
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>
</ul>
<h2 ><?php _e(‘Archives’); ?></h2>
<ul >
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</div>
The footer.php file
<div id=”footer”>
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
The style.css file
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; }
At this point your website should look like this:
In this tutorial, you learn how to customize WordPress theme CSS, Php files and much more which are used for web development. While talking about “web development WordPress theme” one of the well know CMS, nearly 30% websites online are using WordPress CMS this shows the importance of WordPress Templates.
WordPress theme for business is the most downloaded theme, if you are loaded with basics of WordPress theme development you should start developing template related with Business website. It may help you to earn some dollars if you get success in developing SEO and User-friendly website and don’t forget to follow google guidelines.
Are you satisfied with WordPress article, please let me know what you think about the article and if you need any help then do comment and do share with the world?
