5 Basic Code steps to design WordPress theme

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:

See Also  How To Create a WordPress Site in 2019

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.

<title>Tutorial theme</title>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
<div id=”wrapper”>
<div id=”header”>

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.

See Also  How to Change WordPress Website Domain Name

<?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; ?>
<?php get_sidebar(); ?>
<div id=”delimiter”>
<?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’); ?>
<h2 ><?php _e(‘Archives’); ?></h2>
<ul >
<?php wp_get_archives(‘type=monthly’); ?>

The footer.php file

<div id=”footer”>

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?

0 0 votes
Article Rating

Related articles

Hajj Registration App

The Ministry of Hajj and Umrah announced that booking...

2 ways to reset WordPress password when email access lost

What if, your email associated with your WordPress profile...

How to install WordPress in hosting

How to install WordPress in hosting Installing WordPress can be...

Install WordPress manually in Fast 6 ways

Install WordPress manually WordPress can be installed manually in hosting,...

How to install Plugins in WordPress

How to Install a WordPress Plugin for Beginners In this...

Case Studies

Compass Music Platform

A clothing brand wanted to launch a new e-commerce website that would allow customers to browse and purchase their products online. We developed a...

NewsWeek Magazine

A clothing brand wanted to launch a new e-commerce website that would allow customers to browse and purchase their products online. We developed a...

Beauty & Makeup Shop

A clothing brand wanted to launch a new e-commerce website that would allow customers to browse and purchase their products online. We developed a...
Would love your thoughts, please comment.x