WordPress.org

Ready to get started?Download WordPress

Forums

Spun
How to list old posts on home page without an arrow (26 posts)

  1. Selinvarol
    Member
    Posted 6 months ago #

    Hello,

    Website:
    Blog

    I would like to see my old posts listed on website homepage with a button #old posts# like in my blog. There will be 10 posts on home page and for the previous posts I dont want to use the arrow but to click on # old posts # button. which is in Turkish Language Eski Yazilar in my blog.

    I will remove arrows:

    #nav-below {
    display: none;
    }
    How I will add old posts button in orange color?

    Thanks,
    Selin.

  2. Andrew
    Forum Moderator
    Posted 6 months ago #

    .hentry.no-thumbnail {
     background: #d3643b;
    }
  3. Selinvarol
    Member
    Posted 6 months ago #

    Done.
    Thanks Andrew.

    The main problem was to move old posts under home page with a button as it is in my blog.
    I removed the arrows and keep 5 sticky circles on homepage and wuld like to keep all posts under homepage with a button named: old posts.

    Example: http://cevizhane.wordpress.com/

  4. Andrew
    Forum Moderator
    Posted 6 months ago #

    What's the criteria for posts to be "old"?

  5. Selinvarol
    Member
    Posted 6 months ago #

    I have made 5 circles sticky on homepage as an introduction for the business. In the mean time I will be posting recipes and when people visit the site I dont want them to leave because they do not see any entry. So all posts up to today and the upcoming ones needs to be listed on homepage with a Older Posts button like in my blog.
    That way I hide them but still it is easy to click and list all the posts.
    Hope it is clear.

  6. Andrew
    Forum Moderator
    Posted 6 months ago #

    So all posts up to today and the upcoming ones needs to be listed on homepage with a Older Posts button like in my blog.

    So the issue is your old posts are not appearing on the Home page at all?

  7. Selinvarol
    Member
    Posted 6 months ago #

    Currently yes. Because I hide the arrow also and limit my homepage with 4 sticky post and 1 normal post.

  8. Andrew
    Forum Moderator
    Posted 6 months ago #

    In the dashboard go to Tools->Reading and change the number next to the "Blog pages show at most" text. This should control how many "circles" appear on your homepage.

  9. Selinvarol
    Member
    Posted 6 months ago #

    Ok. This makes all the posts appear if I write 50 for example.
    But what I am trying to do is to keep only 5 posts on homepage and other posts will be hidden on homepage and can be reached with Old posts button.

    This blog has the button in homepage orange color just above the plus sign

  10. Andrew
    Forum Moderator
    Posted 6 months ago #

    What do you mean as "old", what in your words is an old post that shouldn't show on the Home page?

  11. Selinvarol
    Member
    Posted 6 months ago #

    I mean the posts, images already posted and there is a restriction only five circles will be on home page. The future posts will be also listed on home page bu hidden with that button.

    Is it not possible to make like in the blog?

  12. Andrew
    Forum Moderator
    Posted 6 months ago #

    So, all but the first five posts should be hidden?

    Is it not possible to make like in the blog?

    Yes, but the most important thing when asking for these requests on WordPress.org forums is to make sure volunteers are absolutely clear on what you want.

  13. Selinvarol
    Member
    Posted 6 months ago #

    I think there is a misunderstanding.Sorry if I culdnt explained well but I have revised my wordpress.com blog and trying to make exactly the same on my website.

    5 posts on homepage these are sticky.
    All other posts will be under ~old Posts~button. When I press that button I will be able to see all posts.

  14. Andrew
    Forum Moderator
    Posted 6 months ago #

    In your Child Theme folder do you have a file called "functions.php"?

  15. Selinvarol
    Member
    Posted 6 months ago #

    I have copied from actual spun theme which is

    [Redacted]

  16. Andrew
    Forum Moderator
    Posted 6 months ago #

    Sorry I've redacted that because it's too many lines of code, please use PasteBin to share large amounts of code instead: http://pastebin.com

  17. Andrew
    Forum Moderator
    Posted 6 months ago #

    I have copied from actual spun theme

    Did you only recently do this?

  18. Selinvarol
    Member
    Posted 6 months ago #

    yes just now.

  19. Selinvarol
    Member
    Posted 6 months ago #

  20. Andrew
    Forum Moderator
    Posted 6 months ago #

    Remove all code from your Child Theme functions.php file - otherwise your website will likely break if not now but in the future.

  21. Andrew
    Forum Moderator
    Posted 6 months ago #

    Only put this in it for now:

    <?php
    
    // Your customisations go here
    
    ?>
  22. Selinvarol
    Member
    Posted 6 months ago #

    ok.

  23. Andrew
    Forum Moderator
    Posted 6 months ago #

    Okay now outside of code, go to your website's files and folders.

    You need to create a folder in your Child Theme called "js". So, your Child Theme directory structure would be this:

    /wp-content/themes/spunv2/js/

    And then within that "js" folder create a file named "hide-old-posts.js" - importantly with the ".js" extension. So, your Child Theme directory structure with the new file would be this:

    /wp-content/themes/spunv2/js/hide-old-posts.js
  24. Andrew
    Forum Moderator
    Posted 6 months ago #

    Then open your "hide-old-posts.js" file and put this code into it:

    $=jQuery;
    
    // Get the non-stiky posts
    var nonStickyPosts = $('.blog .hentry:not(.sticky)');
    
    // Hide all posts that aren't stickies
    nonStickyPosts.hide();
    
    // Add your button that'll toggle the old posts
    $('#content').append('<a href="#" id="toggle-old-posts">Old posts</a>');
    
    // When that toggle button has been clicked on
    $('#toggle-old-posts').click(function(){
    
      //Toggle the non-sticky posts
      nonStickyPosts.toggle();
    
    });

    [Note that this doesn't style the toggle button - we can do that with CSS later]

  25. Selinvarol
    Member
    Posted 6 months ago #

    I did all.

  26. Andrew
    Forum Moderator
    Posted 6 months ago #

    Now in your Child Theme functions.php add a function that'll load this "hide-old-posts.js" file:

    <?php
    
     // Your customisations go here
     function hideOldPosts() {
            wp_enqueue_script( 'hide-old-posts', get_stylesheet_directory_uri() . '/js/hide-old-posts.js', '', '1.0', true );
     }
    
     add_action( 'wp_enqueue_scripts', 'hideOldPosts' );
    
    ?>

Reply

You must log in to post.

About this Theme

About this Topic