Adding Your Widget Code
To A WordPress Blog...

Even though it's simple to add the widget to your WordPress Blog, it may seem a little scary if you haven't done this before.

Don't worry. It's very simple. You don't have to do any coding, just be able to drop the code in the right spot.

It's much the same as adding the widget code to your website.

There is one caveat though. You must know how to FTP your files to and from your server. If you aren't familiar with FTP or moving your files to your server, then you may need help.

First, realize that you'll be adding just the single line of code that contains the widget information in the the template that you've chosen.

There's two ways edit your blog:

EDIT THE TEMPLATE ON YOUR COMPUTER WITH YOUR FAVORITE HTML EDITOR.

ASSUMPTION: You have loaded your blog template to your hard drive and make the modifications there.

  • Open your html editing software (I use Dreamweaver. You may use Front Page or another. Here's a free 15 day trial to 123Wysiwyg (http://www.the60dayexperiment.com/go/123.htm) an easy to use html editor.
  • Navigate to your folder containing the WordPress blog theme - often, it's in a folder called /wp-content/themes/*themename*/ (*themename* is the name of the theme you've chosen to use)...
  • In that folder, you'll probably find four files:
    • header.php - this is the header of your blog - you can add a horizontal widget there easily
    • footer.php - this is the footer of your blog - you can add a horizontal widget there easily
    • sidebar.php - this is the left sidebar of your blog - you can add a vertical widget there easily
    • sidebar2.php - this is the right sidebar of your blog - you can add a vertical widget there easily
  • - Open the file that fits the location where you want to place the widget.
  • In Code view (not design view), I see several lines that like this:
<li id="categories"><?php _e('<h2>Categories</h2>'); ?>
<ul>
<?php wp_list_cats(''); ?>
</ul>
</li>

< li id="archives"><?php _e('<h2>Archives</h2>'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
  • Each pair of <li> </li> signifies a new bullet in my blog side bar. By reading the description, I determine that I want to place my code between these bullets
  • I open my widget control panel and copy the code from the widget that I want to implement
    • It starts with <object> and ends with </object>. The entire code including those object tags must be copied.
  • Go back to my sidebar.php and I'll drop the widget code between the </li> and the <Li id=... Code.

So my code now looks like this:

<li id="categories"><?php _e('<h2>Categories</h2>'); ?>
< ul>
< ?php wp_list_cats(''); ?>
< /ul>
< /li>

< object type="application/x-shockwave-flash"
data="http://widgets.clearspring.com/o/47a0d1bdd7f75734/-/-/-/widgetURL/http%3A%2F%2Fwww.MyResellRightsGoldmine.com%
2Fnw%2Fwdgt%2Fbc2c100e54111015361e5f1915689719.xml" height="600"
width="160"><param value="http://widgets.clearspring.com/o/47a0d1bdd7f75734/-/-/-/widgetURL/http%3A%2F%2Fwww.MyResellRightsGoldmine.com%2Fnw%2Fwdgt%
2Fbc2c100e54111015361e5f1915689719.xml" name="movie"/><param value="transparent" name="wmode"><param value="all" name="allowNetworking"><param value="always" name="allowScriptAccess"></object>


<li id="archives"><?php _e('<h2>Archives</h2>'); ?>
< ul>
< ?php wp_get_archives('type=monthly'); ?>
< /ul>
< /li>
  • Save the file
  • Upload to your server in the same folder
  • And your widget should be loading.

 

EDITING THE TEMPLATE ON YOUR SERVER IN TEXT PAD

ASSUMPTION: Your blog template is already on your server and you have FTP ability reach it to make the modifications there.

  • Open your FTP software and connect to your blog folder
  • Navigate to your folder containing the WordPress blog theme - often, it's in a folder called /wp-content/themes/*themename*/ (*themename* is the name of the theme you've chosen to use)...
  • In that folder, you'll probably find four files:
    • header.php - this is the header of your blog - you can add a horizontal widget there easily
    • footer.php - this is the footer of your blog - you can add a horizontal widget there easily
    • sidebar.php - this is the left sidebar of your blog - you can add a vertical widget there easily
    • sidebar2.php - this is the right sidebar of your blog - you can add a vertical widget there easily
  • Right click on the file that fits the location where you want to place the widget. In the context menu, choose "View".
  • Look for several lines structured like this - the content will be different:
<li id="categories"><?php _e('<h2>Categories</h2>'); ?>
<ul>
<?php wp_list_cats(''); ?>
</ul>
</li>

< li id="archives"><?php _e('<h2>Archives</h2>'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
  • Each pair of <li> </li> signifies a new bullet in my blog side bar. By reading the description, I determine that I want to place my code between these bullets
  • I open my widget control panel and copy the code from the widget that I want to implement
    • It starts with <object> and ends with </object>. The entire code including those object tags must be copied.
  • Go back to my sidebar.php and I'll drop the widget code between the </li> and the <Li id=... Code.

So my code now looks like this:

<li id="categories"><?php _e('<h2>Categories</h2>'); ?>
< ul>
< ?php wp_list_cats(''); ?>
< /ul>
< /li>

< object type="application/x-shockwave-flash"
data="http://widgets.clearspring.com/o/47a0d1bdd7f75734/-/-/-/widgetURL/http%3A%2F%2Fwww.MyResellRightsGoldmine.com%
2Fnw%2Fwdgt%2Fbc2c100e54111015361e5f1915689719.xml" height="600"
width="160"><param value="http://widgets.clearspring.com/o/47a0d1bdd7f75734/-/-/-/widgetURL/http%3A%2F%2Fwww.MyResellRightsGoldmine.com%2Fnw%2Fwdgt%
2Fbc2c100e54111015361e5f1915689719.xml" name="movie"/><param value="transparent" name="wmode"><param value="all" name="allowNetworking"><param value="always" name="allowScriptAccess"></object>


<li id="archives"><?php _e('<h2>Archives</h2>'); ?>
< ul>
< ?php wp_get_archives('type=monthly'); ?>
< /ul>
< /li>
  • Save the file
  • Upload to your server in the same folder
  • And your widget should be loading

If you have any questions, contact me at my Support HelpDesk