This is a short tutorial intended to instruct the authors of ProjectsInMetal.com (many of whom are new to WordPress) on how to write their first post.

Step 1: Log into Wordpress

Here’s the link: www.projectsinmetal.com/wp-admin

Step 2: Create a new post by clicking on Posts (click the image to enlarge)

Step 3: Click Add New

Step 4: Begin Typing Your Article

Give your post a unique title (type the title where it says “Type The Title Here” in the image below). Type the body of the post in the section below the icons. If you can’t see all the icons shown in the picture below, click “Show/Hide Kitchen Sink” to make them visible. Also, make sure that you’re typing in the “Visual” tab. Don’t mess with the HTML tab unless you need to modify the HTML of your post, which is usually not necessary.

Just like any word processor, you can use Bold, Italic, etc in your text. If you’d like to change the size of your text you can pick from the dropdown below the Bold and Italic icons. Normally you’d leave it set to “Paragraph” but you can choose other font sizes for title headers, etc.

Step 5: Uploading and Image

Try to give your images a proper descriptive name before you upload them. For example, a name like DCM001 doesn’t tell Google what the image is. Descriptive titles on images help Google understand what the article is about, which helps drive quality search traffic to the site. Image titles also allow visually impaired users to “hear” the title of the image if they are using a Text-To-Speech browser.

Once you’ve got your images named, click on the Upload/Insert Image Button (shown in the image above) and make sure that the “From Computer” tab is active. Then click “Select Files” to navigate to your files on your computer’s hard drive.

Once you’ve selected an image the software will compress the image (it might call it crunching). Once it’s done compressing the image you should see an option panel like the one below.

Step 6: Choose your Settings and Insert Your Image (see an explanation of the settings below)

Alignment: I usually Choose None.

Left, Right, and Center make the text wrap around the picture. Sometimes that looks ok, but usually I like to put images between paragraphs (like I’m doing in this post). To do that, choose None.

Size: If the image is larger than 300px, choose Medium. This will insert a small version of your image (300px wide) into the post. When users click the image they will see a full size view. If the image is smaller than 300px, go ahead and insert it using the Full Size option.

Click “Insert Into Post” to insert your image.

Step 7: Editing an Existing Image

Once you’ve inserted an image, you can either edit it or delete it by clicking the image and hovering over it until you see the Edit and Delete icons appear.

Step 8: Preview and Submit for Review

In the upper right corner make sure that your Status says “Pending Review” and not “Draft”. If it says “Draft” click edit and change it to “Pending Review”. That way you can click Save as Pending (instead of Save As Draft) once you’re finished with the article so that I can review the post before publishing it.

Please use the preview button to see what your post will look like once published (it will open up a new browser window which you can close once you’re done previewing). Please do not click publish! If you were to hit Publish I wouldn’t be able to review the post before it went live (which would mean that everyone could see it). Saving it as Pending will allow me to review the article, make any minor format changes if necessary, check for errors (by viewing the post in several different web browsers including IE, Firefox, Safari, and Chrome), and adjust the publish date (if I decide to schedule the article to post sometime in the future).

Remember to click Save As Pending before you close your browser or log out, otherwise your changes won’t be saved and you’ll have to re-write the article. Send me an e-mail once you’re ready for me to review. I will assume you’re still editing your article until I hear otherwise from you. So feel free to Save As Pending as often as you like. If an article takes several days to finish that’s not problem, just e-mail me when it’s done.

If you do hit publish by mistake, you can change the status from “Published” back to “Pending Review” to un-publish the article. But this doesn’t always work right, so just try not to click publish.

That’s it, let me know if you have any questions.

- Tyler

Popularity: 6% [?]

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: 36% [?]

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: 36% [?]

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: 48% [?]

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: 85% [?]