How to Create WordPress Theme

Posted at July 21, 2016 at 10:58 am by Jithin

WordPress is an online website creation tool utilizing PHP. Otherwise it is known as a content management system (CMS) started in 2003. A content management system (CMS) is a computer application. It is used to create and modify digital content using a common user interface. CMSes have been available since the late 1990s. A web content management system is a type of CMS, used to manage the content of the webpages and thereby manage content of the website. As we know, there are a variety of data types involved in web content. These can include: text, audio, graphics, photo, and video just to mention a few.

 

A CMS Will Contain the Following Parts:

CMA: CMA stands for Content Management Application. It is the front-end user interface. It allows the user to manage the web content with ease.

CDA: CDA stands for Content Delivery Application. It compiles the information from  CMA and updates the web page.

WordPress is a popular CMS. According to the survey done by w3techs web technology surveys, WordPress is the most widely used by 26.5% of all the websites (https://w3techs.com/technologies/overview/content_management/all).

 

WordPress Theme

The theme creates the appearance of the web page. WordPress themes are files that work together to create the design and functionality of a web site. There is a default theme for WordPress. This theme is used to expose the features of WordPress, so it is usually suitable for the creation a basic website because it is filled with many features. Of course, this theme is adaptable to changes, so that it does not look like the default theme. Let us further take a look on how to create a WordPress website.

 

Why a custom WordPress theme?

1) To create a unique look for your WordPress site.

2) To take advantage of templates and template tags to generate different website results and looks.

3) It is an opportunity to put your expertise with CSS, HTML, and PHP to use.

4) It is creative and fun experience (most of the time).

 

Theme Development Standards

There are standards which you need to follow while developing a WordPress theme. The guidelines are listed down below.

1) Use well-structured, error-free PHP, and valid HTML (See WordPress Coding Standard: (https://make.wordpress.org/core/handbook/best-practices/coding-standards/)

2) Use a clean and valid CSS. See CSS Coding Standard in the following link: (https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/)

3) Follow design guidelines in Site Design and Layout.

(See it here: https://codex.wordpress.org/Site_Design_and_Layout).

 

Build your own WordPress theme

The first step in building your own WordPress theme is creating a sub-directory in the wp-content/themes directory. Each theme lives in the sub-directories of the themes directory. You can create the sub-directory with the help of a FTP client or the “file manager” in the cPanel. Now is the time to decide how your theme should look like. To create the theme at ease, you should know about the theme files recognized by the WordPress. Those files are listed below.

style.css

This is the main style-sheet. This must be included with your theme, and it must contain the information header for your theme.

rtl.css

The rtl style-sheet. This will be included automatically if the website’s text direction is right-to-left. This can be generated using the RTLer plugin.

index.php

This is the main template. If your theme provides its own templates, then index.php must be present.

comments.php

This is the comments template.

front-page.php

The front page template.

home.php

The home page template, which is the front page by default. If you use a static front page this is the template for the page with the latest posts.

single.php

The single post template. This is used when a single post is queried. If this is not present, then index.php is used as the query template.

single-{post-type}. php

The single post template is used when a single post from a custom post type is queried. For example, single-book.php would be used for displaying single posts from the custom post type named “book”. Index.php is used if the query template for the custom post type is not present.

page.php

The page template. This is used when an individual page is queried.

category.php

The category template. This is used when a category is queried.

tag.php

The tag template. This is used when a tag is queried.

taxonomy.php

The term template. This is used when a term in a custom taxonomy is queried.

author.php

The author template. This is used when an author is queried.

date.php

The date/time template. This is used when a date or time is queried. (Year, month, day, hour, minute, and second).

archive.php

The archive template. This is used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.

search.php

The search results template. This is used when a search is performed.

attachment.php

Attachment template. This is used when viewing a single attachment.

image.php

Image attachment template. This is used when viewing a single image attachment. If not present, attachment.php will be used.

404.php

The 404 Not Found template. This is used when WordPress cannot find a post or page that matches the query. However, a theme can include any other style sheets, images or files.

At the very minimum, a WordPress Theme consists of two files:

1) style.css

2) index.php

We will see the files needed to create a normal, good webpage.

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.

 

A child theme

The simplest theme possible is a child theme which includes only a style.css file, plus any images. This is possible because it is a child of another theme which acts as it’s parent. You can create these files with a simple text editor like notepad. Let us see each file in detail.

 

The header.php 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>

This is a simple HTML code contains a PHP code in it. The next line which is,

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”> will tell the WordPress to load the style.css file.

<?php bloginfo(‘stylesheet_url’); ?> is the WordPress function which will load the “style.css” file.

 

The 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 first line,

<?php get_header(); ?>

will include the header.php file and the code in it in the main page.

The next line will include the sidebar.php file. It is given below.

<?php get_sidebar(); ?>

 

Finally, we add one last line

<?php get_footer(); ?>

which will include the footer.php file in the webpage.

 

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>

In this file, we use the internal WordPress functions to display the categories and archives of the post.

 

The footer.php file

<div id=”footer”>

<h1>FOOTER</h1>

</div>58

</div>

</body>

</html>

This is used to add simple footer label. You may add links, additional information, copyright information for the theme.

 

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; }

This is a simple css file and it will set the look of your theme.

The above files are some examples of the WordPress theme files. This is a basic theme and it will give you a web page containing a header, a main area, a side bar and a footer.

 

If you need any further assistance please reach our support department.

 

 

0.00 avg. rating (0% score) - 0 votes

You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply