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 |