What are Related Posts

When someone visits your blog post, you can display some related posts at the bottom to entice your visitor to view other posts on your site as well. So, for example, let’s say you are posting about a new WordPress plugin. You might want to display some other posts you wrote about WordPress plugins, or you might want to display a post about content management systems, or maybe one about why WordPress is so popular.

Are There Easy Ways to Display Related Posts?

You want an easy way to do this? There are some nice plugins to display Related Posts, here are two:

• Yet Another Related Posts Plugin (YARPP)
• Efficient Related Posts (thanks to Barry Wells for the recommendation)

If you have self-hosted WordPress, you can install a plugin easily on your blog. And you don’t really have to read the rest of this post. But if you install a related posts plugin and you don’t like the way it appears or which posts it chooses as related posts, maybe you want to keep reading this post.

If you like a coding way to display related posts, without a plugin, try one of these articles:

• Display Related Posts using PHP instead of a Plugin
• How to: Show related posts without a plugin

You will find, however, that those coded posts are based on tags. What if you want to display a post that doesn’t have the same tag? Or you want the 6th post in the second tag on your post to display?

• • •

What? You are still here? Oh, yes, now I am going to teach the slow and meticulous way to set up related posts, so you can tweak every little detail. And you can learn some CSS (Cascading Style Sheets – it’s the best way to make your website shine with design) in the process. Once you set this up for one post, you will find it quite easy to re-use the code with new links on another post.

Thinking Through Our Layout Needs for the Related Posts

To set up our related posts, we are going to need:

• Thumbnail images for each post – if you have these already, great. But if not, you will need to create some thumbnails. I am going to make mine 100px by 100px, but they don’t have to be that size.
• Links to the Posts – I find it handy to set up my code in a code editor separate from WordPress (I used Dreamweaver). For now, just paste into your code editor 3-4 links that you would like to appear in your related posts.

We want these thumbnail images to line up nicely on the bottom of a post, each with a little caption underneath. Both the thumbnails and the captions should be linked to the related post. One’s first reaction might be to put this in a table, but a nicer way to code that will help if you are also doing responsive design (you want this to appear on mobile neatly, too) would be to float each little area of the related links. (If you don’t know about floats, read about floats).

Set up the HTML and CSS

Here’s how the HTML should look for three links (add another related-area div for four links):

<hr />

<strong>Related Posts:</strong>

<div class="related-links clearfix"><!--start related links area-->



<div class="related-area"><div class="related-img"><a href="http://biz.leoraw.com/clear-float/"><img src="http://biz.leoraw.com/wp-content/uploads/2009/12/water_effect2-100x100.jpg" alt="unwanted wrap around text - needs to clear float" /></a></div><div class="related-tag"><a href="http://biz.leoraw.com/clear-float/">Unwanted Wrap</a></div></div>

    

<div class="related-area"><div class="related-img"><a href="http://biz.leoraw.com/css-spacing-woes-and-solutions/"><img src="http://biz.leoraw.com/wp-content/uploads/2010/10/spacing_woes-sq.jpg" alt="CSS spacing woes" /></a></div><div class="related-tag"><a href="http://biz.leoraw.com/css-spacing-woes-and-solutions/">CSS Spacing</a></div></div>



<div class="related-area"><div class="related-img"><a href="http://biz.leoraw.com/fancy-colored-boxes-with-css/"><img src="http://biz.leoraw.com/wp-content/uploads/2009/12/fancy-boxes-css.jpg" alt="Fancy Colored Boxes with CSS" /></a></div><div class="related-tag"><a href="http://biz.leoraw.com/fancy-colored-boxes-with-css/">Fancy Boxes</a></div></div>



</div><!--end related links area-->

<hr />

And here’s the CSS:

/*RELATED POSTS

========================================*/

.related-area {text-align: center;}

.related-links .related-area {float: left; width: 135px; margin-right: 30px; }

.related-img {padding: 15px; background-color:#eee; border: 1px solid #999999}

.related-img img {border: 1px solid #999999}



.clearfix:after {

   content: ".";

   visibility: hidden;

   display: block;

   height: 0;

   clear: both;

}

I would suggest doing all this in your code editor, check it offline, and then copy to your WordPress post. You should save the HTML code somewhere convenient so you can use it again for a later post, just add different related links.

You should copy the CSS to the bottom of your theme’s style.css. Be sure to put a comment on top of the CSS that says /*Related Posts*/ so you know what this section of your style.css does.

Hope some of you find this Related Posts with CSS useful! If it’s too much code for you, go to the top of this post and try the YARRP plugin.

Unwanted Wrap

CSS Spacing

Fancy Boxes

A friend decided to widen her sidebar on her self-hosted WordPress site last week. Oops, the sidebar floated down under the main content. What to do?

This is a basic post on how the layout of your WordPress site is constructed. Even if you never touch the code yourself, you may want to understand what needs to be done when you ask your web designer/developer to widen the sidebar on your site. Not all CSS layouts are constructed in this manner, but many have these three basic elements:

1. Wrapper or container
2. Content
3. Sidebar

In some layouts, the wrapper may be one big div that is about 850px to 1000px wide. In other layouts, especially responsive layouts like lessframework.css, a class called container takes over from what the wrapper used to do, and then the header, main area and footer are all given the class of container to keep them the same width. The content and sidebar are added together to make the size of the container or wrapper; for example, if the sidebar is 300px inside a container of 900px, the content is 600px. The numbers you see in your CSS may be smaller due to padding on either side of the content or sidebar.

Here is a chart that illustrates how this might look with a wrapper of 900px:

So what happens if you make your sidebar 320px? It will float down under the content, because it can no longer fit inside the wrapper. If you want make your sidebar larger, you either need to make your content smaller or make your wrapper/container larger. Here I did a similar illustration with a larger wrapper:

Some pointers on fixing a layout:

1. Take out all padding and margins on sidebar and content and see if that helps. Make sure the sidebar + content adds up to the wrapper (or less).
2. Use background-colors on the sidebar and content temporarily to see where the code is being applied. For example, make the sidebar yellow and the content green. This often helps in figuring out the layout problems. Don’t forget to the take the weird colors out on the production (real) site.

Want to learn more CSS?

• All About Floats
• Simple 2 column CSS layout
• Sidebar pushed down (in the WordPress codex, someone had a similar problem with the sidebar floating down under the content – read the pointers by hellomatt)
• Float that Image

This is some text that will appear to the far right if coded with float: left; in the img tag. But it will look normal if you clear the float before the text shows up in the code. How does it look now?

See how the text is squished over the right of the image? Strangely enough, in a previous template the text landed below the image, as the author planned it should go. Here’s how one wants the image and text to appear:

This is some text that will appear to the far right if coded with float: left; in the img tag. But it will look normal if you clear the float before the text shows up in the code. How does it look now?

So what is happening here? The answer is the default in the new template for images is to float the image to the left(float:left;). You have a few choices: you can either go into the CSS and take out the line about the image floating to the left (but you do have to locate the line to do so), you can add a class to your CSS to clear certain images OR you can clear the float using inline code. I am going to teach you how to add the inline code to your WordPress post. You need to be working in HTML mode (as opposed to Visual mode).

Here’s how to clear a float:
When you start the paragraph for the text directly below the image, add the following code:

<div style=”clear:left”>text here</div>

The order of the code should be img tag, then a div tag with style=”clear: left”. You can use a paragraph <p style=”clear:left;”> tag instead of the <div style=”clear:left;”> if you like.

Any questions?

More on floats and CSS:

• Float that Image
• Links to tutorials on HTML and CSS

Have you ever had text that looks like this:

You want to get rid of the space between the top and the bottom. How do you accomplish this?

To an accomplished webmaster this is a simple question. To those just learning CSS, this can be a royal pain. So what could be causing that spacing?

1. <p> tags instead of <div> tags
   Simply switch to <div> tags in your HTML, and the spacing goes away. <p> tags have margins built-in, while <div> tags do not. Unless, of course, you or someone else changed the CSS for the <div> tags. See the next idea below.
2. CSS is set with margins or padding
   Check your style sheet to see if div has any margin or padding added. You can change this, or you can make a class below the original declaration that changes only some cases, cases that have that particular class added. So your CSS might look like this:
   .myspacing {
   margin-bottom: 0;
   margin-top: 0;
   padding-bottom: 0;
   padding-top: 0;
   }

   and your html where you want all spacing eliminated like this:

   <div class=”myspacing” > some text here </div>

   If you are using header tags (h1, h2, h3, etc.), know that they, like paragraph tags, by default add spacing to top and bottom. You can either change the default in the CSS to eliminate the spacing or you can add the “myspacing” class to only the header tags that you choose.

3. Are you using an image? Is the image causing extra spacing?

Last week I was working on a client’s site and was wondering why I wasn’t able to get rid of the spacing between the top and the bottom. It turned out the image I was using as a bullet was adding extra space. I switched to a &bull; bullet (a special character HTML bullet: •), and then my spacing issues were eliminated. Want to know how I quickly figured this out? See the tip below.

Whenever you are unsure of where space is being added in a section of a web page, add bright, weird background-colors to the sections involved in the spacing issue. Here’s my example:

This is how it looked before I added the weird colors:

To Learn More About Chocolate Frogs and WordPress:

 Read this Blog Every Day! And share your chocolate frogs.

You can’t tell whether the extra spacing is from the bottom or from the top, right?
With the weird colors showing the two sections:

To Learn More About Chocolate Frogs and WordPress:

 Read this Blog Every Day! And share your chocolate frogs.

Now it should be obvious that the bottom is causing the extra spacing. I eliminate the triangle image to see what happens:

The spacing issue is now gone. I could get an image that doesn’t cause spacing conflicts, but in the interest of time, I add a • in color, and here’s my final result:

Another common spacing headache for CSS beginners is tables, but that’s a topic for a whole different post.

For more posts on CSS:

• Fancy Colored Boxes with CSS
• Float That Image

A common question I get is: How to I put such-and-such image next to my big text? Or, how do I get space between my image and the paragraph of text? Or, how can I put an image next to a paragraph of text and include a caption with a link under the image?

All of these questions are related to floating the image. Let’s say you have a big line of text at the top of your web page that says:

You want to put a logo next to that text. I am going to show you how to FLOAT the image. This is how it will look when the logo is floated to the left:

MY COMPANY AND PROUD OF IT

2) You will then define a CSS rule. The rule will help create an area that is floated to the left and given exactly the width of the image:

.myfloat {float: left; width: 150px}

3) You wrap the image inside a div tag and give it a class of myfloat:

You can put the CSS code in your style sheet; this is called style.css if you are using WordPress. Or you can put it directly into a WordPress post by using inline CSS code:

If you think it’s code that you will use repeatedly, you should really put it in your style sheet.

So now you have learned how to float an image to the left (to float it to the right, use float: right), but what about margins and captions? If it’s in a div tag (as opposed to relying on align=”right” or align=”left” inside the image tag), you can easily add a caption inside the div tag. Margins can be added by adding margin rules to the CSS:

Learn more about floats:

• Clear a float
• CSS float property
• Floatutorial
• How To Float an Image to the Left of Text

Feel free to suggest more HTML or CSS links. If you are serious about learning to build websites, PHP, jQuery and how to set up and tweak any of the big three content management systems (WordPress, Drupal or Joomla!) are also key skills to master.

Related Posts:

• Top WordPress Code Sites
• 6 Ways to Learn jQuery

I use these boxes when I need to highlight some links or make a header stand out. One just has to get a hang of what the code should be, then one can tweak it for one’s own needs. You can use these at the top of a post or as a box to highlight links.

Learning the Code

Let’s take a look at the code for that top box. You will notice two div tags, one wrapped inside the other:

The above is done with inline code. A better approach is to separate the HTML from the CSS – so it’s easier for you to see what is going on. You can then use the CSS code over and over again. And you will also discover that the two boxes have similar HTML markup:

In the second box, the yellow with red borders, I inserted a <ul> tag with <li> links in the middle:

The CSS Code

Here is the CSS code for the blue box, which you should save to your stylesheet (if you use WordPress, it’s style.css):

The code for the red and yellow box with links is only a slight variation of the blue box. You will need to add some code for the ul and li tags:

If you want both box versions in your stylesheet, name the classes for one of them something other than myinner and myouter.

Note: if you want this to work in your WordPress theme’s style.css, you may have to put the post classes before the .myinner and .myouter to get this to work. This is what worked in my style.css:

Curves: The Next Challenge

If you want to add curves, read some of these wonderful posts:

• CSS 3 and The Future: Image-free Rounded Corners, Drop Shadows and Gradients
• 5 Methods for CSS Curvy Corners
• 12 Really Useful CSS3 Tips And Techniques

Need More Basic? Intro to CSS Links

• CSS Tutorial
• Starting with HTML + CSS