Tag Archives: wp theme

The Pre-Coding Homework You Ought to do

WordPress Theme Development: The Pre-Coding Homework You Ought to do

The razmataz of the WordPress realm continues to beam and grow at an unprecedented rate as more and more webmasters lean towards it, choosing to host their blog on a CMS platform that gives them the maximum room to innovate and ideate. WordPress fits the fill, ever so obligingly.

The Pre-Coding Homework You Ought to do

Now, there are folks who would rather develop their own WordPress theme rather than going in with the deluge of free and paid themes that are available on on the web. And they do draw a lot of confidence from their exceptional coding abilities. Besides, they want their own name up there on WordPress.org as a theme contributor. But, is a darn too coding procedure all that there is to developing an impressive WordPress theme? Arguably not.

There are hordes of things for you to consider before you begin writing the codes, and this is what this article aims to introduce you with:

To Begin With

With increasing number of developments making their way into the WordPress ambit, creating your own WordPress theme is becoming easier by the day. The standard way of starting to building a theme is having an index.php and style.css file and you are good to go.

That said, is that all you need when the agenda is to stand out from the herd? Not really. What you need is to branch out to the seemingly uncharted territories and strive to innovate. And this is where you would need a comprehensive knowledge of HTML and CSS so that you can dig in your heels deeper and get down to the fibre of theme development. Having hands-on expertise in HTML5 and CSS3 is what would make difference at the end of the day. Working on WordPress becomes an exercise with much-greater benefits once you know your way around these two tools.

Furthermore, you need to be clear-eyed about the fact that your theme should create no compatibility hassles with the latest versions of WordPress (upgrading to which is critically important at all times). Besides, the plugins you wish to install should work in perfect unison with your theme.

Chart Out Your Tasks Well in Advance

As iterated earlier, theme development goes beyond coding. And there are a bunch of considerations to keep in mind. You should have time as luxury for:

  • Constantly upgrading the theme and applying patches to it
  • Be responsive to the customer issues
  • Ensure theme maintainability at all times

What would rather serve you the best is a detailed study of the WordPress documentation.

Look at Few Themes for the Influence and Know Your Files

There are some exceptionally impressive and inspiration WordPress themes out there to learn from. I won’t mention any specific as it would rather serve you better if you do a fair bit of research and get a diversified idea.

Now, there are files that form the very fibre of any WordPress website. Get to know them:

  • index.php
  • single.php
  • page.php
  • style.css
  • functions.php
  • search.php
  • header.php
  • sidebar.php
  • footer.php
  • archive.php
  • comments.php
  • 404.php

Evidently, any Wordpres theme consists of a diverse range of PHP template files and you have to get them in order for every element of your theme to work appropriately.

Coming back to the documentation and the WordPress submission guidelines, make sure you don’t skimp over the basic ones.

The APIs Will Help You Sail Through

The basic process of writing a WordPress theme has to be accompanied with knowing the APIs inside out. The APIs cover several aspects of theme development and having a clear-eyed idea of how they would assist you in deliverables like theme customization, widgets, shortcodes, among others, will go a long way in streamlining your exercise.


You would need to be sure about elements like licensing and the architecure. Now you can use any of the several services that provide you with necessary tools to create themes without worrying about APIs, compatibility, licensing, etc. that is, if you are willing to spend a bomb. Note: avoid using the theme generators, as they are more often than not rejected by WordPress.org

Let your theme development endeavor have a sense of order and half the ground is covered. For the rest of it, your coding talent should suffice.



How to add the custom background functionality support to wordpress theme

In new wordpress version we can add the background image or color to wordpress websites. Many older wp themes has no support for custom background functionality.
You can very easily add the custom background support to your wordpress theme. You just need to copy following code and put in your functions.php file.


add_filter( 'body_class', 'wpapi_body_class' );
function wpapi_body_class( $classes ) {
	$background_color = get_background_color();
	$background_image = get_background_image();

	if ( empty( $background_image ) ) {
		if ( empty( $background_color ) )
			$classes[] = 'custom-background-empty';
		elseif ( in_array( $background_color, array( 'fff', 'ffffff' ) ) )
			$classes[] = 'custom-background-white';

	return $classes;

// Activate custom background and set callback function
if ( function_exists( 'add_theme_support' ) ) {
    $defaults = array(
    'default-color' => '000000',
    'default-image' => get_template_directory_uri() . '/img/background.png',
    'wp-head-callback' => 'my_theme_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
    add_theme_support( 'custom-background', $defaults );
Wordpress Theme demo bar plugins

Best WordPress Theme Demo Bar Plugins

Many wordpress theme developers need to create the WP theme demo on showing there wp theme. Theme demo is more important to show the users how wp theme is looking on live site. WP template designers want to show there all wordpress themes in one wordpress installation. There are many wordpress plugins which gives you facility show wordpress theme demo to users.

I collected the some nice and best wordpress theme demo bar plugins for This is a theme demo bar plugins would be shown on top of page, allow users to preview another theme.

WordPress Theme Demo Bar

WordPress Theme Demo Bar

WordPress Theme Demo Bar is a plugin for wordpress that allows any wordpress theme to be previewed without activating it. A demo bar would be shown on top of page, allow users to preview another theme. The demo bar is customisable at admin panel. More than 1 extra CSS files can be loaded too.

IJM Theme Bar

IJM Theme Bar

This is based on the ‘Easy Theme Switcher’ plugin by sergiovilar. It will add a theme demo bar to the top of your site listing every theme you have installed. When a visitor clicks one of these theme names the EST plugin will start a new session and apply that theme’s style sheet to your site giving the visitor a live theme demo.

Comments: I personally used the theme demo bar for many years.

WPtouch Mobile Plugin

WPtouch Mobile Plugin review by wordpressapi

Now these days wptouch wp plugin is became vintage plugin for wp developers.  Till year of 2012 many of wp developers are using the wptouch plugin for mobile responsiveness. Now these day every wp theme needs to be responsive. There are many Internet users who are using websites on mobile devices. There are too many types of devices like Iphone, Ipad, Android, Windows and tablets. Every tech guy and girls are using the handy devices for net surfing. We do use tech gadgets for many purposes. So it is necessary to  your site need to be Mobile and device friendly.

What is WPTouch Mobile plugin?

WPtouch Mobile Plugin

WPtouch Mobile Plugin

WPtouch is a mobile plugin for WordPress that automatically enables a simple and elegant mobile theme for mobile visitors of your WordPress website. The mobile WordPress theme is complete with AJAX loading articles and smooth effects when viewed from popular touch mobile devices like the iPhone, iPod touch, Android mobile phones, BlackBerry OS6+ mobile devices, and more.

The administration panel allows you to customize many aspects of its appearance, and deliver a fast, user-friendly and stylish version of your site to your mobile visitors, without modifying a single bit of code (or affecting) your regular desktop theme.

The theme also includes the ability for visitors to switch between the theme on your mobile WordPress website and your website’s regular theme.

Now Available: WPtouch Pro 3

With 3 all-new themes, an intuitive admin panel and great one-to-one ticketing support, it’s the best WPtouch yet!

For more information visit the WPtouch Pro 3 Product Page.

Download WPtouch


  • It is very easy to Use and configure in wordpress
  • Easily create any WP theme responsive
  • Clean UI and very neat on any mobile device
  • Minimal Code and not heavy to load
  • Site loading will be faster
  • Nice Font and great for blogger
  • There are many configurations for admin
  • Who have not responsive them they can use this plugin
  • Plugin is cross browser compitiable
  • Image gallery support

Comments: I personally used wptouch plugin for some years. Without doing anything we can reach all mobile viewers. I can suggest all webmasters who have not using the responsive the wp theme they must use the wptouch wp plugin. But still my personal opinion is you should get the responsive wordpress design. There are too many wp themes which 100% free so you must use the mobile friendly wp theme,

How to add second sidebar in twenty thirteen wordpress theme

How to add second sidebar in twenty thirteen wordpress theme

All wp developers and wordpress theme developers know about twenty thirteen wordpress theme. I do not need to talk about this more. Many people discussed about it issues and features. Many people are developed child themes based on twenty thirteen wp theme.

Some people asked me about how to add the second sidebar in this theme. We can very easily add the second sidebar to it’s child theme.

Using following simple code you can add the second sidebar to twenty thirteen wordpress child theme. If you are creating the child theme of twenty thirteen then you just need to add the following code into your functions.php file and that sit.

function second_sidebar() {
register_sidebar( array(
'name'          => __( 'Second Widget Area', 'twentythirteen' ),
'id'            => 'sidebar-3',
'description'   => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
'before_widget' => '<aside id="%1$s">',
'after_widget'  => '</aside>',
'before_title'  => '<h3>',
'after_title'   => '</h3>',
) );
<?php dynamic_sidebar( 'sidebar-3' ); ?>
add_action( 'widgets_init', 'second_sidebar' );

Above code will add the second sidebar to your child theme. using following code you can add the second sidebar to your child theme.

<?php dynamic_sidebar( 'sidebar-3' ); ?>

you just need to place above code into your single.php and index.php file or you can add above code where you need to show the second sidebar in your child theme.

Based on child theme code you need to do some CSS changes so your second sidebar will look perfect. I suggest to use the any grid system wordpress framework or you can use bootstrap CSS grid system for fuild HTML framework.

How to add second sidebar in twenty thirteen wordpress theme

How to add second sidebar in twenty thirteen wordpress theme


Mashable site similar look like free wordpress theme for Download

As we know mashable.com is most powerful blog in IT industry. Some time before they changed there theme or UI and platform. Earlier they are using the wordpress platform for there blogging. Mashable started with wordpress platform. After huge traffic they changed there platform. Many people are searching mashable UI and theme. I found wordpress theme similar to mashable.com. I personally loved this wordpress theme. This theme is released on 30th September 2013. You can download similar to mashable wordpress theme for free for now.





Information about theme

WP MashThirteen is a Mashable (http://mashable.com/) inspired TwentyThirteen child theme powered by TwitterBootstrap 3.0. The theme doesn’t looks exactly as mashable design, some how you will feel like Mashable. The child theme will help any blogger to convert their blogs to a clean and beautiful design like Mashabe. The child theme only works with TwentyThirteen parent theme. Due to bootstrap power, admin can add a lot of creative works to its content. This is fully responsive theme, works perfectly with any mobile devices or tablet.


It is responsive wp theme. Nice look on all mobile devices.

It is magazine type premium wordpress theme which is free for downlod

It is based on twentythireen parent theme so compatible with wordpress latest version which is 3.6

It is fast and SEO friendly.

I tested this theme with theme check and It passed all the points.

Free for download premium wordpress theme

Fluid UI supported theme



Only following point is missing in this theme:
RECOMMENDED: No reference to add_theme_support( ‘custom-background’, $args ) was found in the theme. If the theme uses background images or solid colors for the background, then it is recommended that the theme implement this functionality.

But still above custom background is not required for this theme so this theme totally SEO friendly.


Footer menu settings are missing.

Font color and Font setting are missing.

Should add additional setting like meta tags and meta description.

Extra widget support and management is missing.

Ad insert support is missing as we need to magazine wp theme


Theme Check wordpress plugin reivew by wordpressapi.com

I tested the many wordpress plugins and written review about plugins. Theme check wordpress plugin is most downloaded and useful wordpress plugin for wordpress theme developers.  I am very happy about writing review about this plugin.


The theme check plugin is an easy way to test your theme and make sure it’s up to spec with the latest theme review standards. With it, you can run all the same automated testing tools on your theme that WordPress.org uses for theme submissions.

The tests are run through a simple admin menu and all results are displayed at once. This is very handy for theme developers, or anybody looking to make sure that their theme supports the latest WordPress theme standards and practices.


Theme check is great wordpress plugin. Every wordpress theme developer should use this wordpress plugin while new wordpress theme development. Every wp theme developers are not worried about code and there standards. WP designers only look for design and CSS. But coding standards are also useful for site performance and SEO.

Theme Check wordpress plugin reivew by wordpressapi.com

Theme Check wordpress plugin reivew by wordpressapi.com

Checking coding standards manually is really painful and lengthy process. But using theme check plugin you can automatically check the wp coding standards.

I am using theme check plugin for last one year and this plugin has really great help to me. When ever there is new wordpress version release, you need to run this plugin and check the issues and errors. Because with every new wordpress release there are decrypted methods from wordpress.
There are recommendation and warning will be shown by this plugin which are very helpful for improving the site performance and SEO.

After using this plugin you should deactivate and delete this wordpress plugin, before pushing your site to production.

Theme check plugin is fast.  This plugin is helpful to increase the website SEO.

If you are wordpress theme developer then you should this plugin for developing the wp theme. You can use the following wordpress framework for developing the wordpress theme.

Grid978 – wordpress theme framework

After developing wordpress theme you should theme check plug-in and fix the errors and issues.


How to include the jquery-ui in wordpress

When you enqueue your script, it enqueues for the whole site including admin panel. If you don’t want the script in the admin panel, you can only include them for the site in frontend.

This following code you need to add in functions.php file.

function my_add_frontend_scripts() {
    if( ! is_admin() ) {
add_action('init', 'my_add_frontend_scripts');

Then you are able to see the jquery-ui in your wordpress theme.


Free SEO Friendly Aryaa WordPress Theme

DigCMS is our friend website. They launched the New Free SEO friendly wordpress theme called Aryaa.

Aryaa wordpress theme is nice SEO friendly options. It is very SEO friendly because of powerful HTML Tags and Social Features. Normally Magazine style themes are not free but This theme is free for download.

This wordpress theme is similar to Mashable wordpress theme. One year before Mashable used wordpress theme same like Aryaa. We inspired by mashable site. Many people asked for develop theme like mashable. So you can download this theme and enjoy!

Full screen shot will look as follows:


It has Custom Menu and Widget support and multiple configuration options:



Aryaa has Theme control panel for managing the google Adsense, Facebook connect code, Twitter, facebook, Feedburner options.



High Quality (HQ) Free WordPres Themes collection, Magazine Style, News Paper Style, 1 Columns, 2 Columns, Mixed Colums, Widgets,google adsense ready, Seo Friendly, and minimal, Fast loading and many more.

What’s on Aryaa

  • Widget Support
  • WordPress 2.7 to 3.1 support
  • Fixed Width
  • 2 columns
  • Right Sidebar
  • Google Ads
  • Gravatar Support
  • Custom Image Header
  • XHTML & CSS valid
  • Minimal and Fast Loading
  • WordPress 2.7 to current version
  • Menu Support – Three Menu support – Header, Top, Footer
  • Premium version // Sub Page Menu
  • Premium version // Theme Options
  • Premium version // Banner Management
  • Premium version // Page Comment Templates
  • Premium version // FeedBurner Integration
  • Premium version // 2 Color Schemes ready
  • Premium version // Auto Generated Image (with or without custom fields)
  • Premium version // Beautiful Themes Options
  • Premium version // Features Post
  • Premium version // Social Bookmark integration
  • Premium version // and many more


how to develop wordpress theme with 978 grid system

how to develop wordpress theme with 978 grid system

Earlier 960 grid system was very popular among the wordpress theme developers. But 960 grid system is becoming older. Now days 978 grid system is becoming very popular. So I decided to create wordpress theme with 978 grid system.

In this article I will tell you how to create the wordpress theme with 978 grid system. For this you dont need to the PHP or wordpress API knowledge. If you are having basic HTML and CSS knowledge then also you can easily create the wordpress theme with 978 grid system. Main advantage of creating wordpress theme with grid system is SEO. If you add the grid system in your wordpress theme then that will be helpful for SEO also.

  • Setup the local development environment and wordpress

For local wordpress theme development you need to install PHP, Mysql, apache on your computer or laptop.If you are using the windows then you can install wamp or xxamp server on your machine. If you are using Linux or Max then you need to install the PHP, Mysql, Apache to your PC.

After Server setup first install the wordpress to your local box. Then go to your wordpress installation folder. Go to WordPress root folder and open following folder.


Start developing new wordpress theme with 978 grid system.

  • Create new theme folder in themes folder. (you can keep name as per your choice. I kept grid978 name for my wordpress theme)
  • For creating wordpress theme following files need to be created in theme folder(for me in grid978 folder)

style.css – The main stylesheet. This must be included with your Theme, and it must contain the information header for your Theme.
index.php –  The main template. If your Theme provides its own templates, index.php must be present.
comments.php – The comments template.
single.php –  The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
page.php – the page template. Used when an individual Page is queried.
author.php – The author template. Used when an author is queried.
archive.php –  The archive template. 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. Used when a search is performed.
attachment.php –  Attachment template. Used when viewing a single attachment.
image.php – Image attachment template. Used when viewing a single image attachment. If not present, attachment.php will be used.

Or If you are not having knowlege of creating those files then you can download the empty wordpress theme or you can download wordpress framework. Check following article and download empty framework.

List of free wordpress theme frameworks for wordpress theme developer

I always like the Twenty ten wordpress theme. If you are not having good knowledge of CSS then you need to download this theme form following URL. After downloading copy paste the all the files in to your theme folder.

Twenty Ten

Or If you are having good knowledge of CSS then you can download the complete naked and blank wordpress theme from following URL: (I used the starkers wodpress framework)


  • Download the 978 grid system

Then go to following site and download the 978 grid system.


978 Grid System for Web Design

I downloaded the zip file called brothersroloff-978-Grid-System-9bea20f.zip file. I extracted the folder.The package comes with a lot of files. I just coped the 978 Templates\CS978.css file in my wordpress theme folder. I opened the file and copied css code into my theme style.php file.

  • Change your Theme name

Open your style.css file and put following code in that file.

Theme Name:grid978
Theme URI:http://wordpressapi.com
Description:The completely 978 grid system ready wordpress theme (Based on Twenty Ten)
Author URI:http://wordpressapi.com
Tags:wordpressapi, grid, 978 grid, 3 column, clean, basic

you need to change the theme name and other information as per your choice.

Create Screenshot.png file with size on 400 width and 350 height and put that in your theme folder. Now if you check your theme in wordpress admin section. Your theme will be visible in wordpress admin section.



  • Use Reset CSS in style.css file

You need to use the following style code in your style.css file for applying the reset CSS.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{background:transparent; border:0; margin:0; padding:0; vertical-align:baseline}

h1, h2, h3, h4, h5, h6{clear:both; font-family:Helvetica,Arial,verdana,sans-serif}
ol, ul{list-style:none}
blockquote:before, blockquote:after{content:''; content:none}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse; border-spacing:0}
a img{border:none}

If you taken the twenty ten theme as a base then you dont need to put reset css in that file.

  • Select your grid system and layout for your wordpress theme.

I planned the keep 390px as sidebar area and 558px as content area. For more information you can check following image.

Plan your layout for developing the wordpress theme with grid 978 system. I planned the following layout for creating the wordpress theme.

  • Start using the 978 grid system for building the theme

Note :In this tutorial I am given the whole wordpress theme files for download with all the assets. You can download the our grid978 wordpress theme and check the code.

For setting the main container. I first opened the header.php file and inserted the following code after the body tag.

<div class='layout-978'>

Then I opened the footer.php file and before wp_footer() function put the close div code.

  • Setting header and menu section using 978 grid system.

Open your header.php file and after ‘layout-978′ div put following code in file.

<div class='row header'>

// Here is all header and menu code


  • Setting footer section using 978 grid system.

Open your footer.php file and after ‘layout-978′ div put following code in file.

<div class='row footer'>

// Here is all footer code


  • Setting up the main content area and sidebar area with grid 978 system

Using following code you can set the main content area and sidebar.

<div class='row'>
<div class='col7'>
// Main content Area
// This block code used in loop.php, single.php and page.php file
<div class='col5'>
// Top Side bar Area
// This block code used in sidebar.php file
<div class='col5'>
// Main Side bar Area
// This block code used in sidebar.php file
<div class='col2'>
// Primary Side bar Area
// This block code used in sidebar.php file
<div class='col3'>
// Secondary Side bar Area
// This block code used in sidebar.php file

For this I used the header.php, footer.php, singe.php, page.php and sidebar.php file.

Note : In this tutorial I am given the whole wordpress theme files for download with all the assets. You can download the our grid978 wordpress theme and check the code.

  • Set the content width for your theme

Open your functions.php file and find the following code and replace it to

if ( ! isset( $content_width ) )
 $content_width = 558;

  • Set the menu with CSS style

For multilevel menu support you need to put the following code in to your style.css file.

/* =Menu
-------------------------------------------------------------- */
#access{display:block; float:left; background:#51011f; margin:0 auto; width:978px; border-bottom:1px solid #28000f}
#access .menu-header,
div.menu{font-size:14px; font-weight:bold; margin-left:0px; width:978px; text-shadow:1px 1px 1px #000}
#access .menu-header ul,
div.menu ul{list-style:none; margin:0}
#access .menu-header li,
div.menu li{float:left; position:relative}
#access a{color:#fff; display:block; line-height:34px; /*line-height:38px; */padding:0 10px; text-decoration:none}
#access ul ul{box-shadow:0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow:0px 3px 3px rgba(0,0,0,0.2); display:none; position:absolute; top:34px; left:0; float:left; width:180px; z-index:99999}
#access ul ul li{min-width:180px}
#access ul ul ul{left:100%; top:0}
#access ul ul a{background:#51011f; line-height:1em; padding:10px; width:160px; height:auto; opacity:0.9; color:#fff}
#access li:hover >a,
#access ul ul:hover >a{color:#B8F01C}
#access ul li:hover >ul{display:block}
#access ul li.current_page_item >a,
#access ul li.current-menu-ancestor >a,
#access ul li.current-menu-item >a,
#access ul li.current-menu-parent >a{color:#fff; background:transparent url(images/arrow2.png) top center no-repeat}
#access ul ul li.current_page_item >a,
#access ul ul li.current-menu-ancestor >a,
#access ul ul li.current-menu-item >a,
#access ul ul li.current-menu-parent >a{color:#fff; background:#853E08}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover{color:#fff; background:#853E08}

You can change this code as per your wordpress design and colors.

  • Set the footer widget area

Open your functions.php file and find and replace the following code.

find before_widget section for footer section and add the div with class “col3″. I used the 222px grid size for footer widget section.

You can add this code in sidebar-footer.php file also. you just need to add the div with class “col3″ before all widgets.

Your wordpress theme is completed with 978 grid system. You can change and add more styles to your wordpress theme as per your design and colors.

  • How theme is looking

After creating theme is looking as follows:

  • How to mange the widget section the grid978 wordpress theme.

If you check your wordpress admin area. Go to appearance->Widgets section. This will look as follows:

Apart from this you can mange the Menu, Background and header image from this wordpress theme.

You can download the complete source code here.

Download Source Code

If you want to see the Demo of Grid978 wordpress theme then you need to check following URL:

Grid978 Theme Demo | Download

This 978 gird system based free wordpress theme framework is created by wordpressapi.com. If you are having any doubts about developing wordpress theme with 978 grid system then you can write to me on wordpressapi@gmail.com