WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Oliver Gwyther
    Member
    Posted 1 year 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. 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 1 year ago #

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

    Thanks.

  4. Oliver Gwyther
    Member
    Posted 1 year ago #

    That worked brilliantly. Thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic