Entries Tagged 'Wordpress' ↓

How to Add an Image to Your WordPress Sidebar

I’ve been meaning to create video for this blog for years and now I can finally say I achieved that goal!

This is something that I get asked a lot about from my clients so I’ve created a really quick tutorial for anyone who wants to add an image into their WordPress sidebar. This tutorial gits ‘er done without using an FTP program and without having any knowledge of HTML.

The sound quality is fairly poopy but I promise the next video will be better.

Add an Image to Your WordPress Sidebar

Get Adobe Flash player

If you have any questions, please leave a comment!

Adding a Tweet This graphic to WordPress

I’ve been meaning to add a “Tweet This” button to this blog for awhile but I didn’t want the standard look of the WordPress plugins that were available. Instead, I decided to add the code right to my theme so there would be no need for a plugin, plus I could customize the look of the button.

I decided on this graphic and just added “Tweet This” to the sign using Fireworks:

twitter-bird

There are lots of free Twitter graphics kicking around the web or you can create your own. Either way, you’ll need one for this tutorial so I’m assuming you’re going to do that right now or you already have one. :)

This requires you to be registered with bit.ly which is a URL shortening service much like TinyURL. I like bit.ly because of their link tracking features and many people are now switching from TinyURL to bit.ly. If you want to use this code to track your ReTweets, you’ll need to go ahead and register with them.

You’ll need access to your server so an FTP program is recommended. If you don’t have one, you can download one for free. I’ve got a quick post about installing an FTP program here.

Once you have access to your server, you’ll need to edit your header.php file. This is in your themes folder which is located in the wp-content folder.

In your FTP program, right click the header.php file and click “Edit”. Search for the tag </head>.

Copy the code below and paste it right above that </head> tag.

<?php if ( is_single() ) { ?>
<script type="text/javascript" charset="utf-8"
src="http://bit.ly/javascript-api.js?version=latest&login=LOGIN&apiKey=KEY"></script>
<script type="text/javascript" charset="utf-8"
src="http://s.bit.ly/TweetAndTrack.js?v=1.01"></script>
<?php } ?>

Where it says LOGIN and KEY in the code above, you need to enter your own bit.ly login and API key so that you can track your links. This is important, so don’t forget.

Make sure you save your header.php file and close it. Now right click the single.php file and edit that.

Look for the part that says “php the_content”. If you need to, paste the entire file into a text editor and use the Find command to locate it.

Right under that line, paste the following code:

<a href="#" onclick="return TweetAndTrack.open(this, '<?php echo get_permalink();?>');"><span style="display:none;">RT @cassiegermsheid: "<?php the_title();?>"</span><img src="/twitter.png"></a>

Change “@cassiegermsheid” in the code above to your own Twitter name so that any ReTweets will show in your Twitter timeline.

You’ll also need to save the Twitter graphic you want to use to your root folder. You can simply drag it in there using your FTP program. Your root folder is the folder your blog was installed in.

The code above assumes your Twitter graphic will be named “twitter.png”. If it isn’t, be sure to change it in the code to match your graphic name.

Save the single.php file and close it.

Now it’s time to visit your blog and admire your work.

With this code, your Tweet This graphic will show on individual posts. If you want it to show on the main page as well, you’ll need to add this code to the header.php file. Just put it under the last code you entered, right above the </head> tag.

<?php if ( is_home() ) { ?>
<script type="text/javascript" charset="utf-8"
src="http://bit.ly/javascript-api.js?version=latest&login=LOGIN&apiKey=KEY"></script>
<script type="text/javascript" charset="utf-8"
src="http://s.bit.ly/TweetAndTrack.js?v=1.01"></script>
<?php } ?>

You’ll also need to add the same code you pasted in the single.php file to the index.php file. Look for the part that says “php the_content” again and paste it right underneath.

Now your Tweet This graphic will show on individual posts and the main page.

If there are any questions or you need help, please leave a comment.

Thanks to labnol.org for the code.

How to change your RSS icon to a new snazzy one in WordPress

In my post, 5 Ways To Smarten Up A Boring WordPress Theme, I talked about using RSS icons to spiffy up the look of your blog. It just so happens that I stumbled across this post shortly after I wrote that which lists a ton of different resources if you’re looking for something free. There are some extremely cool RSS icons in that list.

When you find something you’d like in your own theme, it’s time to get your hands a tad dirty. Here’s how to replace the existing RSS icon in your theme with a new one:

rss

Download the free RSS icon to your computer and unzip it.

Open your FTP program and navigate to your theme folder which is in the “wp-content” folder. (If you have trouble with this part, let me know in the comments.)

In your stylesheet, locate the bit of CSS for RSS. Each stylesheet is a bit different, but if you use the Find feature (hit Ctrl+F) and search for “rss” you should find it no problem. I’m using the Copyblogger theme by Chris Pearson on this particular blog so I’ll be using that code for my examples.

Here was my original code with the boring orange RSS icon:

#rss { width: 20em; height: 70px; margin: 0 0 1.0em 0; background: url('images/rss.gif') 50% 0 no-repeat; text-align: center; }

#rss a { display: block; width: 48px; height: 48px; margin: 0 auto; }

Here is what I changed it to:

#rss { width: 20em; height: 128px; margin: 0 0 1.0em 0; background: url('custom/rss.gif') 50% 0 no-repeat; text-align: center; }

#rss a { display: block; width: 128px; height: 128px; margin: 0 auto; }

You’ll need to know the width and height of your new RSS icon to put in the new values. My new RSS icon was 128×128 so I changed the height of 70px to 128 to make sure there was enough space.

This pushed down my sidebar a bit so if you’re not willing to have changes like this, choose a new RSS icon that is the same size as the existing one, or resize it in an image editing program.

You’ll also need to rename your new RSS icon and replace the old RSS icon with the new one. I did this by dragging it into my images folder via my FTP program and rewriting over the old one.

My particular theme uses a custom stylesheet and custom images folder (any new images or graphics I put in my theme all go into the custom folder) so I had to rename the ‘images/rss.gif’ part to ‘custom/rss.gift’.

Now my new RSS icon is displaying perfectly, but I want to add a little something extra. In Fireworks (you can use GIMP for a free alternative image editing program) I copied the RSS icon and made the copy a different color. I named it “rss_hover.gif” and dragged it into my custom folder. Then I added this bit of css into my custom stylesheet:

#rss a:hover { background: url('custom/rss_hover.gif'); }

Now when you hover over the RSS icon, it changes color.

And there you have it. A fairly simple change that makes a pretty big difference. If there are any CSS masters out there who have an easier way, I’d love to hear it!

Inspirational Blog Headers

In my last post, I mentioned that creating your own header is one way to make your WordPress blog unique to other themes.

Today I thought I’d take the opportunity to show you a few examples of some blog headers that really caught my eye. Hopefully they’ll provide a bit of inspiration for you.

1. The Mom Crowd
mom-crowd

 

2. Blog Design Blog
blogdesignblog

 

3. Geeks Are Sexy
geeksaresexynet

 

4. Friday Traffic Report
jackhumphreycomfridaytrafficreport

 

5. Karen Cheng’s Snippets of Life
karenchengcomau

 

6. Making It Lovely
makingitlovelycom

 

7. Mark’s Daily Apple
marksdailyapplecom
This is actually the old header. He JUST launched a new design and I’m personally liking the old one better. Anyhoo, next.

 

8. Men With Pens
menwithpensca

 

9. Mighty Girl
mightygirl

 

10. The Adventures of SuperWife
superwife

 

11. Define Me Clothing
definemeclothing

 

They don’t have to be award-winning designs but it should tie in well to the rest of your theme.

More WordPress goodness to come, so stay tuned!

5 Ways to Smarten Up a Boring WordPress Theme

In my last post, Everyone in the whole wide world should have a customized blog, I blabbed about how there’s no reason why everyone shouldn’t have a unique blog theme. Now I have 5 different ways that you can accomplish that.

Create Your Own Header

I use Macromedia Fireworks to create all my graphics, but if you don’t have that or Photoshop, GIMP does the job well enough considering it’s completely free.

A header can consist of a simple word or sentence – the name of your blog and your tagline perhaps – or it can show a beautiful, eye-catching piece of photography.

There are lots of ideas to incorporate a really groovy header into your blog to make it unique. Google “inspirational blog headers” and start brainstorming some ideas.

Add Your Signature To Your Posts – Get Personal

Adding a graphic of your signature (which can be digitally created) is one way to add your own personal touch to your blog. Having a signature at the end of each post is similar to adding your photo in that it lets your visitors get to know you a bit better because you’re not just hiding behind the anonymity the internet can provide.

Showing a bit of your personality helps your visitors connect better with you. Your signature can be part of your brand. You could even add your signature to your blog header.

Change the Font, Background, and Colors

Making a few small changes like the color of your sidebar titles or the type of font you use can make a big difference in the overall look of your blog. These changes are fairly easy to implement as well. I’ll be getting into that a bit more in the coming days and weeks.

You may want to take a plain white background and change it to a vibrant blue. You could also add a photo as your background to really make your blog pop.

When making these changes, it’s important that they don’t take over your blog. Colors that are too bright, too many colors, too many types of font, etc. can distract your visitors and may even hurt their eyes. Reading neon pink text on a black background is not a good time people.

Find or Create a Groovy RSS Icon

There are tons of free RSS icons out there that you can download and add to your blog. I’m not a big fan of those boring orange squares so I usually like to change things up a bit and whip out some kickass RSS logos that really stand out.

If one of your goals with you blog is to increase your RSS subscribers, having an eye-catching RSS icon is one way to do that. You could also create your own RSS icon and make it completely unique.

Change Sidebar Titles to Images or Graphics

If your blog theme is pretty bare of graphics, one way to spruce it up is to replace your sidebar titles with an image. You can create a subtle image that appears under the existing text, or you can create a separate image for each widget. I prefer the first option since it’s mucho easier.

This requires a bit of messing around with CSS but I’m going to go over that in a future post as well. If you’re not good at creating graphics, there are lots of free stock images to choose from.

So there you have it – 5 ways to make your generic blog theme kick ass. If you have no clue how to do any of this stuff, no worries. I’ll be posting about each one in detail so make sure you’re signed up for my RSS feed.