WordPress.org

Forums

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

  1. dingoellis
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  5. dingoellis
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic