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, how to add second sidebar in twenty thirteen wordpress theme. We can very easily add the second sidebar to it’s child theme.
add second sidebar in twenty thirteen wordpress 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.
[viral-lock message=”Solution code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]
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
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.
Theme Check wordpress plugin review
Every wp theme developers are not worried about code and there standards. we written Theme Check wordpress plugin review which will be useful for developers
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.
Review
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 review
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.
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.
how to develop 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.
wp-content->themes
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.
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.
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)
Then go to following site and download the 978 grid system.
http://978.gs/
how to develop wordpress theme with 978 grid system
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.
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.
how to develop wordpress theme with 978 grid system
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}
body{line-height:1}
h1, h2, h3, h4, h5, h6{clear:both; font-family:Helvetica,Arial,verdana,sans-serif}
ol, ul{list-style:none}
blockquote{quotes:none}
blockquote:before, blockquote:after{content:''; content:none}
del{text-decoration:line-through}
/* 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.
how to develop wordpress theme with 978 grid system
Plan your layout for developing the wordpress theme with grid 978 system. I planned the following layout for creating the wordpress theme.
how to develop wordpress theme with 978 grid system
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
</div>
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
</div>
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>
<div class='col5'>
// Top Side bar Area
// This block code used in sidebar.php file
</div>
<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>
<div class='col3'>
// Secondary Side bar Area
// This block code used in sidebar.php file
</div>
</div>
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:
how to develop wordpress theme with 978 grid system
Apart from this you can mange the Menu, Background and header image from this wordpress theme.
You can download the complete source code here.
[viral-lock message=”Download Source Code Link is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]
If you want to see the Demo of Grid978 wordpress theme then you need to check following URL:
[viral-lock message=”Download and Demo Link is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]
This 978 gird system based free wordpress theme framework is created by purabtech.in. If you are having any doubts about developing wordpress theme with 978 grid system then you can write to me on wordpressapi@gmail.com
We collected best of free wordpress theme frameworks. WordPress theme framework are very useful for creating the wordpress themes faster. WordPress framework are readymade wordpress themes with all the pages. Some of them are seo friendly also. So that will save your lot of time while creating the wordpress theme. You can just download wp theme frameworks and build your wp theme on top of it. wp designers will love this list.
List of free wordpress theme frameworks
The best part of wordpress framework is, If you are not having any php programming knowledge then also you can easily develop the wordpress theme fast. You just need some CSS and HTML knowledge.
Here I created I list of free wordpress theme frameworks which are very useful for wordpress theme developers and designers.
Earlier 960 grid system was very popular among the WP theme developers. 978 grid system is becoming very popular. Tutorial for wordpress theme with 978 grid
free wordpress theme Framework which is based on 978 grid system
The Buffet Framework is a theme framework designed not only for the theme developers who will be using the theme actions and filters to create the child themes, but also for the end users who would be able to add and remove what they want.
Like most WordPress theme frameworks, the Buffet Framework utlises WordPress actions and filters to allow theme developers to add additional content without editing the templates files using the child theme concept.
achieve virtually any look and layout from within the one and only X WordPress Theme. Stacks allow you to choose from multiple, completely unique designs with just the click of a mouse, and there are currently four Stacks to choose from (with more in development).
Thematic is a free, open-source, highly extensible, search-engine optimized WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples, styling for popular plugins, and a whole community behind it. It’s perfect for beginner bloggers and WordPress development professionals.
You want a framework that puts you in control of your design, is 100% open source, and is completely $free to download? You’ve come to the right place. Hybrid Core isn’t used by hundreds of thousands of people around the world by mere chance.
WP Framework is a blank WordPress theme framework, which aims to cut down on your theme development time. It gives you a solid theme foundation to build your project on top of so you can focus on project-specific features right from the git-go.
One of the most influential blog themes, the Sandbox is a starting point for designers and developers—the original and best blank slate theme. The Sandbox is rich with semantic classes powered by dynamic functions and Microformats.
Why does your blog theme suck? Is it the garish color scheme? Is it too hard to customize? Is it the clumsy typography and layout? Or is it just the overall lack of attention to the needs of bloggers with something intelligent to say? Lack of attention from a designer that hasn’t given a thought to the nature of blogging? I’ll tell you a secret: it’s all of those things. And here’s another secret: I hate most blog themes—but I love this one.
An elegant, responsive and versatile theme with a power-packed set of options and semantic HTML5-based markup. It supports Mega-Menus, custom layout templates, advanced support for custom post types, customizable drop-down menus, featured sliders, tabbed sidebars, a magazine layout and lots of enhanced widgets for Twitter, Flickr, Google etc. It has 19 widget areas
This list created by purabtech.in. If you are knowing about more free wordpress theme framework then please write to me and put a comment.
