WordPress.org

Forums

[resolved] Alphabetic archive with title text change to date when hovering (3 posts)

  1. plathhs
    Member
    Posted 1 year ago #

    Hello. I'm having trouble with an alphabetic archive I'm trying to make. I want each post/row in the archive to display the posting date instead of the post title when hovering on the row of the post.

    This is the code I have:

    HTML

    <div class="date">
    	<div class="date-text"><?php the_date('y.m.d'); ?></div>
    	<div class="arc"><?php wp_get_archives('type=alpha'); ?></div>
    </div>

    CSS

    .date-text {
    	display: none;
    }
    .date:hover .date-text {
    	display: inline;
    }
    .date:hover .arc {
    	display: none;
    }

    But instead of having all posts in the archive listed as separate <li> in the same <div>, I figure I need each post go inside a separate <div> for the HTML to work properly.
    So my question is, can I do this with wp_get_archives or is there a better way to do it?
    Either way, please show some example code, since I'm a complete beginner and couldn't figure out how to write all the code myself.

    And here's the page with an example of what I get with the current code.

  2. stephencottontail
    Member
    Posted 1 year ago #

    Okay, check out this pastebin for the HTML and here's the CSS:

    .date {
    	display: block;
    }
    
    .date .date-wrap .date-text {
    	display: none;
    }
    
    .date .date-wrap .title-text {
    	display: block;
    }
    
    .date .date-wrap:hover .date-text {
    	display: block;
    }
    
    .date .date-wrap:hover .title-text {
    	display: none;
    }

    I substituted get_posts() for wp_get_archives() and used setup_postdata() so that the title and the date of the posts would be available. By default, the title is shown and when you hover over the title, it changes to the date of the post, using the date format set by WordPress. I used the_permalink() for both sets of information so that clicking on the date would take you to the single post view.

  3. plathhs
    Member
    Posted 1 year ago #

    Wow, that works great, exactly like I wanted it. Thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Topic