WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Using Twenty Thirteen theme, Cant get recent posts to work right (7 posts)

  1. dingoellis
    Member
    Posted 9 months ago #

    I think I am missing something in my CSS to allow my basic non-plugin recent posts section to not display the thumbnails centered. Any chance anyone can see what I am missing or setup incorrectly?

    css

    #related_posts {
    margin-top:-15px;
    }
    #related_posts ul {
    overflow:hidden;
    margin:0;
    margin-left:-43px;
    }
    #related_posts li {
    text-align:center;
    list-style:none;
    float:left;
    margin:0 22px 0 0;
    }
    #related_posts li a {
    display:block; font-size:11px;
    font-family:tahoma, Arial, sans-serif;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
    letter-spacing:1px;
    text-align:center;
    width:100px;
    line-height:16px;
    border-bottom:none;
    overflow:hidden; }
    #related_posts li img {
    padding:5px;
    background-color:#f4f4f4;
    border:1px solid #ddd; }
    #related_posts li img:hover {
    background-color:#ddd;
    }
    #related_posts h3 {
    text-align:center;
    border-top:1px dashed #AAAAAA;
    color:#135A9F;
    padding-top:10px;
    font-family:Arial,sans-serif; font-size:1.35em;
    }

    And I have this added in my functions.php

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 100, 50, true );

    Lastly this to my single.php

    <?php
    
    $categories = get_the_category($post->ID);
    if ($categories) {
    $categories_ids = array();
    foreach($categories as $individual_category) $categories_ids[] = $individual_category->term_id;
    $args=array(
    'category__in' => $categories_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=>5, // Number of related posts that will be shown.
    'caller_get_posts'=>1, //Ignore Sticky status
    'orderby'=>'rand' // Randomize the posts
    );
    $my_query = new wp_query( $args );
    if( $my_query->have_posts() ) {
    echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
    while( $my_query->have_posts() ) {
    $my_query->the_post(); ?>
    <li>
    <a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
    <?php the_post_thumbnail( 'related-posts' ); ?>
    </a>
    <div>
    <a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </div>
    </li>
    <? }
    echo '</ul></div>';
    } }
    ?>
    <?php wp_reset_query(); ?>
    <p/><br/>

    Thanks for any help pointing me in the right direction and most importantly your time.

  2. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Are you using a child theme? You should NOT be modifying the default theme - your changes will be lost when WP is updated and it's also crucial to have a clean copy of the default theme for troubleshooting. So you really should go back and move your changes to a child theme -

    http://codex.wordpress.org/Child_Themes

    Then please post a link to your site for help with CSS.

  3. dingoellis
    Member
    Posted 9 months ago #

    I know I should not be but I am going to be moving this to a new name so the changes will not be lost as opposed to going the child theme route. I was just trying to point out its from that base.

    The CSS being used for the recent posts section is posted above in the code.

    Well got a little bit closer but for some reason I am still stuck to the left side somewhat.

    #related_posts {
    margin-top:-15px;
    }
    #related_posts ul {
    overflow:hidden;
    display: block;
    margin-left: auto;
    margin-right: auto
    }
    #related_posts li {
    list-style:none;
    float:left;
    margin:0 22px 0 0;
    }
    #related_posts li a {
    display:block; font-size:11px;
    font-family:tahoma, Arial, sans-serif;
    text-transform:uppercase;
    text-decoration:none;
    letter-spacing:1px;
    text-align:center;
    width:100px;
    line-height:16px;
    border-bottom:none;
    overflow:hidden; }
    #related_posts li img {
    padding:5px;
    background-color:#f4f4f4;
    border:1px solid #ddd; }
    #related_posts li img:hover {
    background-color:#ddd;
    }
    #related_posts h3 {
    text-align:center;
    border-top:1px dashed #AAAAAA;
    color:#135A9F;
    padding-top:10px;
    font-family:Arial,sans-serif; font-size:1.35em;
    }
  4. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Again, there is no way to help with CSS without seeing a live site.

  5. dingoellis
    Member
    Posted 9 months ago #

    sorry.
    Here

    Also after more reading I am going to go with your route and move all this to a child theme once I get the issue sorted out. Thanks.

  6. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    I am going to go with your route and move all this to a child theme once I get the issue sorted out.

    EXCELLENT!! It's really a better way to go - you can make changes but still keep the parent theme updated.

    I think all you need to change is in this CSS:

    #related_posts ul {
        display: table;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    Note the display: table; is changed from display: block;

  7. dingoellis
    Member
    Posted 9 months ago #

    Perfect! Dang can't thank you enough for your time. For some reason that was not standing out to me at all.

Reply

You must log in to post.

About this Topic