WordPress SEO-basics 1.1 theme bugs and fixes

As of Febuary 27, 2009, It seems that the SEO basics theme has come back with a newer version.  Well,  I have switched over to the default theme.  This post will stay here as a reference, and I will add to it when I use that theme again.

I posted the customizations that I have made to the default theme in WordPress 2.9.  WordPress 2.7, 2.8, 2.9 and possibly newer versions have no problems executing the customizations that I have done.  The customizations are generic and can quite possibly be used on all versions of WordPress.

The only problem, found so far, is updating WordPress removes all customizations and the customizations will have to be redone.

My blog currently uses:

  • Animated jpg header
  • Advertising banner
  • Menu bar
  • Custom favicon

These can be seen at http://aprivatebeach.com/blog/2009/12/customize-wordpress-2-9-default-theme/

SEO-basics can be downloaded from http://wordpress.org/extend/themes/seo-basics#post-347

I found a few bugs but also found a solution.  I will list the solutions here.  I run both Windows and Linux.  It seems that Linux makes the middle section wider.  In Windows using both IE and Firefox, the tabs go over two lines, but in Linux the tabs go on one line.  It does not hurt to make the menu bar longer.  It looks funny in Linux, but it is better than not seeing the tabs at all on the second line in Windows.

Screenshot of test page of WordPress 2.6.3 with SEO basic 1.1.1 can be seen at http://aprivatebeach.com/customize.gif.  This page was modified with transparency.

Transparency and fixed background

You can make your blog transparent and have a fixed background.  These are shown at http://aprivatebeach.com/blog/2008/11/seo-additions/

Copy and pasted code that does not work

This is covered under a different post.  http://aprivatebeach.com/blog/2008/11/wordpress-263-bugs/.  In short, do not copy and paste the code.  Write it out by hand.

Prevent text from running off the page

For some odd reason the text may go over the page and become hidden in some browsers.  The only solution is to use newlines or the <br> html symbol.

use <br>
this symbol is a line break
therefore, if i go <br> and try to continue

this will actually look like:
therefore, if i go
and try to continue

Just remember that the text box is not actually a text box.  It is a text/HTML box.  You can type in HTML code and it will execute the HTML.  The text above the search is a text widget.  The text has html code in it.

Error messages on the right side

Add a widget in sidebar 1 and it will disappear.  For some reason the code goes through a loop and expects something there.

Search bar that works in both Firefox and Internet Explorer

1.  The SEO search bar and button works in Firefox but not IE.  The solution is to add a search widget with no title.  This will allow users that use IE and Firefox to do a search on your page. There is a problem.  The original search box and button are still visible.  There are two solutions available

1.1  All the images for the seo-basics 1.1 are under the images directory in the seo-basics directory.  This is quite obvious.  Replace the images there with the images here.  These images are an extra large RSS feed button, a white search box, and white button.  This ensures that the original search box and button are not visible on your page.  You also get a gigantic RSS button like mine.

1.2.  If you want to do it yourself, open search-field.jpg and search-submit.jpg in your favorite picture editor, and just delete them, or cover them in white.  Save your pictures over the original ones.  That was easy.  A better solution is to shrink the image down to one pixel.  Then save the pixel as search-field.jpg and search-submit.jpg.  This will ensure that the surfer will have to try really hard to click on your non-functioning search.

For the rssfeedicon.jpg, enlarge the picture 150%.  Save the picture over the original one.  That’s it.  You can now use this modified theme with WordPress.

Click on the Design tab and add the Search widget.  Make sure it is the first widget in Sidebar 1.  If you must, move it to the top.  Save it and view your site.

Changes in SEO 1.1.1

The original search bar is still visible.  To make it disappear, you have to do is put a bunch of pages on top until it is full.  Furthermore, you will have to do the changes below.  The original search bar will no longer be visible or work.  This is located in the style.css file which is located in Design -> Theme editor.  Click on the last file on the right of the page.

/* changed width to: 0px and height to 0px.  changed font-size from 0.8em to 0.0em */
#header-search input.text {
width: 0px;
height: 0px;

background-image: url(images/search-field.jpg);
background-repeat: no-repeat;
font-size: 0.0em;
padding: 2px;
margin-left: 1em;
}

/* changed font-size from 0.9em to 0.0em */
#header-search label {
color: white;
font-variant: small-caps;
font-size: 0.0em;
}

Make heading longer

2.  The blog description goes over two or three lines, and this can be avoided.

Click on Design -> Theme Editor.  Click on Stylesheet

Look for
#blog-title, #blog-description {
width:270px;
}

Change this to width:700px;

Save it and it should be all on one line.

If you want to use an image instead, use the method below instead.

Image instead of default heading

If you want to use an image as a heading instead, you can do the following.  You will notice that I have a nice heading.  It is one large picture.  The left side is text, and the right side is a picture on one large canvas.  You can create this using your favorite picture editor.  If you right-click on my heading, you can download it to your computer as a picture, and examine it.  Feel free to download and study my heading as an example.  The picture to the right is a 800×600 desktop wallpaper shrunken to fit the canvas.  You can find many free desktop wallpapers to use online.

The canvas should be 800 width by 200 height.  The measurement is in pixels.  If you are using MS Paint, it is just 800 by 200.  You could make it larger, but I find that this is a good size.

To do what I did, you will have to save your picture somewhere on the Internet.  Next, you have to click on Design -> header settings.  From there, enter the header image url.  for example, http://aprivatebeach.com/beachSmaller2.gif is my header.  Visit your page and the image will be the new heading.

Change blog background color

3.  If you want to change the background from that orange to another, change the background-color section as shown below in bold.  This is located in the style.css file which is located in Design -> Theme editor.  Click on the last file on the right of the page.  If you want to use a different color, you can find the codes at http://www.w3schools.com/CSS/css_colornames.asp.

/* changed from #F58E0E.  This is the background */
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 10pt;
background-color: lightskyblue;
}

Repeating background

You can use a small picture, if you want, that repeats.  It may or may not be very pretty though.  If you still want one, you can put a picture called test.jpg in the images directory and replace the code in the body of the style.css with the code below in bold.  The picture will repeat vertically and horizontally.

body{
background-image:
url(‘images/test.jpg’);
background-repeat: repeat

}

Two lines of tabs – Works in both SEO 1.1 and 1.1.1

4.  If you have tabs hidden on the second line, you can make them visible by increasing the size of the menu-bg.jpg image.  What you need to do is increase the vertical height of the menu-bg.jpg to 200%.  This will make the menu bar twice as high.  Do not increase the width.  The menu-bg.jpg image for the seo-basics 1.1 is under the images directory in the seo-basics directory.  Furthermore you will have to make the change below in the style.css file located in Design -> Theme editor.  Click on the last file on the right of the page.

/* changed height to 46 from 23px*/
#access {
background-color: #1D1D1D;
background-image: url(images/menu-bg.jpg);
background-repeat: repeat-x;
height: 46px;
/*margin: 1em 0;*/
border-top: 1px solid #191919;
border-bottom: 1px solid #191919;
}

Removing extra widgets in sidebar

For some odd reason, the sidebar has blogroll and the RSS feed widget automatically there.  If you want to get rid of these, put an empty text widget in sidebar 2.  This will make the widgets that you did not add disappear.

Summary

In short, you can pretty much customize any theme.  It is just the matter of finding out where to modify the code.  I will continue to post stuff that may be useful.

If you have any questions that need answering, you can write me an email at http://aprivatebeach.com/blog/contact-us/.  You do not have to leave a real email if you don’t want a personal response.  If you do not want a reply, you can use blank@blank.com.  I will post answers here if they may help others also.

31 thoughts on “WordPress SEO-basics 1.1 theme bugs and fixes”

  1. Brilliant review, I’ve been doing affiliate marketing for some time now and have also done a couple of good reviews like the CB-Cash System and more recently the Resellers-Heaven Review Feel free to drop me a comment on any of my blogs for quick approval and I will comment on your blog as well. If you have any tips for quick SEO rankings with google please email me. As I said before Great post! I’ll subscribe right now with my feedreader software! Keep the blog updated and keep up the good work. Cheers

  2. You have a lot of good stuff here.This post is superb. You have a very good knowledge about this matter. Thanks for the tips!! It will be very helpful.

  3. That is correct. I made this post to make it easier for others to figure out how to do it.

  4. I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

  5. Yes, this happens. Unfortunately, every browser does not work the same way. I will have to install Opera and see what it looks like. I know that when I used SEO basic with WordPress 2.6.2, the heading was shifted to the right in IE, but looked fine in Firefox. Therefore, one can only try to make it work for most browsers.

  6. You can never have enough articles on html and tips to get your websites looking really good. Thank you for all the info here. If you are not techie at all, like me, it can be a bit intimidating, but following your suggestions makes it easy to do.

  7. I am glad that you are finding this useful. I know there are people who do not know how to do their own editing. Therefore, I provide help in any way I can.

Leave a Reply