Creating Scrollable Content Boxes in WordPress

Sorry to be so long continuing this blog, but there has been much to do.

Since the last post, we have built several more newsrooms. Two for authors Owen Egerton and Joe O’Connell; one for improv guru and author, Les McGehee; and another for Accolades Public Relations.

As Christine so kindly pointed out, I did not finish the entry I promised about adding content boxes. So here goes…

First of all, let’s use Owen’s newsroom as a model, so go here:

What we are going to do is create scrollable content boxes for specific categories. So, look at Owen’s newsroom and notice that there are 4 content boxes in the main body, Media Coverage, News Releases, Book Reviews, and Events, and 2 on the left sidebar, About the Author and Multimedia Gallery. So, each of the posts within each of the boxes is tagged with its respective category. For example, every post that is put in the “Media” category, automatically shows up in the content box “Media Coverage” and nowhere else. Likewise, every post in the category “Multimedia” will appear in the “Multimedia Gallery” box in the sidebar.

First of all, you will need to create styles for your boxes. Here are what mine look like for the main (center) area:

#content
{
position:relative;
display: block;
margin: 0 215px 20px 215px;
padding: 10px;
padding-top: 10px;
text-align: left;
background: #FFF;
}

#content1
{
position:relative;
overflow : auto;
height : 350px;
width : 95%;
padding : 5px;
border : 1px solid #c0c0c0;
margin-bottom : 2px;
}

#content2
{
overflow : auto;
height : 250px;
width : 95%;
padding : 5px;
border : 1px solid #c0c0c0;
margin-bottom : 2px;
}

Where the content div is the main content area, and the content1 and content2 divs are the boxes themselves. What is most important to note about these is “overflow:auto;” - that is what allows the content to scroll.

Now, here is how we create the boxes:

In your main template index file:

Put this line of code within your main container, or at least before you call any of your boxes into existence:
<?php rewind_posts(); ?>

Now, you are going to call The Loop as many times as you have content boxes, here is the first of Owen’s:

<h1 class="category">Media Coverage</h1>
<div id="content">
<div id="content1">
<?php if (have_posts()) : ?>

<?php $my_query = new WP_Query('category_name=Media');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>

…(the rest of your usual code here)…

<?php endif; ?>
</div>
</div>

Then, the next one:

<h1 class="category">News Releases</h1>
<div id="content">
<div id="content1">
<?php if (have_posts()) : ?>

<?php $my_query = new WP_Query('category_name=News');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>

…(the rest of your usual code here)…

<?php endif; ?>
</div>
</div>

And so forth…

The main thing to note here is how the code is filtering out only categories with specific names, so you can change those names all you want - just make a note of what they are.

Now, the sidebars are a bit different. In our example, here is the style for the multimedia box:

#mediasideblock {
overflow : auto;
height : 800px;
width : 95%;
padding : 5px;
border : 1px solid #c0c0c0;
font-size : 11px;
margin-bottom : 2px;
}

So, within your sidebar code (between your ul tags), you would place something like this:

<?php rewind_posts(); ?>

<li>
<h2>Multimedia Gallery</h2>
<div id="mediasideblock">

<?php if ($posts) : foreach ($posts as $post) : start_wp();?>
<?php if (in_category(10)) { ?>
<div class="left_sidebar">
<?php echo $post->post_excerpt ?> <?php the_content(); ?>
</div>
<?php } ?>
<?php endforeach; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?></div>
<li/>

Where you would use the respective category number and your own styles.

One other thing I should note, is that you want to go to Options/Reading and increase “Show at Most” to a large number, like 200, since you want all of your posts to show.

I hope this is helpful. Please let me know if I need to clarify more. And please send me links to the newsrooms and other “empowered” sites you are building out there - I would love to feature them!

Have fun, and stay empowered!

D


3 Responses to “Creating Scrollable Content Boxes in WordPress”

  1. Christine Says:

    Thanks for posting this! However, I think I need further clarification.

    The style boxes (#content, #content1, #content2) go in the stylesheet (style.css file) - correct?

    Next — I get that the

    goes into the Main Index Template (index.php) file, but then I get confused.

    Does the “Media Coverage” code also go into the index.php file? If so, does it matter where?

    …(the rest of your usual code here)…
    The rest of what usual code? Do you mean put

    at the very bottom of the file? If so, then does the next content box “News Releases” go under that or somewhere up where the first part of the “Media Coverage” goes?

    I’ll keep trying to figure it out myself as well!

    Thanks again for your help with this!

  2. Christine Says:

    Great! The code didn’t print out above! I guess I didn’t comment the code out … so it meshed with your blog code!

  3. Christine Says:

    I get this error message when I try to put the content box “Media Coverage” code into the index.php file.

    **Parse error: syntax error, unexpected T_ENDIF in /home/kalitara/public_html/Rowan/newsroom/wp-content/themes/talian-10(altered)/index.php on line 75
    **

Leave a Comment