by 
Rebecca, over at The Space Between My Peers, is moving to a new theme. She really likes the new colors, but has some qualms about what’s going on with her related posts. Specifically, she said that she would like the following:
1) change the bullet to a coffee cup
2) put a background on them
3) have them just show up when you hit the read more arrow
So, let’s see if we can help her get this done…
Change the bullet to a star or a heart.
This is actually the most challenging of the things we have to do. Her current related posts look like this:
Pretty tacky. She wants to change it to coffee cups– so we’re going to have to find some!
The great things is, there are plenty of sites out there with graphics that we can use free of charge. One that specializes in bullets is Bullet Madness. Thankfully, they have a coffee cup about halfway down the list called “on a break“. We’ll need to download that file and upload it to your site, maybe in an images folder.
The next she has to do is go into her Admin Panel and find “Related Post Options” Under “Plugin”. Once you’re there, find the box that Before / After (Post Title).
We need to add some code after the <li. As you can see above, put a space after <li and type Class=”relatedhearts”. So, the entire text in the first box should read:
<li Class=”relatedcoffee”>
Press the save button. This shouldn’t change anything on your site, yet.
Next, we’re going to edit the Stylesheet that you have to put in this new class. If you use the Theme Editor ( under “Presentation” ), go to it and select the stylesheet link. In either case, go to the end of the file and add the following:
ul.clearbullets {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.relatedcoffee {
background: url(http://betweenmypeers.com/images/0088_on_a_break.png) left center no-repeat }
That’s going to get us the coffee cups after one more step. Go into the page that you added the related posts function to. In my case it’s “theloop.php”, whatever yours is it’s where there’s a loop to display the posts. Find where you put in the function that displays the related posts, and put a
<ul class=”clearbullets”>
before it. Save the file or upload it and you should be good to go!
Have them just show up when you read more.
While you’re doing the last step, making this change is easy. Right before the ul, put the following code:
<?php if(is_single()) { ?>
and after the call to related posts put
<%php } ?>
And now related posts only show up when there’s only one post on the screen!
Put a background on them.
I think that we’ll have to save this one for next time, since we need to more clearly define what you want for a background, but try the first two and see if you can get it to work, and let me know if there are any questions!
Want to have some help with your template? Reply in comments or contact me!
Hey, I like the coffee cup very much! Thanks.
Currently feeling a little overwhelmed, though, so don’t feel bad if it’s a day or two before I get around to playing with it. Looks like alot of steps!
Not a problem– we’ll work with a background later.
Thanks for breaking all this info down for us mortals! I agree with Rebecca, it still seems daunting, but doable. Glad we have you and these technical support posts to refer to!!
Okay, I think I have successfully done all the steps here, in replacing the bullets with coffee cups. Only thing is, they aren’t there.
When I got to the final step, , it didn’t do anything except tab the whole list of related posts over. If I put it after the related posts function in the file, it tabbed the pink bar over. Does that make any sense? Did I neglect something obvious?
Thanks again. It’s nice to be able to attempt this kind of improvement without becoming stressed!
BTW, just for the record, that is not me in the picture! I might sit around the house dressed like that on a 100 degree day, but I would never allow the evidence to be seen in public! LOL
Are you sure that you uploaded the coffee cup file to the images directory? I could find the file when I looked.
I also didn’t see the <ul class=”clearbullets”> before and the </ul> after.
I’m pretty sure I uploaded it right, but I will check on that a little bit more. When I have confirmed that is correct, especially if I find a problem, I will put the
Okay, I think I see the problem and can fix it:
http://www.betweenmypeers.com/wp-content/themes/beauty-bling-10/images/0088_on_a_break.png
I shall return!
Never mind. That didn’t work either.
Oh well.
Rebecca, you’re really close. What I’m seeing now is that you have all the pieces, you just have an extra set of quotes in your class names.
For instance, I see <ul class=””clearbullets””> in your code. The inside set of the slanted quotes need to go so that it reads class=”clearbullets”. Same thing with <li> tags. Your image is there, and with these changes you should see it (whew, seems like I need to learn how to write better how tos…
I don’t think your instructions were defective. Where did those other quotes come from? Trouble is, they aren’t there when I look at the template page (apparently my loop = the main index), they must be coming from somewhere else.
Thoughts?
strange. Any way you can e-mail me this file and I’ll take a look at it?
Rebecca,
What did you use to edit the file? Depending on your editor it can add all sorts of extra stuff. If you’re going to edit PHP files, I highly recommend notepad2. Its free, its tiny, and it has a lot of features to help keep you from making mistakes (e.g. highlighting, ” and ‘ matching, { and ( matching etc )
Sadly, Doug, I have no idea what you’re talking about. I was using the wordpress theme editor. ??
On another note, though, I would love to see you contributing posts as a writer here. 🙂
Thanks for the suggestion anyway.
Yeah, Doug, you could take over the Wednesday Tech Help 😉
Help with Doug– I like the sound of that! 🙂
Yay! The coffee cup is as cute as can be and it all works now.
I definitely think it’s better to have the related posts show up on each post, so scratch number 2.
What about just changing the “Related Posts:” heading to bold and the color of the text just below the post title? Does that make sense? Do you think that would look good?
Thanks again!
Well, the first step is to assign it a class. Is it true that your related posts have <h1> for their tag? That’s not good SEO wise. You should probably change it to be h4 or something. Change the tags around Related posts to be something like <h4 class=”relatedheading”> and make the closing tag h4 as well.
Then we can play with something in the stylesheet to make it whatever you’d like.
By the way, you’re using FireFox, right? Did you ever download firebug? It would really help with this modding that you’re doing to your theme. You could preview how something would look before putting it in your files.
Okay, I did those changes. And I had downloaded firebug and tried using it when I was trying to get rid of the mannequin-looking lady, but I just didn’t understand enough about what was going on to really get how to use it.
This maneuver was simple enough. 🙂 Thanks!
Who knows? Maybe I’ll even be able to figure out how to do this next little change on my own.