10 ways to make your wordpress theme look like pro.

GoSee-Design › lifestory of a freelance team » Tips » 10 ways to make your wordpress theme look like pro.
wordpress

Wordpress logo

For me, wordpress is the most easily customizable cms I ever see. There’s always something new about it, there’s hidden functionality that we never discovered. What I think, we just used 50% out of wordpress and another 50% we need to figure it out.

Some of you just end up using plugin when you can just put a line of code in your theme and it did the same thing as the plugin. It’s just waste of memory and slowing your website. I’m not a fan of plugin anyway.

Here I list some of the hidden features I discovered that can enhance your theme.

Preview your theme before activate

Some of the themes you installed, you can’t preview it. If you hit the preview link, it just shows a blank page. It’s not mean the theme is broken but it’s just the theme folder name problem. If you can’t preview your theme, just rename the theme folder name, remove all the spaces and dashes or change it into underscore ( _ ). Now you can preview your theme.

SEO friendly wordpress

In functions.php
function csv_tags() {
$posttags = get_the_tags();
foreach((array)$posttags as $tag) {
$csv_tags .= $tag->name . ',';
}
echo '<meta content="'.$csv_tags.'" />';
}

In header.php
for website title
<title><?php if (is_home () ) { bloginfo('description'); echo ' - '; bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); echo " - "; bloginfo('name'); } elseif (is_single() || is_page() ) { single_post_title(); echo ' &raquo; '; bloginfo('name'); } elseif (is_search() ) { bloginfo('name'); echo " search results: "; echo wp_specialchars($s); } else { wp_title('',true); } ?></title>

for website meta description and keywords
<?php if (is_single() || is_page() ) : if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<meta name="description" content="<?php the_excerpt_rss(); ?>" />
<?php csv_tags(); ?>
<?php endwhile; endif; elseif(is_home()) : ?>
<meta name="description" content="Enter your default description here" />
<meta name="keywords" content="Enter your default keywords here" />
<?php endif; ?>

These codes will dynamically change your website’s title, meta description and meta keywords for each page. So that it will be easily index by search engine.

Next, login to your wp-admin. Then go to settings => permalinks

Change your common setting to Custom Structure and put

/%postname%/

In the box.
This is the beauty of wordpress because it will change your url into SEO friendly url.

source: http://www.nathanrice.net/blog/ultimate-guide-to-wordpress-seo-meta-keywords/

Call build in JQuery script

A lot of you didn’t know that wordpress already have build in jquery script. So why don’t we make use of it instead of uploading the same one into the server.
In header.php
<?php wp_enqueue_script('jquery')?>
<?php wp_head(); ?>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
//Enter your custom JQuery Script here.
});
//]]>
</script>

Important: Call the jquery before the wp_head() and put your custom javascript after the wp_head(). Otherwise it won’t work.

source: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Sticky Post

Customize you sticky post so it will look different.

In index.php
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
Your common title and content code goes here.
</div>
<?php endwhile; endif; ?>

In style.css
.sticky  {
background: #FACB25; /* Change the background of the sticky post */
color:#000000; /* Change the font color of the sticky post */
}

source: http://justagirlintheworld.com/take-advantage-of-the-new-sticky-post-feature-in-wordpress-27/

Have a multiple pages post

A lot of you still didn’t know that you can have a multiple pages post. This is helpful when your post is too long.

In single.php
<?php the_content(__('Read more'));?>
<?php wp_link_pages(); ?>

And in your post.
<p> Paragraph 1</p>
<!--nextpage-->
<p> Paragraph 2 </p>

Paragraph 1 will be on page one and Paragraph 2 will be on page 2.

source: http://codex.wordpress.org/Template_Tags/wp_link_pages

Navigation for your wordpress

In index.php after the endwhile.
<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

Now your wordpress will have the navigation links to go to next and previous page.

source: http://codex.wordpress.org/Template_Tags/next_posts_link and http://codex.wordpress.org/Template_Tags/previous_posts_link

Paginate your comments

In comment.php
<?php if ($comments) : ?>
<h3><?php comments_number('No Response', 'One Response', '% Responses' );?></h3>
<ol>
<?php wp_list_comments(); ?>
</ol>
<div class="navigation">
<?php paginate_comments_links(); ?>
</div>
<br/>
<?php endif; ?>

Now your comment will have page navigation like 1, 2, 3 and so on.

source: http://codex.wordpress.org/Template_Tags/wp_list_comments

Register your sidebar for widget

In functions.php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'PutYourSidebarNameHere',
'before_widget' => '<div>',
'after_widget'  => '</div>',
'before_title'  => '<h2>',
'after_title' => '</h2>',
));

In sidebar.php

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('PutYourSidebarNameHere') ) : else : ?>
Put any default content if there is no widget used here.
<?php endif; ?>

source: http://codex.wordpress.org/Function_Reference/register_sidebar

Breadcrumb

In functions.php

//the_breadcrumb function
function the_breadcrumb() {
if (!is_home()) {
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a> &raquo; ";
if (is_category() || is_single()) {
the_category(', ');
if (is_single()) {
echo " &raquo; ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}

In single.php, page.php
<?php the_breadcrumb(); ?>

Put it anywhere, I suggest on top of code after
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

source: http://www.catswhocode.com/blog/how-to-breadcrumb-function-for-wordpress

Differentiate post author’s comments

In style.css
li.comment-author-admin{
background:#222222;  /* change author comment background */
color:#FFF;  /* change author comment font color */
}

source: http://geekpreneur.blogspot.com

That is all for now, there’s more next time so make sure you subscribe to use if you don’t want to miss up the next tips.

Anything you want add, please share it here. :)

Reblog this post [with Zemanta]

Related posts:

  1. Wordpress 2.8 Finally Released
    Wordpress 2.8 finally released, read some cool features I highlight and why I recommend it....
  2. Keep Your Traffic with htaccess
    How to change your filename without losing any traffic? Lets see the solution and discuss it togethe...


Save to delicious Digg this facebook twitter

39 responses so far, want to say something?

  1. [...] original post here: 10 ways to make your wordpress theme looks like pro. » GoSee … Share and [...]

  2. i didnt got the Breadcrumb tweak but other tweaks are really helpful,
    my theme is not that cool but simple so i think it would be good,
    Copywriting Secrets´s last blog ..17 Ways to Ramp Up Profits – Use Advertorial Style My ComLuv Profile

  3. 10 ways to make your wordpress theme look like pro…

    Here I list some of the hidden features I discovered that can enhance your theme….

  4. Napsil says:

    There is really a lot to know about this. I think you made some very good points.

  5. [...] This post was Twitted by steveosullivan [...]

  6. Cam says:

    good stuff, all good a small detailed stuff that end users would greatly appreciate
    Cam´s last blog ..Figure Drawing and Sketching My ComLuv Profile

  7. [...] posted here: 10 ways to make your wordpress theme look like pro. » GoSee-Design … | More Categories: Wordpress News Tags: always-something – and-another – berry – [...]

  8. Tim Roberts says:

    A lot of that stuff is already in a lot of themes. Nice to have a list like that for those themes that don’t incorporate stuff like paginated comments.

    • Muhammad Nur says:

      True but surprisingly in my experienced, there are some well known premium themes didn’t apply the code I listed. They even have extra files in their theme’s folder to call the same functions.

      Some of it just focus on advance functions in their theme but never implement the amazing functions I listed.

  9. Melayu Boleh says:

    wow!this is one great tips.
    Now I got an idea on how to make my blog more pro like .
    thanks.

  10. [...] Shared 10 ways to make your wordpress theme look like pro. » GoSee-Design › lifestory of a freelance tea… [...]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled

Back to top