WordPress.org

Forums

Suffixing div name with number for each post (4 posts)

  1. Oliver Gwyther
    Member
    Posted 2 years ago #

    Hi all,

    I have a list of posts, currently using the jQuery pageslide library.

    Each post needs to LINK to a custom id, and the each posts div needs to be appended with that id. For example, my current code:

    <div class="pin">
    
    			<a href="#modal" class="second"><?php
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
      the_post_thumbnail();
    }
    ?></a>
                    <div id="modal" style="display:none;background-color:#000;">
                        <h2 style="font-weight:normal;font-size:48px;text-transform:uppercase;margin:0px;"><?php the_title(); ?></h2>
                        <?php
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
      the_post_thumbnail('medium');
    }
    ?>
                    <p><?php the_content(); ?></p>
                        <div id="bottom_menu"><span id="close"><a href="#">Read More</a></span>&nbsp;&nbsp;<span id="close" style="float:right;"><a href="javascript:$.pageslide.close()" style="background-color:#000;"><img src="images/close.gif" width="20" height="20" /></a></div>
                    </div>
    <script>
        $(".second").pageslide({ direction: "left", modal: true });
    </script>
    
                <h1><?php the_title(); ?></h1>
    			<p>
    				<?php the_excerpt(); ?>
    			</p>
    		</div>

    Where the href 'modal' and the div name 'modal' need to be suffixed by the SAME number for each post. So post 1 would be 'modal1', post 2 would be 'modal2' etc.

    I'm no PHP coder, so have no idea how to do this. Any suggestions?

    Thanks,

    Oliver

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    consider to use the post ID by using this function:

    the_ID()

    http://codex.wordpress.org/Function_Reference/the_ID

    example:

    <a href="#modal<?php the_ID(); ?>" class="second"><?......

    and

    <div id="modal<?php the_ID(); ?>" style="display:none.......

    if you rather have consecutive numbers starting with 1, you can use the integrated loop counter variable:

    <a href="#modal<?php echo $wp_query->current_post+1; ?>" class="second"><?......
    etc.

    (untested)

  3. Oliver Gwyther
    Member
    Posted 2 years ago #

    Oh, didn't think of that. Awesome idea. I'll try it out and let you know!

    Thanks.

  4. Oliver Gwyther
    Member
    Posted 2 years ago #

    That worked brilliantly. Thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic