{"id":17,"date":"2010-08-27T17:46:53","date_gmt":"2010-08-27T08:46:53","guid":{"rendered":"http:\/\/santoshkori.com\/blog\/?p=17"},"modified":"2012-11-07T15:59:11","modified_gmt":"2012-11-07T06:59:11","slug":"wordpress-theme-hacks","status":"publish","type":"post","link":"https:\/\/www.santoshkori.com\/blog\/wordpress-theme-hacks\/","title":{"rendered":"WordPress Theme Hacks"},"content":{"rendered":"

WordPress<\/a> was originally created as a weblog or blog platform. But now WordPress has grown so powerful that you can use it to create any type of website and use it as a Content Management System (CMS). In this article, I\u2019m going to share some of my WordPress tricks with you on how to make a better WordPress theme. I\u2019m not a programmer nor developer, so I will focus more on the frontend development. Oh yeah, I forgot to mention that WordPress has made it so easy that even a non-programmer (designer like me) can build a wonderful website. My WordPress sites included: N.Design Studio<\/a>, Best Web Gallery<\/a>, Web Designer Wall<\/a>, and some free WordPress Themes<\/a>.<\/p>\n

WordPress Conditional Tags<\/h3>\n

Conditional Tags<\/a> are very useful when creating a dynamic WordPress theme. It allows you to control what content is displayed and how that content is displayed. Here are couple sample uses of Conditional Tags:<\/p>\n

Dynamic Highlight Menu<\/h4>\n

Here is what I used to create a dynamic highlight menu on Best Web Gallery<\/a>. In the first list item, if it is Home or Category or Archive or Search or Single, add to the <li><\/code> tag, which will highlight the “Gallery” button. Second item, if it is page with Page Slug “about”, add.<\/p>\n

<ul id=\"nav\"> <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class=\"current\"'; } ?>><a href=\"#\">Gallery<\/a><\/li> <li<?php if ( is_page('about') ) { echo ' class=\"current\"'; } ?>><a href=\"#\">About<\/a><\/li> <li<?php if ( is_page('submit') ) { echo ' class=\"current\"'; } ?>><a href=\"#\">Submit<\/a><\/li> <\/ul> <\/code><\/pre>\n
Dynamic Title tag<\/h4>\n
Again, I use Conditational Tags to output dynamic <title><\/code> tag in the header.php.<\/p>\n
<title> <?php if (is_home()) { echo bloginfo('name'); } elseif (is_404()) { echo '404 Not Found'; } elseif (is_category()) { echo 'Category:'; wp_title(''); } elseif (is_search()) { echo 'Search Results'; } elseif ( is_day() || is_month() || is_year() ) { echo 'Archives:'; wp_title(''); } else { echo wp_title(''); } ?> <\/title> <\/code><\/pre>\n
Dynamic Content<\/h4>\n
If you want to include a file that will only appear on the frontpage, here is the code:<\/p>\n
<?php if ( is_home() ) { include ('file.php'); } ?> <\/code><\/pre>\n
Feature post highlighting<\/h4>\n
Let\u2019s say categoryID 2 is your Feature category and you want to add a CSS class to highlight all posts that are in Feature, you can use the following snippet in The Loop.<\/p>\n
<?php if ( in_category('2') ) { echo ('class=\"feature\"'); } ?> <\/code><\/pre>\n
Unique Single template<\/h4>\n
Suppose you want to use different Single template to display individual post in certain category. You can use the in_category<\/code> to check what category is the post stored in and then use different Single template. In your default single.php, enter the code below. If the post is in category 1, use single1.php, elseif in category 2, use single2.php, otherwise use single_other.php.<\/p>\n
<?php $post = $wp_query- >post; if ( in_category('1') ) { include(TEMPLATEPATH . '\/single1.php'); } elseif ( in_category('2') ) { include(TEMPLATEPATH . '\/single2.php'); } else { include(TEMPLATEPATH . '\/single_other.php'); } ? > <\/code><\/pre>\n
Unique Category template<\/h3>\n
Suppose you want to use different Category template to display specific category. Simply save your Category template as category-2.php (note: add \u201c-\u201d and the categoryID number to the file name). So, category-2.php will be used to display categoryID 2, category-3.php will be used for categoryID 3, and so on.<\/p>\n
Display Google Ad after the first post<\/h3>\n
A lot of people have asked me for this. How to display a Google ad after the first post? It is very simple. You just need to add a variable ($loopcounter<\/code>) in The Loop. If the $loopcounter<\/code> is less than or equal to 1, then include google-ad.php code.<\/p>\n
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); $loopcounter++; ?> \/\/ the loop stuffs <?php if ($loopcounter <= 1) { include (TEMPLATEPATH . '\/ad.php'); } ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <\/code><\/pre>\n
Query Posts<\/h3>\n
You can use query_posts<\/a> to control which posts to show up in The Loop. It allows you to control what content to display, where to display, and how to display it. You can query or exclude specific categories, so you get full control of it. Here I will show you how to use query_posts<\/code> to display a list of Latest Posts, Feature Posts, and how to exclude specific category.<\/p>\n
Display Latest Posts<\/h4>\n
The following code will output the 5 latest posts in a list:<\/p>\n
<?php query_posts('showposts=5'); ?> <ul> <?php while (have_posts()) : the_post(); ?> <li><a href=\"<?php the_permalink() ?>\"><?php the_title(); ?><\/a><\/li> <?php endwhile;?> <\/ul> <\/code><\/pre>\n
Display Feature Posts<\/h4>\n
Let\u2019s say categoryID 2 is your Feature category and you want to display 5 Feature posts in the sidebar, put this in your sidebar.php:<\/p>\n
<?php query_posts('cat=2&showposts=5'); ?> <ul> <?php while (have_posts()) : the_post(); ?> <li><a href=\"<?php the_permalink() ?>\"><?php the_title(); ?><\/a><\/li> <?php endwhile;?> <\/ul> <\/code><\/pre>\n
Exclude specific category<\/h4>\n
You can also use query_posts<\/code> to exclude specific category being displayed. The following code will exclude all posts in categoryID 2 (note: there is a minus sign before the ID number):<\/p>\n
<?php query_posts('cat=-2'); ?> <?php while (have_posts()) : the_post(); ?> \/\/the loop here <?php endwhile;?> <\/code><\/pre>\n
Tips:<\/em> you can overwrite the posts per page setting by using posts_per_page<\/code> parameter (ie. <?php query_posts('posts_per_page=6'); ?><\/code>)<\/p>\n
Custom Fields<\/h3>\n
Custom field<\/a> is one the most powerful WordPress features. It allows you to attach extra data or text to the post along with the content and excerpt. With Custom Fields, you can literally trun a WordPress into any web portal CMS. On Web Designer Wall, I use Custom Field to display the article image and link it to the post.<\/p>\n
First add the Custom Field in the post.<\/p>\n
\"custom<\/p>\n
To display the article image and attach it with the post link, put the following code in The Loop:<\/p>\n
<?php \/\/get article_image (custom field) ?> <?php $image = get_post_meta($post->ID, 'article_image', true); ?> <a href=\"<?php the_permalink() ?>\"><img src=\"<?php echo $image; ?>\" alt=\"<?php the_title(); ?>\" \/><\/a> <\/code><\/pre>\n
Tips<\/em>: don\u2019t forget WordPress allows you to create\/store multi keys and the keys can be used more than once per post.<\/p>\n
I used the same methodology and created a very dynamic template at Best Web Gallery<\/a>, where I used Custom Fields to display the site thumbnail, tooltip image, and URL.<\/p>\n
WP List Pages<\/h3>\n
Template tag wp_list_pages<\/a> is commonly used to display a list of WP Pages in the header and sidebar for navigation purpose. Here I will show you how to use wp_list_pages<\/code> to display a sitemap and sub-menu.<\/p>\n
Site map<\/h4>\n
To generate a sitemap (sample<\/a>) of all your Pages, put this code in your sitemap Page Template<\/a> (note: I exclude pageID 12 because page12 is my sitemap page and I don\u2019t want to show it):<\/p>\n
<ul> <?php wp_list_pages('exclude=12&title_li=' ); ?> <\/ul> <\/code><\/pre>\n
Dynamic Subpage Menu<\/h4>\n
Put this in your sidebar.php and it will output a subpage menu if there are subpages of the current page:<\/p>\n
<?php $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0'); if ($children) { ?> <ul> <?php echo $children; ?> <\/ul> <?php } ?> <\/code><\/pre>\n
Page Template<\/h3>\n
If you are using WordPress as a basic webpage management, you better don\u2019t miss out the Page Template<\/a> feature. It allows you to customize how the Pages should be displayed. To use Page Template, first you need to create a Page Template, then you can assign the Page to specific template.<\/p>\n
Here is how the Page Template structured (ie. portfolio.php):<\/p>\n
<?php \/* Template Name: Portfolio *\/ ?> <?php get_header(); ?> \/\/the loop here <?php get_footer(); ?> <\/code><\/pre>\n
When you are writing or editing a page, look on the right tab \u201cPage Template\u201d and you should see the available templates.<\/p>\n
\"page<\/p>\n
WordPress Options<\/h3>\n
There are many built-in options in the Admin panels that can make your site much nicer. Here are some of them:<\/p>\n
Custom Frontpage<\/h4>\n
By default, WordPress displays your blog posts on the frontpage. But if you want to have a static page (ie. welcome or splash page) instead, you can set that in Admin > Options > Reading.<\/p>\n
\"frontpage<\/p>\n
Permalinks<\/h4>\n
Default WordPress uses www.yoursite.com\/?p=123<\/code> for your post URLs, which is not<\/em> URL nor search engine friendly. You can change the Permalinks<\/a> setting through Admin > Options > Permalinks. Personally, I like to set the Permalinks to: \/%category%\/%postname%\/<\/code><\/p>\n
\"permalinks\"<\/p>\n
Category prefix<\/h4>\n
Default WordPress category prefix is “category” (ie. yoursite.com\/category\/cat-name\/<\/code>). By entering “article” in the Category base (Options > Permalinks), your category URLs will become: yoursite.com\/article\/cat-name\/<\/code><\/p>\n
\"category<\/p>\n
Want more?<\/h3>\n
WordPress Codex<\/a> is always the best place to learn about WordPress. Thank you WordPress and happy blogging!<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress was originally created as a weblog or blog platform. But now WordPress has grown so powerful that you can use it to create any type of website and use it as a Content Management System (CMS). In this article, I\u2019m going to share some of my WordPress tricks with you on how to make […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[12,6,7,49,373,737,372,374,375,725,10,726,8,9],"class_list":["post-17","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-develop-custom-wordpress-template","tag-tips","tag-tricks","tag-web-designs","tag-web-desinger","tag-web-developer","tag-website-designer","tag-website-developer","tag-website-developer-mumbai","tag-wordpress","tag-wordpress-development","tag-wordpress-freelancer","tag-wordpress-template","tag-wordpress-tricks"],"_links":{"self":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":7,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/17\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}