WordPress.org

Ready to get started?Download WordPress

Forums

"Recent Posts" module- which is the best method? (11 posts)

  1. Matthew Gerring
    Member
    Posted 5 years ago #

    So I'm working on a creative way to show previous posts.

    What I have right now is a link that shows the previous 5 posts in a DIV that pops up above the link when you hover over it. That part was easy enough.

    Now what I want to do is enable the user to click "Previous" and "Next" within this div, so that without reloading the page, it will load another 5 previous posts.

    I'm not sure which way to go on this. Any ideas?

    Here is the relevant code.

    CSS-

    .drop ul {
    	padding: 0px;
    	margin: 0px;
    	display:block;
    	z-index:3;
    }
    
    .drop ul li {
    	display: inline;
    	width: 100%;
    	list-style-type: none;
    	font-family: Arial, Helvetica, sans-serif;
    	height: 30px;
    	position: relative
    }
    
    .drop ul li a {
    	background-color: #FFFFFF;
    	color: #FFFFFF;
    	width: 100%;
    	display: block;
    	text-decoration: none;
    	height:30px;
    }
    
    .drop ul li a:hover {
    	background-color: #FFFFFF;
    }
    
    .drop ul li ul li a {
    	color: #39F;
    }
    
    .drop ul li ul li a:hover {
    	color: #30F;
    }
    
    .drop ul li ul {
    	visibility: hidden;
    	position: absolute;
    	bottom: 10px;
    	left:0;
    }
    
    .drop ul li:hover ul {
    	visibility: visible;
    	position: absolute;
    	bottom: 10px;
    	left:0;
    	background-color:#FFF;
    	width: 500px;
    	height:100px;
    	border:#000 thin solid;
    }
    
    .recent {
    	width: 50px;
    	height:100%;
    	border-right:#000 thin solid;
    	padding-right:10px;
    	padding-left:10px;
    	float:left;
    }

    XHTML:

    <div class="drop">
        <ul>
        <li>Previous Posts
        <ul>
        	<?php include (TEMPLATEPATH . "/recent.php"); ?>
        </ul>
        </li>
        </ul>
        </div>
    
    recent.php-
    <?php
    query_posts('showposts=4'); ?>
    <?php while (have_posts()) : the_post(); ?>
        <li>
        <div class="recent">
        <?php the_title(); ?>
        </div>
        </li>
    	<?php endwhile; ?>

    I am aware that recent.php currently just shows 4 posts- it is that way for testing purposes, and because I'm not sure if the "offset" parameter or using the "paged" parameter would work better.

    Can anyone help?

  2. t31os
    Member
    Posted 5 years ago #

    You could use GET to check if the user has clicked a GET invoked link, and if not then perform the default query...

    Do you know PHP enough if i provide an example?

  3. Matthew Gerring
    Member
    Posted 5 years ago #

    Yes.

  4. t31os
    Member
    Posted 5 years ago #

    Thinking about it, and after having a second read of your initial post i'll have to have a rethink about how to load the content without changing the page when a previous or next link is clicked...

    I can give an examle of how to load content differently based on the URL using GET, but that's not going to work with a DIV if you want it to change content without a page reload.

    I'll have a little think and see if i come up with something.

  5. t31os
    Member
    Posted 5 years ago #

    Yes, the problem i see is getting the DIV content to change dynamic without a page reload...

    <?php
          switch($_GET['posts'])
          {
            case '5':
            $posts = query_posts('showposts=5&offset=5');
            break;
    
            case '10':
            $posts = query_posts('showposts=5&offset=10');
            break;
    
            default:
            $posts = query_posts('showposts=5');
          }
    
          $posts;
    
          while (have_posts())
          {
            the_post();
            the_title();
          }
          ?>

    Will change the recent posts based on the URL, if no GET, then no offset...

    Default yoursite.com/?posts=anything then the offset is default...
    If yoursite.com/?posts=5 then the offset is set to 5...
    If yoursite.com/?posts=10 then the offset is set to 10...

    All that's left is figuring how get that to work dynamically inside a DIV...

  6. t31os
    Member
    Posted 5 years ago #

    If you really want to change the DIV content dynamically you'd need to look at AJAX i think, something like this could be modified...

    http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

    Unfortunately i'm not offering, but that would be where i start if i wanted to do it..

  7. t31os
    Member
    Posted 5 years ago #

    Of course you could always query 20 posts, but show 5, then give a link to show the other results...

    Think how a tabbed sidebar works, it generates the conent but hides sections, you simply hide what you don't want shown, then alternate the content shown when an area/link is clicked....

  8. Matthew Gerring
    Member
    Posted 5 years ago #

    Of course you could always query 20 posts, but show 5, then give a link to show the other results...

    Think how a tabbed sidebar works, it generates the conent but hides sections, you simply hide what you don't want shown, then alternate the content shown when an area/link is clicked....

    I thought about this too. I'm trying out the AJAX method right now, but I feel like the bext thing to do would be to load a giant div with all of the recent posts in it, hide all but 5, and then move it incrementally to the right

    I'm also going to try your method. I downloaded that exact same script you linked to before I read that response, and I'm currently in the process of making it work on my site.

    Thanks for the help!

  9. Matthew Gerring
    Member
    Posted 5 years ago #

    Oh wow. Used your GET method with that AJAX script and it works like a charm. Will post the whole solution shortly.

  10. Matthew Gerring
    Member
    Posted 5 years ago #

    So here's the whole solution, for anyone interested-

    First, you'll need this AJAX script. There's probably a better way to do this, but I don't know anything about AJAX, so this is what I used.

    Here's the CSS-

    /*---:[ Previous Posts module ]:--- */
    
    .drop ul {
    	padding: 0px;
    	margin: 0px;
    	display:block;
    	z-index:3;
    }
    
    .drop ul li {
    	display: inline;
    	width: 100%;
    	list-style-type: none;
    	font-family: Arial, Helvetica, sans-serif;
    	height: 30px;
    	position: relative
    }
    
    .drop ul li a {
    	background-color: #FFFFFF;
    	color: #FFFFFF;
    	width: 100%;
    	text-decoration: none;
    	height:30px;
    }
    
    .drop ul li a:hover {
    	background-color: #FFFFFF;
    }
    
    .drop ul li ul li a {
    	color: #39F;
    }
    
    .drop ul li ul li a:hover {
    	color: #30F;
    }
    
    .drop ul li ul {
    	visibility: hidden;
    	position: absolute;
    	bottom: 10px;
    	left:0;
    }
    
    .drop ul li:hover ul {
    	visibility: visible;
    	position: absolute;
    	bottom: 10px;
    	left:0;
    	background-color:#FFF;
    	width: 500px;
    	height:100px;
    	border:#000 thin solid;
    	float:left;
    }
    
    .recent {
    	width: 50px;
    	height:100%;
    	border-right:#000 thin solid;
    	padding-right:10px;
    	padding-left:10px;
    	float:left;
    }
    
    .postnavbutton {
    	float:left;
    	display:inline;
    }

    Here's the XHTML from the front page, where the "recent posts" link is-

    <div class="drop">
        <ul>
        <li>Previous Posts
        <ul>
            <script type="text/javascript">
    		ajaxpage('http://www.mysite.com/?page_id=50&posts=4', 'recentbox')
    		</script>
    		<div id="recentbox">
    		</div>
        </ul>
        </li>
        </ul>
        </div>

    So when the page loads, there is already something inside the "recentbox" div. Now here's the tricky part-

    <?php
    /*
    Template Name: Recent Posts
    */
    ?>    
    
    <?php
    $count_posts = wp_count_posts();
    $published_posts = $count_posts->publish;
    ?>
    
    <?php query_posts('showposts=4&offset='.$_GET['posts'].''); ?>
    
    	<?php if ($_GET['posts']-4 != 0) { ?>
        <div class="postnavbutton">
    	<a href="javascript:ajaxpage('http://www.mysite.com/?page_id=50&posts=<?php echo $_GET['posts']-4; ?>', 'recentbox')" >
        <img src="<?php bloginfo('template_url'); ?>/images/go2.gif" alt="&raquo;" />
        </a>
        </div>
        <?php } else {} ?>
    
    	<?php while (have_posts()) : the_post(); ?>
     	<li>
        <div class="recent">
        <?php the_title(); ?>
        </div>
        </li>
        <?php endwhile; ?>
    
    	<?php if ($_GET['posts']+4< $published_posts) { ?>
        <div class="postnavbutton">
        <a href="javascript:ajaxpage('http://www.emrl.com/clients/sandbox/?page_id=50&posts=<?php echo $_GET['posts']+4; ?>', 'recentbox')" >
        <img src="<?php bloginfo('template_url'); ?>/images/go.gif" alt="&laquo;" />
        </a></div>
    	<?php } else {} ?>

    First, I made this a page template, because I couldn't figure out any other way to make WordPress process my php file. I set up a new WordPress page called "Navigation Hack" and made this the template.

    The URL on the home page points to that page, with an added variable for GET to process.

    Next, I get a count of the published posts, so our "recent posts" box doesn't show any posts already displayed on the page.

    Next, I do a custom query using the GET variable as the offset number.

    Next, I display the buttons. The button on the right is set to only show up when there is at least one more previous post to display. If the "offset" parameter is larger than the number of published posts, nothing shows up.

    The button on the left is set up to display only after you've gone deeper into the list of previous posts, so you can go the other direction as well. If the only posts left are the ones showing on the front page, this button doesn't show up.

    Is there a way to do this without making this php file a page template and setting up a page?

  11. t31os
    Member
    Posted 5 years ago #

    I'm going to have a fiddle with the script at some point, i'll let you know my results..

Topic Closed

This topic has been closed to new replies.

About this Topic