Development of WordPress Theme – Start from Scratch


In this tutorial we will discuss how to develop wordpress theme for the beginners. Our main consideration is that the theme will be very simple, clean, responsive and fast loading. This theme may be used for text based websites. No graphics or javascript is used so that the theme may have a flying speed. Our theme will have the following sections:

screenshot

A full width header, content at the left side, a right sidebar for placing widgets, three footer widget areas and a footer credit section.

Now let’s begin to develop the theme from the very beginning.

Step 1: Create a theme folder (we named it as wbxpress-one) and create following blank files inside that folder.

  1. header.php
  2. index.php
  3. sidebar.php
  4. footer.php
  5. content.php
  6. content-none.php
  7. single.php
  8. comments.php
  9. functions.php
  10. style.css

Step-2: Add the following code inside header.php

Step-3: Add the following code inside index.php

Step-4: Add the following code inside sidebar.php

Step-5: Add the following code inside footer.php

Step-6: Add the following code inside content.php

Step-7: Add the following code inside content-none.php

Step-8: Add the following code inside single.php

Step-9: Add the following code inside comments.php

Step-10: Add the following code inside functions.php

Step-11: Add the following code inside style.css

That’s all. You have a developed a full fledged theme which works great with latest wordpress software. So far we have concentrated only to the functioning of the theme but not to the looks of the theme.

To achieve a great looking theme all we need is to edit style.css only. In next tutorial we will discuss how to change the look and feel of the theme. We will add style of every element of the theme so that it looks great in any browser, any device.

By the way, you may download the above theme from this link.

This theme displays full length post at home page. If you want to display only excerpt at home page you need to change the following code:-

File content.php line no. 25

the_content( __( 'Read more', 'wbxpress-one' ) );

Replace the above code with the following

the_excerpt();

Leave a Reply

Your email address will not be published.