A few days ago I have made an offer to give back to community by providing solutions to WordPress problems. Post “Allow Me To Solve Your Biggest WordPress Problem” was well accepted and many people posted their questions. I have done my best to provide “quick hit” solutions where it was appropriate but some problems required more extensive research and longer answer.

This post will address following problems posted by my readers:

  • How to get Javascript based ads and widgets to behave right in sidebars, headers and footers
  • A way to add the logo seamlessly into the header in the most SEO friendly and seamless manner possible

How to get Javascript based ads and widgets to behave right in sidebars, headers and footers

This problem is actually in my personal experience comes from 2 different sources …

Problem One most common to ads and scripts pulled from outside source. What I have personally seen is that source site that gives you javascript to place on your blog sets the dimensions for the ad or widget to be displayed and in most cases there is no way to overwrite it. Couple solutions:

  • Since we really have no control over dimensions on our own site we need to use tools provided by source site to make the widget or ad blog to fit our sidebar and for that you simply need to look at your theme css file and identify what width will work for you best.
  • And if the source site doesn’t provide you with a way to set width, as was the example with BlogRush widget until version 2 was rolled out – the only way to solve it is to place it into location that will allow that widget to fit or discard it all together. I’m aware that some creative people did a solution of their own even with a BlogRusg example but it was against the TOS and in most cases it will be true, so I can’t recommend it.

Problem Two is less common but I have seen it from time to time and comes from an overlapping css styles that are defined in both theme file and plugins. This one is harder to track but generally will be seen after installing new plugin and can be tested by deactivating that plugin and then reactivating to see if problem reoccurs.

  • There is really only one way to solve this one. Look at the source code of your page and see if you can find the class the defines a widget and then see if same class is also defined in theme. Try renaming the class in theme file and track down php file that might be calling it. I highly recommend you do a backup of your theme before doing it. It does require css and php knowledge so perhaps the better option is to find a widget that serves similar function and works properly with your theme.

A way to add the logo seamlessly into the header in the most SEO friendly and seamless manner possible

This question comes from Mark Pilatowski and actually has quite simple solution. He is using a Quadruple Blue theme and I have downloaded and installed it on one of my dev blogs so I could actually show the simple and yet SEO friendly solution. Similar approach will work for most other themes …

In this solution I will assume that Mark will use a logo with dimensions of 148px x 41px he is using right now

Step One: Remove Underline from the Header of the Blog. While this is optional it creates unprofessional look when logo image is underlined …

Go to Admin->Presentation->Theme Editor and open style.css for editing.

Locate “header a” code and add text-decoration: none;

#header a{
color: #b6e1fe;
text-decoration: none;
}

Step Two: Add SEO logo.

I assume that logo with dimensions of 148×41 was uploaded into the root folder of theme for this exercise and named my_blog_main_keywords_logo.jpg, I just copied Mark’s logo so I don’t have to create one and renamed it for this example. Note the use of keywords in logo name, its important as it provides extra relevancy in search results …

Open header.php for editing and locate this code (sorry I had to use images because my blog attempts to execute code when I add it to post by design):

head_1.jpg

And add to it a code for logo …

head_3.jpg

Note above that I have added image for the logo. Couple thing I want to mention related to this:

  • Name of the image file should contain your main keywords
  • Alt description should contain your main keywords

Adding more relevancy to your images will not hurt you for search engine optimization. And here is how final result looks like (note: theme is removed as I have no intention to infringe on copyrights of logo author)

site_look.jpg

That’s All Guys! More of similar solutions coming in the feature and will be answered on First Come, First Served bases so make sure not to miss my news and subscribe to RSS via options provided below.