Skip to main content

Learning Thematic hooks and creating Thematic child theme

Learning Thematic hooks and creating Thematic child theme  阅读原文»

WordPress helps you build professional sites with minimum efforts required. To give your WordPress site a unique look one needs to create a custom theme to give your site the unique identity. But creating a WordPress theme from scratch could be a tedious process . So in the article I am going to explain how you can use the Thematic Theme framework and create child theme using the Thematic hooks.

Thematic Theme Framework

Step 1: Getting Thematic framework.


The thematic framework is licensed under GPL like WordPress and can be downloaded from the WordPress site itself .In fact it is one of the top downloaded themes from the WordPress site. You can grab your copy from http://wordpress.org/extend/themes/thematic and upload to the wp-content\themes folder of your WordPress installation.

Step 2: Creating your Thematic child theme


To create a child theme first create a folder 'thematic child' in your wp-content\themes and create a file called style.css with the following lines . .

/* Theme Name:     Thematic Chld Theme URI:      http: //example.com/ Description:    Child theme for the Thematic Author:         Your name here Author URI:     http: //example.com/about/ Template:       Thematic Version:        0.1.0 */

If everything has gone correct in the themes section of your admin you will see your child theme now . Activate the child theme from the admin.

Note :- you can read more in detail about WordPress child themes at http://codex.wordpress.org/Child_Themes

 

Step 3: Getting the lay out correct


After activating the child theme now if you see your blog you will see the lay out is not proper. This happens because now your style.css has overridden the parent thematic theme style.css and you have provided no layout in your style.css . You can provide your own style in the style.css , but again we will use the power the thematic framework and import the css provided by the thematic framework . The parent thematic contains a number of layouts which we can use from

  1. 2 columns layout with sidebar on right
  2. 2 columns layout with sidebar on left
  3. 3 columns with one sidebar on right and one on left
  4. 3 columns with two sidebars on right.

Let us use 3 columns layout with one sidebar on right and one on left for our child theme . Add the following lines y\to the style.css in your child theme .

/* Reset browser defaults */ @import url('../thematic/library/styles/reset.css');  /* Apply basic typography styles */ @import url('../thematic/styles/typography.css');  /* Apply a basic layout */ @import url('../thematic/library/layouts/3c-fixed.css');  /* Apply basic image styles */ @import url('../thematic/styles/images.css');  /* Apply default theme styles and colors */ @import url('../thematic/library/styles/default.css');  /* Prepare theme for plugins */ @import url('../thematic/library/styles/plugins.css');

If all has gone good you will have a nice 3 columns layout child theme ready.

3 Columns Layout Child Themes

 

Step 4: Styling in your child theme


Now once the lay out is done you an style your theme by changing its colors by adding them to the style.css of your child theme . You can either use some tool like firebug etc to figure out the element tag name of the element or check the default.css in the parent thematic folder. We will change the body background color , the header color and the links and heading of the sidebars. Please add the following ode to the style.css of your child theme.

body {    margin: 0; 	padding: 0; 	background: #FFFFFF ; 	font-family: Arial, Helvetica, sans-serif; 	font-size: 12px; 	color: #787878;  } #header {  background: #2871FB; } #footer { background: #2871FB; } #siteinfo a:active, #siteinfo a:hover {     color: #FFFFFF; }  #siteinfo a {     color: #FFFFFF; } #siteinfo { color: #FFFFFF; }  #blog-title a {     color: #FFFFFF; } #blog-description {     color: #FFFFFF;  } .aside a {     color: #4486C7; } a:active, a:hover {     color: #FF4B33; }  .aside h3 {    color: #32639A; } .entry-title {  color: #32639A; }  .entry-title a{  color: #32639A; } .entry-title a:active, .entry-title a:hover {     color: #32639A; }

Your site should look as below

 

Step 5: Creating a featured post section on the home page


Now lets create a section below the header on the home page to display the post of category named � featured . First create a category named featured and assign 3 post to that category. We want to display the featured post on the home just below the header and above the main section . To do this thematic provides an action hook called thematic_belowheader on which we will hook our function to display the posts in the featured category for home page. Create a new file functions.php in your child theme folder and add the following code to it

<?php function child_list_category($categoryname) { ?> <div id="featureposts"> <?php  $catOfFeatured = get_cat_ID($categoryname);  query_posts('cat='.$catOfFeatured.'&showposts=3');  while (have_posts()) : the_post(); ?>   <div>    <div>     <h3><?php the_title(); ?></h3>     <?php the_content(); ?>     </div> <!-- end featurepostcontent -->   </div><!-- end featurepostbox -->  <?php endwhile; ?>  </div><!-- end featurepostbox --> <?php }  function child_list_featured_category() {  	if( is_home() ) child_list_category('featured'); }  add_action('thematic_belowheader', 'child_list_featured_category', 10);

The function child_list_category just displays the post from a particular category . Then we hook our function child_list_featured_category to the thematic action hook using add_action(‘thematic_belowheader’, ‘child_list_featured_category’, 10); to display the featured post on the home page. To get the styling correct we have to add the following style to style.css of child theme.

#featureposts { 	padding:10px 0 0 0;     margin: 0 auto;     overflow: hidden;     position: relative;     width: 960px; 	height:70px; } .featurepostbox { 	width: 310px; 	float:left; } .featurepostcontent {  background: none repeat scroll 0 0 #567EDC;     color: #FFFFFF; }  

Step 6: Display Related post below every post.


To display related post after every post first download the plugin http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/installation/ and activate it . Now we are going to use one more action hook provided by thematic called thematic_postfooter to which you can hook and display content after each post. So we use this hook and the above downloaded plugin to display related post below each post. To do this please add the below code to functions.php

function child_belowpost() {  	 if ( function_exists('related_posts') ) related_posts() ; }  add_action('thematic_postfooter', 'child_belowpost', 10);

Here the function child_belowpost is hooked below the post and used the theme function related_posts provided by t
he plugin above which displays the related post to the current post.

So this is how we can added functionalities to our site using the different hooks provided by thematic without changing
any code in the parent thematic theme. You can get a more elaborate list of all the hooks provided by thematic from http://themeshaper.com/thematic/guide/?page_id=10

Step 7: Changing the footer link using Thematic filters


Like hooks thematic also provided quite a few filters which we can use in our child theme. We will use the thematic_theme_link filter

阅读更多内容

该邮件由 QQ邮件列表 推送。
如果您不想继续收到该邮件,可点此 退订

Comments

Popular posts from this blog

Over A Year After Android Launch, ShopSavvy Finally Comes To The iPhone

ShopSavvy was one of the best early Android applications. It launched in October of last year after winning one of the initial Android Developer Challenge top prizes (when it was still known as GoCart). But despite the success it has seen on Android, one question remained: When would it be available for the iPhone. Today, it finally is. Developed by the guys at Big In Japan , ShopSavvy is an app that allows you to use your device as a portable barcode scanner. You point your phone's camera at any barcode and it will read it, do a product look up, and give you information about the product, as well as where you can find it online or at nearby stores and for how much. Obviously, something like this is a window shopper's dream. ShopSavvy was one of the best early Android applications. It launched in October of last year after winning one of the initial Android Developer Challenge top prizes (when it was still known as GoCart). But despite the success it has seen on Android, o

How to find ideas to post new article in your blog

How to find ideas to post new article in your blog    阅读原文»   It is true that sometimes being a blogger may face situations where I would personally like to call it your brain juices got dried up as you have pretty much ran out of topic to blog and you are in crisis as your readers are anxiously waiting for your new posts but you are unable to give in. That’s when you will probably come with excuses like I just posted last week although that post was more directly towards the newbies who stop themselves from making money but it’s still pretty much the same even though you consider yourself not a newbie. The fact is that ideas are everywhere and I mean everywhere if you know where to find it and know how to leverage it. You may be surprised that sometimes these ideas are just right in front of you but you are not observant enough to convert these ideas and turn it into your blog post. Today I will share some tips on where to get these ideas and most of it is part of your dai

Lindsay Lohan Breakup Confirmed by Lohan, Locksmith, Police [Gossip Roundup]

Farewell, last season's Suri Cruise fashions. Goodbye, Amy Winehouse's bathing suit. Adieu, humanoid version of Lauren Conrad. And so long, LiLo and SamRon's fairytale romance. Lindsay Lohan confirmed her split with Samantha Ronson and insisted the decision was part of a very healthy and mature effort to " focus on myself ." Upon hearing this, Ronson changed her locks and discussed a restraining order with police, so confident was she in Lohan's ability to turn productively inward. Lohan promptly had a run-in with the police . Who would have imagined such a messy breakup for this model relationship? Courtney Love's lawyer, on her client's drug-fueled plunge into broke-ness: ""Courtney noticed the money was gone when there wasn't any left." Deadpan gallows humor: the only possible response to having Courtney Love as a client. (Besides asking for a hefty retainer.) [ P6 ] Before Lauren Conrad's contract expired in March, MTV