Adding a Twitter widget to the WordPress Portfolium theme

I’ve just changed my WP theme to Portfolium. I’m totally loving it, but it doesn’t support widgets.  Here’s how I managed to get display my tweets nonetheless. In a nutshell, I added a new <div> to two files (the main index template, index.php, and the single post template, single.php), positioned it relative to its ancestor element, and inserted a Twitter widget in this new <div>.

Step 1: Creating a twitter widget

  1. Create a Twitter widget for your webpage by clicking here. Set all the preferences that you want. I chose my widget to be 135 pixels wide and 300 pixels high. To mimic the Portfolium theme colors, this is what I did:
    1. shell background: #4d4d4d
    2. tweets background: #424242
    3. links: #fff18f
    4. text color: #cccccc
  2. Click Finish & Grab the Code. You will copy and paste this widget code later.

Step 2: Add a <div> in the main index template

  1. In your WP control panel, click Editor.
  2. Under the list of templates, find and click Main Index Template (index.php)
  3. Find the part of the code that says the following:
    <?php get_header(); ?>
    <div>
     <div >
     <a href="<?php bloginfo('rss2_url'); ?>">Subscribe to RSS feed</a>
     </div>
     <div>
     <h3>Latest from blog</h3>
     </div>
     <?php if(function_exists('catlist')) { catlist(); } ?>
     <?php get_search_form(); ?>
    </div>
  4. Immediately after those lines, paste the following:
    <div id="twitter" style="width:135px; left:1005px; top:80px; position:absolute; border: 1px solid #4D4D4D">
    xxxxxx
    </div>
  5. In the part that you just pasted marked xxxxx, copy and paste the code from the Twitter widget-maker page.

And there you have it. The final output should look something like below. (You can see it live here.)



Leave a Reply