WordPress Hacks and Tweaks to Visually Empower Your Website

One of the best thing about WordPress is that the various type of customization it allows. Some little items on a website can make it look unprofessional, busy and constricted. With custom-fields, plugins and hacks you can truly make your wordpress site function the way you want. In this post, we share some hacks and tweaks, plugins which will make your wordpress theme clutter free, clean and user friendly.

Displaying Feedburner Subscribers Count ( Better Way)

01_build_internet

Displaying your feedburner subscribers feed count is common thing in many web design blogs or any other regular sites. The problem is that the default chicklet customization is limited and you can can’t match it up with your theme. Moreover, if you try to validate your theme with feedburner chicket it won’t validate. So, here are a few solutions that can help you get rid of the ugly chicklet and still get the count:

Solutions#1

If you are not comfortable editing I would suggest you use a plugin to get your subscriber count. You can display  the count in the sidebar and customize it with CSS. There is actually two plugins for this.

Feed Count might not work for some newer themes, In that case you can use FeedBurnerCount which is the improved version of Feed Count. Process is fairly simple install the plugin call it in the sidebar or theme using <?php echo fbc_count() ?> for FeedBurnerCount and or <?php if (function_exists('fc_feedcount')) fc_feedcount(); ?> for Feedcount.

You can insert it this way:

<p><a href=”http://yourfeedlink” class=”feedcount”></a><?php echo fbc_count() ?></p>

Style the feed count text with the following CSS

.feedcount {
your styles here
}

You might run into another problem which is, if you add the code in the wordpress widgets it might not show up because it is in PHP. You can download PHP Code Widget or Samsarin PHP Widgets which allows you to add PHP codes to your widget.

Solution #2

WP Recipes presents this little code snippet, which you can add in your sidebar.php file to show your subscribers number. Again do not forget to change your URL and you might want to wrap it around and link tag and CSS class like above to customize it.

<?php
$fburl=”https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=YourURL“;
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $fburl);
$stored = curl_exec($ch);
curl_close($ch);
$grid = new SimpleXMLElement($stored);
$rsscount = $grid->feed->entry['circulation'];
echo $rsscount;
?>

Solution#3

Hongkiat shows another way of showing your subscribers count by copy pasting a code in your functions.php file. I would advise you to be careful with this method because it might mess up your theme.

Displaying Twitter Followers Count

Twitter Follower Count

The best and easier was to display twitter follower count is by adding twittercounter chicklet, which is again not the best way if you want to truly to have an unique theme and does not validate as well. Here are some different methods:

Solution #1

Again plugin is the smartest to go about this. Twounter is wordpress that displays the count of  followers. Simply install the plugin and call it like this. <?php echo twounter(’username’) ; ?>. You can tweak the look about adding a links and CSS class like above.

Solution#2

Twitter Follower Number in Text

This method requires you to open your function.php file and paste a code. Then just enter your user name and call the function.

Creating Effective Sidebar

Wordpress Sidebar

Your  wordpress sidebar can very helpful to your readers if you arrange it the right way. Also, if you have a long sidebar it might take time to load. So why not make your sidebar user friendly?  You can save more space or offer more content. Here are the some ways to do that:

Solution#1

I suggested plugins throughout the post because I think it is easier for average user. One plugin that I can recommend  that works with the latest version of WordPress is sidebarTabs . It is fairly easy to use. Download and install the plugin. Got to sidbarTabs >> Settings and customize what you want to display in your sidebar is tabs. One advanced tip is if you want to change the look of the tab to match it with your theme go to wordpress plugin directory after you installed it and go to sidebarTabs folder. Find styleSidebar.php and edit the styles.

03_sidebar_tabs

Solution#2

You can build a DOM Tab by yourself. WPPro really explains in detail how to create user accessible and cool looking sidebar tabs.

Wordpress Sidebar Tabs

Solution#3

If you want to kick it up a notch here are some jQuery Sidbar Tabs and sidebar related tutorials:

Improving your Comment Section

First of all, I am assuming you are updated with at least wordpress 2.7. The reason I am saying that because WP 2.7 comes with threaded comments so you do not need downloaded any extra plugin. In fact, for this purpose I have found that plugins are complicated to insert and edit. With threaded comments it is easier for reader to engage and reply to the comments and also for the admin as well. You can highlight admin comment with different color too.

First thing, you must have the threaded comments . You can activate it by going to Setting >> Discussion.

Wordpress Threaded Comment

Here is the CSS styles that follows the threaded comment. I have commented main styles. You can copy it to your CSS file and change however you want. If you want to see more style and how to customize your own look here.

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { } /* Basic Style for all the comments*/
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url {}
ol.commentlist li div.vcard img.avatar {border:5px solid #ccc; float:right; margin:0 0 1em 1em;}
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font-size:9px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:11px; margin:0 0 1em; }
ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li div.reply { font-size:11px; }
ol.commentlist li div.reply a { font-weight:bold; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {} /* Style for the author of the post*/
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

There has been many posts about separating trackbacks  from comments so I won’t go into details. Regardless, it is a must implant wordpress hack.

Something About Footer

Wordpress Footer

Footer is another way to show useful information about the blog or some useful data such as recent posts. Make your footer useful, clean and fun. Unfortunately there is no plugin that actually can customize your footer. However, there are ways. Some useful information you can show on your footer: recent comments, recent posts, popular posts, Flickr Pictures, about the website, back to top links and more.

Most famous wordpress footer layout is in three column.  Here is how it is done:

Basic Markup

<div id="footerbox">

<ul>

<li> Some Content Here</li>
<li> Maybe Some Flickr Images</li>
<li> Most Popular Posts</li>

</ul>
</div>

Now here is the CSS that I use. You can change it however you want to match your theme.

#footerbox ul {
	padding-left: 0;
	margin-left: 0;
	color: #FFF;
	float: left;
	width: 900px;
	font-family: arial, helvetica, sans-serif;
}
#footerbox ul li {
	display: inline;
	color: #000;
	text-decoration: none;
	float: left;
	border-right: 1px inset #ccc;
	padding-right: 5px;
	width: 300px;
}
#footerbox ul li a{
	font-size: 14px;
}
#footerbox ul li a:hover {
	color: #666;
}

Here is another method of creating three column footer . If you are not sure how make your footer unique you can look for well design footer at Footer Fetish for inspiration, where the showcase well designed footer.

Some More…

Some other little thing you might want to consider:

  • Have an easy and clutter way for the readers to share the your post. It can be a bookmarking plugin or you inserting your own icons on the individuals posts.
  • If you are bored with the usual fonts you can use WP sFIR Plugin, which allows you to add customs fonts on wordpress powered sites. It give the site visually a new direction.
  • Allow space between elements in your theme’s CSS such as lists, paragraphs because if they are really squeezed together , it is bad for the viewers eyes.

Some of the tips can be applied to regular websites and wordpress generated sites as well. So, what bugs you when you are looking at a site? Share some suggestions.


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • http://www.lapietradaterra.com.ar Joyeria

    There’s a ton of good stuff here on customizing the WordPress backend..!

  • sdk

    does anyone know how to enter a comma into the fbc_count() displayed number?

  • http://loneplacebo.com Tony

    Thanks! Imma bookmark this for future reference.

  • http://www.friiso.com john

    Interesting! Always looking for useful SEO tips. Check us out for help on creating backlinks.