Support » Themes and Templates » Post separators

  • I’ve got a graphic I’d like to insert between posts on the main page. Can someone tell me where the appropriate place is to put it in the template files? For example, if I just wanted a horizontal line <hr>, where would I put that to get it to show up between posts?

Viewing 9 replies - 1 through 9 (of 9 total)
  • In the index.php template files, look for the end of the postmetadata section and the final DIV of the WordPress Loop. When the page is actually generated, it looks like this:

    <div class="post" id="post-2">

    Now, the second line is the beginning of the Loop where the posts repeat themselves down your page. The DIV is the end of each post.

    There, put a <hr /> tag (XHTML version) so when the page is generated, it would look like this:

    <hr />
    <div class="post" id="post-2">

    There are other methods, but this is the easiest.

    And if you wanted to use a graphic, you could insert a class there, and in your css define a background, and anyother info you wanted.

    Thanks. I’ll try it tonight. Will that put the divider after the last post too? I think, ideally, it’d only be between posts, but may it’ll be fine either way.

    Will that put the divider after the last post too?
    Yes. But if you’re good enough, you could cover up the divider for the last post with the footer.

    Thanks for the help. I think I need some more advanced help though. 😉

    The idea I had for my divider graphic is one that spans the full width, including the sidebar and the edges, etc. When I cut in to the loop with a new <div id=”xxx”></div>, I see that it only wants to put the graphic within the narrow column where the post text goes. I tried breaking out of the main <div id=”content” class=”narrowcolumn”> and going back in after the graphic, but it had some undersirable effects with the sidebar, like all the sidebar links got shoved down to the bottom (into the last instance of that class or something?). Any suggestions on how to pull this off easily without rewriting everything? TIA

    …and going back in after the graphic
    I’m not clear as to what you meant by that. ??

    Nonetheless, I may have a suggestion but I don’t think it’s easy for you. It’ll be your “full-time job.”

    Do you know the CSS term “z-index,” “relative,” or “absolute” positioning? No?

    Hmm. No, not familiar. I can look it up of course. What I meant by “going back in” was like putting this at the end of the loop:

    </div><div id=”divider”>
    </div><div id=”content” class=”narrowcolumn”>

    It didn’t work, but that’s what I meant.


    Forget what I said in previous post.

    Now, why do you want the divider to be outside “content?”
    It’s supposed to be between “post”s and inside “content.” Unless you’re trying to accomplish something that I don’t follow.

    So far, Lorelle’s solution above sounds applicable for your purpose.

    It was just for effect with the theme, I didnt want to be constrained to the boundaries of the post column. The best way I found is to provide a background image for .postmetadata and then use negative margins. Worked for me anyway.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Post separators’ is closed to new replies.