Adding CSS to my Wordpress Related Posts

HTML & CSS
1

Below I just added this Wordpress hack to my theme regarding related posts. However I want to display them in a box style using CSS how would I style them or css this to achieve something that looks like thisthe one I’m looking at is near the bottom without the thumbnails.

Also having a 1PX border around the actual box of the Related section.

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
    $tag_ids = array();
    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

    $args=array(
        'tag__in' => $tag_ids,
        'post__not_in' => array($post->ID),
        'showposts'=>5, // Number of related posts that will be shown.
        'caller_get_posts'=>1
    );
    $my_query = new wp_query($args);
    if( $my_query->have_posts() ) {
        echo '<h3>Related Posts</h3><ul>';
        while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
            <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
        <?php
        }
        echo '</ul>';
    }
}
?>
2

Awesome thanks that helped.

3

You can see on this very post what I mean exactly

http://blog.septagonstudios.com/blog-test-8/

If you look at Related theres a Padding issue near the bottom of the box.

4

Your solution worked great. However I noticed that there is about 10PX of padding near the bottom how can I reduce that padding here is my new Modified CSS code:

#box {
  width:615px;
  border:1px solid #ccc;
  font-family:Arial;
}
 
#box h3 {
  color:#000000;
  background:#F8F8F8;
  padding:4px 0 3px 4px;
}
 
#box li  {
  padding:3px 1px;
  border-bottom: 1px;
  list-style:none;
  margin: 1px 5px;
}
#box li:last-child{
  border:none;
}
5

Hi

It’s on this:


p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset
{
	margin-bottom: 20px;
}

You have the default bottom margin for ul’s set to 20px with the other selectors above.

What I would do (so as to not mess with the above .css) is to add this:

#box ul{
  margin-bottom:10px;
}

before the #box li{} selector in your .css file. Adjust the “10px” to your preference.

Hope it helps. :slight_smile:

6

Where exactly do you mean the bottom? If you mean the bottom of hte browser, then perhaps thats the default setting on the <body>

body{margin:0;padding:0;}

If not then could we get a link to the live page?

7 
<div id="box">

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
    $tag_ids = array();
    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
 
    $args=array(
        'tag__in' => $tag_ids,
        'post__not_in' => array($post->ID),
        'showposts'=>5, // Number of related posts that will be shown.
        'caller_get_posts'=>1
    );
    $my_query = new wp_query($args);
    if( $my_query->have_posts() ) {
        echo '<h3>Related Posts</h3><ul>';
        while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
            <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
        <?php
        }
        echo '</ul>';
    }
}
?>

</div>

#box {
  width:200px;
  border:1px solid #ccc;
  font-family:Georgia, Serif;
}

#box h3 {
  color:#fff;
  background:#ccc;
  padding:4px 0 4px 5px;
}

#box li  {
  padding:10px 0;
  border-bottom: 1px dashed #ccc;
  list-style:none;
  margin: 0 10px;
}
#box li:last-child{
  border:none;
}

This is semi untested (not in all browsers). Adjust width, padding, margin and color to your needs. :slight_smile: