IDIOT DEVELOPER

Developing a WordPress Theme From Scratch
Developing a WordPress Theme From Scratch

Ever tried to built a WordPress theme? I am not talking about the child theme, or the theme built upon a framework. I am talking about theme built from scratch. If you haven’t built any wordpress theme yet, and wants to built it, them this article is for you.

 

Themes are the top entity of the WordPress that make it the most popular Web CMS and blogging platform. Themes are just some files that define the design or we can say the interface/layout of the website. Each Theme is different, having multiple choices of appearances that can instantly change the complete website presentation.

 

In this tutorial, we are going to go through a series of step in designing a wordpress theme from scratch.

 

Setting Up Development Environment

You need to configure a local server in your PC that supports PHP, MySQL , for example LAMP (Linux Apache MySQL PHP) or WAMP (Windows Apache MySQL PHP) or some other software that is able to provide a development environment to you.

 

One other tool you need is a text editor. You can use a text editor of your choice. Do not ignore the importance of a text editor. A good text speed up your development process. A fully integrated text editor with tools for debugging and testing, may even support for WordPress development. Some popular choices are Atom, Sublime Text, and PhpStorm.

 

Install WordPress

Installing WordPress is really easy, its a simple procedure involving some simple steps:

 

1. Download  WordPress from wordpress.org.

2. Create a new directory in the server’s public or htdocs directory of the server.

3. Unzip WordPress and place its content in a new directory created in the public or htdocs directory of the server.

4. Now, when you check the local server in your browser, you will get this message “Error establishing a database connection”.

5. Create a database for the WordPress.

6. Final Step – Now find wp-config-sample.php from your system directory. Here you need to change the username, database name, password and $table_prefix.

 


/** The name of the database for WordPress */
define( 'DB_NAME', 'database_name_here' );

/** MySQL database username */
define( 'DB_USER', 'username_here' );

/** MySQL database password */
define( 'DB_PASSWORD', 'password_here' );

/** MySQL hostname */
define( 'DB_HOST', 'localhost' );

 

Theme Files

The wordpress theme has the following files:

 

1. header.php – It is used as a header for theme. it define head styles & the main/top navigation of the theme. The only new addition here is, to add this code <?php wp_head(); ?> right before </head> along with adding <div class=”container”>

 

2. footer.php – It is used as a footer for theme. ooter will include all that is visible at present on the index.php. As in header, add this code, <?php wp_footer(); ?> right before </body> along with somewhere in footer section <!– /.container –>.

 

3. sidebar.php – It is used as a sidebar for the blog and contains the sidebar widgets and other stuffs.

 

4. content.php – All the content, “blog posts and main content” of the website would come in this section.

 

5. front-page.php – This page is the one that is shown when the option show Static Page as a hompage is active.

 

6. single.php – This page shows a complete post by default.

 

7. category.php – It is used to show a post listing of a specific category.

 

8. comments.php – We call this template inside single.php to add comments to our posts.

 

9. search.php – This template is shown when a search is carried out.

 

10. 404.php – When links are broken or not found.

 

11. functions.php – This file allows us to create menu and widgets zone and customize some paraeters that wordpress bring by default.

 

12. index.php – it acts as hompage by default.

 

13. style.css – This file contains the code for styling the theme.

 

Creating a Basic Theme

For creating a basic wordpress theme, you need to define the Theme Stylesheet i.e. style.css. The style.css need to have some information called stylesheet header. This stylesheet header contains information that define your theme in the form of comments.

 


/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog.
*/

 

To complete the basic theme we need to create index.php file. This file will be the hompage for your theme.

 

index.php

 


<?php get_header(); ?>

<div class="row">
    <div class="col-sm-8 blog-main">
        if ( have_posts() ) : while ( have_posts() ) : the_post();
            get_template_part( 'content', get_post_format() );
        endwhile; endif; 
    </div> <!-- /.blog-main -->
    <?php get_sidebar(); ?>
</div> <!-- /.row -->

<?php get_footer(); ?>

 

content.php

This is the most important function of creating a blog theme – dynamically inserting content. In WordPress it is done with The Loop.

 


<div class="blog-post">
 
    <h2 class="blog-post-title"><?php the_title(); ?></h2>
    <p class="blog-post-meta"><?php the_date(); ?> by <a href="#"><?php the_author(); ?></a></p>
    <?php the_content(); ?>
 
</div><!-- /.blog-post -->

 

Leave a Reply

Your email address will not be published. Required fields are marked *