Anatomy of a wodpress theme

I have briefly explain wordpress components and it’s usage in my previous post . Now Let’s understand the wordpress theme quickly by reading this article.
What is a wordpress theme ?
WordPress theme is a layout design of your website. If you would like to build a 3 different types of design for your website with same content wordpress can solve this problem by theme. WordPress theme is developed with PHP, HTML and CSS technologies. If you would like to add JavaScript you can add it too.

Why we should require one ?
It’s fine with default themes which comes with wordpress installations like twenty thirteen to twenty fifteen. But they provide very basic layout and simple colour schema. May these themes are not feet for your website. Also this themes does not provides different layouts for pages. Most of the website consist of pages.
How to develop and design a wordpress theme ?
Open the wordpress installation directory, you will find following directories.
  • wp-admin
  • wp-content
  • wp-includes
wp-content consist of below subdirectories.
  • plugins
  • themes
  • upgrade
  • uploads
So finally we reached to the directory where we will be create a new theme for wordpress. So inside themes directory you will find some pre-installed themes by wordpress like
  • twenty-thirteen
  • twenty-fourteen
  • twenty-fifteen
NOTE: I am explaining a minimal theme in this tutorial. So i will create only necessary files and directories.
So let’s create a new directory for our theme let’s call it a societynews. Inside societynews directory create necessary files and directories as mentioned below.
  • css [directory]
  • style.css
  • header.php
  • footer.php
  • index.php
Now let’s write some code in each created files and understand it.
  • style.css
/*
Theme Name: My Blog
Author: Ahesanali
Description: My Sample blog theme using twitter bootstrap
Version: 1.0Tags: personal-blog,php
Text Domain: Persoanl blog

*/

Notice Theme Name is important attribute in this file. It will be displayed in wordpress admin panel when you see list of themes. You can easily understand other attributes by it’s name.
  • header.php

This file will be used to load header part of your website. Remember while developing a php web application we are doing this type of work like creating header.php and footer.php for reusing them in web application pages. WordPress is also doing same.

  • footer.php

This is footer for your website. Here i have created simple footer so that it is easy to understand. You can create it as per your requirement.
  • index.php

  • See the line get_header(); This is a wordpress functions. WordPress provides good list of functions which can help developers to build themes or plugins. get_header() function will load header.php
  • have_posts() function will check that wordpress database contains any posts. This is general query which does not have any filter. but we can query with filter criteria like with category_id 3. As of now let just use simple functions as a beginner.
  • while ( have_posts() ) will iterate over each posts entries from the database.
  • the_post() is important it will prepare post object for you so that all the next functions you will execute will have the data related to the_post which are iterating at current time.
  • Now below functions are related to post, which will print post data in your page.

    • the_permalink(): Link of the full post
    • the_author: Will display Author name of the post
    • the_date(): date on which post is posted
    • the_time(); time at which post is posted
    • the_content(): will display post content.
  • get_footer(): will load footer.php
Congrats! we are ready with our first theme. Open your wordpress admin panel and activate your theme from it. If you wordpress database is loaded with some posts you can see post list in your website by navigating it.
Thanks
-Ahesan
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s