I wanted to use Google to add a better search box to a website I manage (ProjectsInMetal.com). Not only are the search results from Google more complete (the built-in search box for WordPress 2.7 is pathetic), I can also monetize the search results from Google using Adsense for Search.

Also, I wanted the search results to open within my own site. Unfortunately, to have the search results show up within my website the content area on my page needed to be at least 795 pixels wide. My webpage has 2 sidebars (one on each side of the content) with a  content area that is only 400 pixels wide (which is too small for the search results to display properly).

Here’s the error that I got while trying to set up my Adsense For Search code. Notice I tried to enter 400 pixels in the “Enter Width of Results Area” section, which is what caused the error (click to enlarge).

Since the search resulsts wouldn’t display properly if I used my standard page layout, I needed to make a custom page template for displaying my search results.

The easiest way to make a new template is to copy an existing template from your theme and remove the items you don’t want. In this case I didn’t need my sidebars showing up in my search results. So my plan was to duplicate my page.php template, rename it to searchresults.php, and remove the sidebar code.

To do this I opened the page.php template in a text editor (like notepad) and saved it under a new name. Your page.php file is located within your “themes” folder on the server. I called my new template searchresults.php, but you can name yours anything you want. Next, upload your new template (which is still identical to your page.php template, but with a different name) to your themes folder (for me that’s in my “Metal Law” theme folder). Note, I’m using FireFTP to do this, but you can upload your new template using any FTP client.

Once you’ve uploaded your new PHP Theme page, navigate to it by logging into your Wordpress blog and navigating to the Theme Editor. Click the image below to expand.

Now, to make Wordpress 2.7 recognize that you’ve uploaded a new theme, you need to edit your new PHP file to include the following text at the top:

/*
Template Name: Custom Search Results
*/
?>

I’ve named my template “Custom Search Results” but you can name yours something else if you like, but you must have this text in this format pasted at the top of your new theme for this to work.

Next, you need to remove any components of the original page.php theme that you don’t want included in your new custom theme. For me that’s the sidebars. Remember, I need to remove the left and right sidebar to make room to enlarge my content section from 400 pixels to at least 795 pixels. Here’s what the template looks like before removing the sidebar code from the PHP file:

And here’s what the code for the sidebars looked like in my PHP file. To remove Sidebar1 and Sidebar2, I simply deleted the following code (click to enlarge):

and

And here’s what it looks like after removing the sidebar code from the PHP file:

Now the only thing left to do is to change my content area to more than 400 pixels wide (which is changed via the CSS style sheet).

I know that the details for my content section are shown in the “.contentLayout .content” section of my CSS style sheet. So to make changes to the size of my content area (which is currently set to 49%) I wanted to copy the details of my .content section, paste the details just below, and rename the pasted portion from “.content” to “.searchcontent” with the single change of making the width 100%.

Once I’ve pasted the new piece of div class code and changed the width to 100%, I need to change a section of my PHP file so the div class “contentLayout” refers to the new div class “searchcontent” instead of the old div class “content”. This will result in the PHP file pointing the the proper div class with a new content width of 100%.

So now instead of looking like this, with a narrow content section:

My new template looks like this, with a content section that spans the entire width of the page and takes up the space previously used by the 2 sidebars that have been removed.

The next step in the process is to create a new page for your search results. I created a new page called “Search Results”, but I had to change the Attributes settings from “Main Page (no Parent)” to a child page to prevent a “Search Results” Tab from showing up at the top of my page. Otherwise I would have a navigation tab that would confuse visitors, as shown in the picture below.

Here’s where I changed the settings from Parent to Child (I chose the “About” page as the Parent, but it really doesn’t matter what Parent page you choose).

Next, pick the new template from the dropdown list so that your new search page is using the correct template (in my case, the template is called “Custom Search Results” which is the recently created searchresults.php template with the sidebar code removed)

If by chance your new template isn’t showing up in the dropdown, check to make sure you remembered to put the code in at the top. If you remembered and the template still isn’t showing up, try switching to a different theme (like the classic theme) and then switching back to your custom theme. Sometimes WordPress doesn’t recognize the new template until you’ve reloaded your custom theme.

Once you’ve saved your new search results page, you need to tell Google the address of the page. It can be found here (right click and copy it):

Go back to your Adsense For Search setup and paste the copied address in the “Enter URL where search results will be displayed” box.

Then proceed with the final steps to get the code for your new search box. You should get two chunks of code, as shown below.

The last step is to paste the two chunks of code into your website. The first chunk of code is the code for the searchbox, so you’ll probably be pasting that into your sidebar. I used the Text/HTML widget to paste the code into my sidebar.

The next chunk of code goes in the body of your new search results page. Paste it where you’d normally be typing the content of your blog post.

Once you’ve pasted both chunks of code, save your changes and test. Here’s what my search results page looks like. Notice that the first 4 results are Google Ads, that’s fine because I’m hoping to monetize some of the search traffic (by earning $ when an ad is clicked). The rest of the search results are posts within my site that match the search query.

That’s it! You should be all set. If you have any questions please post a comment.

Popularity: 81% [?]

I wanted to create a photo navigation page on my ProjectsInMetal.com website, but I didn’t want boring square photos. I wanted my images to have rounded corners like this:

But I couldn’t figure out an easy way to do it. Then I stumbled on this post.

For my site I followed the steps in the link above, with a few exceptions. First, I shrank all my stock images to a size somewhere in the 150 to 200 pixel range. Then I used the Rounded Rectangle Tool, with a Fixed Size of 135×135 and a radius of 20 to “pick” the section of the image I wanted to use.

Here’s an image of the settings:

Here’s what the page looked like before, with text links to each project. Ugly!

And here’s what my page looked like when I was finished. Now there is an image link to each project. Much more interesting for my visitors.

Popularity: 76% [?]

I needed a way to remove the title from my pages in WordPress. I still wanted the titles to be visible to the search engines (this is important for SEO purposes) but I wanted to hide the page titles from my visitors. Below are two examples of why I needed to hide my titles.

In the first example, I wanted my Tab title to say “Free Project Plans”, but this title is redundant because the projects page is actually subdivided into 4 sections, Lathe Projects, Mill Projects, Engine Plans, and Miscellaneous. Having “Free Project Plans” just above “Lathe Projects” not only looked funny, it was redundant.

In this nex example, I wanted a short, traditional “About” tab, but I wanted the title of the About page to be “About ProjectsInMetal.com”. One word tabs are great, 1 word page titles seem odd to me.

Adding “About ProjectsInMetal.com” was simple enough (by typing the text and changing the text type to Header1), but I still needed to get rid of the short “About” title (which incidentally is the slightly smaller, Header2).

So, how do you hide the title? It’s actually pretty simple. In my case, page titles are all Header2 in size. So I simply opened my CSS style sheet and changed the Header2 info from “font-size: 18px” to “display:none” (to make it invisible to the visitor). Click the image below to enlarge.

Here is what my CSS style sheet looked like after the changes.

Note, If you’re titles are Header1 in size, make your changes to H1, not H2. The size of your titles may be different, and will depend on how the theme designer created the theme.

After saving the changes to my CSS style sheet, my page now looks like this, with the page titles invisible.

For more information on other ways to hide the title of a WordPress page, visit this site.

Popularity: 94% [?]

Post by Guest Author, Joli K.

You can visit Joli’s blog here:

Sidebar buttons are an easy way to beef up your blog as well as a good way to endorse or promote a website that you like. For example, I run a blog called The Mama List and I wanted to add a link to The Soft Landing Baby because I think it’s a useful website that’s relevant to my content. Plus it looks better than just having a plain old link. Below are all the steps you’ll need to successfully create a new look for your sidebars.

Below is the logo I’d like to put in my sidebar, circled in red. I found this on The Soft Landing Baby website.

1. The first thing you would do is make sure it’s okay to copy their image and link to them (it’s normally just fine). To download the image  right click and select “save as.” Save to desktop or desktop folder for easy access.

2. Next, you’re going to act as if you’re starting a new post. So choose “add new” from your Dashboard on the left of your admin page (click to enlarge image).

3. Click on the “add an image” icon and upload the desired image into post.

4. Click “select files“ and locate the image you’ll be using. If you want your image to link to a website, make sure you include the link url. I use “full size image” but you may have to play around with the size if you want it smaller. Also this is where you insert the title that you want people to see when they hover over the image. Once you have it filled out, click “insert into post.”

5. The HTML code will show up in your new post (to see the code, be sure to click on the HTML tab - not the Visual Tab). If you have linked to another site and you want a new tab to open when someone clicks on the image, make sure to insert: target=”_blank” at the end of the url.

6. Once you have the code in your new post you can preview to make sure the appearance is correct and it’s opening in a new tab. In order to preview you’ll need to “save draft” first.

7. If everything looks good and the size is correct, highlight and copy the HTML code.

8. Select “Widgets” under your Appearance tab on the left of your screen.

9. Under “Current Widgets” select right or left sidebar - wherever you want your image to appear - and then “Show.”

10. Scroll down to the bottom of the screen, find where it says “Text” and click “Add.”

11. Click on “edit” for the new Text button you just added.

12. Paste the HTML code into text box.

13. Save changes

14. Go to “edit” under your “Posts” Button and delete the draft that you created.

Simply follow the above steps each time you want to add a new button. You can see the finished product on my blog below. I currently have two buttons on the left and one on the right.

That’s it! If you get stuck, please leave a comment and I’ll get back to you as soon as I can. Good luck!

- Joli

Popularity: 100% [?]

My site has been down for over 24 hours - the time it took to move tystips.com into it’s own /subfolder on my godaddy hosting account. Unfortunately when the site came back up some of my thumbnail images weren’t displaying properly. I’m very sorry for the inconvenience. Until I get this fixed, please click on any broken thumbnail to see the full size image in a new screen.

Sorry for the inconvenience.

Tyler

Edit: Ok, I Figured it out.

First, some background on how this all got screwed up in the first place:

I discovered recently that you can host multiple blogs on the same premium hosting account through godaddy. All you have to do is point your additional blogs to their own subfolder (/subfolder) and not to the root directory (/ ). I really liked how much this cleaned everything up in my root directory, but I still had the original blog (tystips.com) hosted in the root (which was messy).

So I decited to use FireFTP to copy the entire contents of the root directory (/ ) where TYsTIPs.com resides to a new subfolder (called /TYsTIPs) located within the root. Once completed, the root had two subfolders (/TYsTIPs and /projectsinmetal - which is for my other site). Unfortunately FireFTP and the .thumb folders don’t play nicely together, and NONE of my .thumb folders got copied into the new /TYsTIPs directory.

So I successfully moved my entire wordpress blog into a new subfolder . . . but none of the .thumb folders made it into that new subfolder. It took forever to copy these .thumb folders 1×1 into the new subfolder, but I finally got it done. Hopefully now everything shows up properly.  If you notice a post that still has image issues PLEASE leave a comment and let me know.

Thanks for your patience!

Tyler

Popularity: 65% [?]