Performancing Metrics

Awesome WordPress Customizations That Don’t Require Plugins

WordPress, being the most popular blogging / content management platform in existence, has a huge community of developers and designers worldwide who are constantly brainstorming new and improved ways of making this legendary system more extensible through the use of plugins. Thanks to these plugins (9,486 Plugins according to WordPress.org), the average user can add style and functionality to their blog or website
as easy as the click of a couple of buttons. No coding required.

However, adding tons of plugins can significantly slow the loading time and overall performance of your blog. Therefore, its really important to use those that are absolutely necessary and delete the ones you’re not using. So, for those of you who may want to go the extra mile to guarantee 100% loading efficiency and dabble in a little code, here are some unique customizations that can replace some plugins that you may have installed.

1. Add Author Bio Box Below Posts

Depending on your style and preference, having an author bio section below your posts can provide useful information about yourself and any other authors who may write for your blog. The code below will show you how to add this box for each of your posts.

Inside your WordPress dashboard, select Appearance, then Editor and select your single.php file to edit. Paste the following code below the_content code section. Ensure that the code is placed after the “?>” php tag.

<div class="postauthor">
		<?php echo get_avatar( get_the_author_id() , 120 ); ?>
		<h4>Article by <a href="<?php the_author_url(); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
  <p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong> awesome articles for us. <br/><br/><?php the_author_description(); ?></p>
</div>

You will then need to edit your style.css file by adding the code below to give your author bio box some style.

/* Author's Bio Box */
.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }

That’s it. There really is no limit to how you can style your bio box. So have some fun.

2. Highlight Author’s Comments

You may want to differentiate your comments from others who comment on your blog. This is especially useful if you maintain a blog where you give advice and follow-up through replying to comments. This way your replys can be easily found. To do this copy the code below to your Style.css file. (Simply change the HEX color code to a color of your choice.)

.bypostauthor {
background-color: #7BB7E4 !important;
}

3. Add Tweet Meme Button Without a Plugin

Within your Single.php file enter the code below to add the twitter retweet button to your posts.

<script type="text/javascript">
tweetmeme_source = 'samudary';
tweetmeme_style = 'compact';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>

4. Use a Custom Page for your Home Page

We may not always want our WordPress sites to be all about blogging so the ability to create custom pages for your blog will give you the flexibility of adding any type of content in whichever format you choose. This is very useful if you would like to create flashy introductory or sales pages before visitors get lost in your blog.

i) First you will need to create a duplicate of your Page.php file within your theme’s directory and give it a name of your choice.

ii) Add the code below to the top of your new page, replacing “New Page Template” with a name of your choice.

<?php /* Template Name: New Page Template */ ?>

iii) Create a new page and select the new page you created in the template selection drop down menu as shown below in figure 1.

iv) Once you have published your new page go to Settings then Reading in your dashboard and select your front page display as your new homepage in the drop down menu as shown in figure 2 above.

There you go! There are many customizations that can be done without the use of additional plugins that require more system resources. It’s really worth it to learn the basics in PHP coding as well as a little CSS which will allow you to have full control over your WordPress theme’s look and functionality

How many plugins are you currently using for your WordPress site? Have any useful tips that you would like to share? Please let us know.

Categories: Blog Design, WordPress Hacks
Tags: , , ,

This post was written by . You can visit the for a short bio, more posts, and other information about the author.

Comment with Your Facebook Account

Comments

  1. Kharim ) says: 5/7/2010

    Nice post and great tutorials. Thanks Robyn

    Reply

  2. Andrew @ Blogging Guide ) says: 5/7/2010

    Personally I don’t change the theme code too much because it can restrict you when you come to updating the theme.

    Andrew

    Reply

    • Robyn from Sam's Web Guide ) says: 5/7/2010

      Thanks for commenting Andrew.

      That is true depending on who develops the theme and the functions it allows. Some modern themes have an added custom.css or custom functions.php file that allows you to override the theme’s basic styles and customization without interfering with the theme’s native files. These files and their settings can be exported and imported to new themes to prevent the theme from breaking when updating.

      It really depends on the theme design.

      Reply

  3. Omer Greenwald ) says: 5/8/2010

    Very useful techniques. It is always better to do manual customization rather than install many plugins. A lot of sidebar widget can be also done manually. Great post.

    Reply

  4. Edwin ) says: 5/8/2010

    I am receiving an error when I paste the code for the author bio box in my theme.

    Parse error: syntax error, unexpected ‘>’ in /home/content/h/o/l/holycrapmyhair/html/wp-content/themes/vigilance/single.php on line 16

    The line in question is <a href="/?author=”>; I use the http://thethemefoundry.com/vigilance/ theme.

    Reply

  5. KM Ram ) says: 5/9/2010

    Hi Robyn / Edwin

    @Robyn : Amazing post, things like these are interesting.

    @Edwin : I had to add some php closing tag changes to the first 2 lines of the code to get it to work.
    Mentioned below is the updated copy :

    <a href="/?author=”>

    Article by <a href="”>
    has written <a href="/?author=”> articles for us.

    Thanks
    KM

    Reply

    • KM Ram ) says: 5/9/2010

      Oops, html missing :

      Updated code here, hope this works :

      <div>
      <a href=”<?php bloginfo(‘url’); ?>/?author=<?php the_author_ID(); ?>”>
      <?php echo get_avatar( get_the_author_id() , 80 ); ?></a>
      Article by <a href=”<?php the_author_url(); ?>”><?php the_author_firstname(); ?> <?php the_author_lastname();?></a><br /><br />
      <?php the_author(); ?> has written <a href=”<?php bloginfo(‘url’); ?>/?author=<?php the_author_ID(); ?>”><?php the_author_posts(); ?> articles</a> for us.</a><br />
      <?php the_author_description(); ?>
      </div>

      Reply

      • Edwin ) says: 5/9/2010

        That got it to work. Now I just have to figure out how to get the CSS portion to work. It looks nothing like the image sample posted in the article.

        Reply

    • Robyn from Sam's Web Guide ) says: 5/10/2010

      Thanks for reading and your assistance KM :)

      I have actually amended the code in my post which offers better compatibility and everything is working better now.

      Reply

  6. Edwin ) says: 5/9/2010

    I also noticed that when clicking on the links for the authors name and the number of articles written, it just adds that profile info to the end of the current URL.

    Reply

    • Robyn from Sam's Web Guide ) says: 5/10/2010

      Hey Edwin,

      Thanks for taking the time to comment and sorry about the late reply.

      I downloaded the vigilance theme and tried the code I provided. I actually had the same difficulties as you with the theme. So I changed the code to something that is a lot more compatible. You will find the corrected code above in the post.

      These should work as I tested the code myself with a copy of the vigilance theme. Please let me know if you have any further difficulties

      Reply

      • Edwin ) says: 5/11/2010

        The style effects as outlined in the CSS are not being applied for whatever reason. Where in the code does it call up the .postauthor class? How is the code that goes into the single.php suppose to know how to style it? I don’t see where the connection is made.

        http://tweetphoto.com/21953058

        Reply

      • Robyn from Sam's Web Guide ) says: 5/11/2010

        Hey Edwin,

        I’ll contact you via e-mail to assist you further.

        Reply