Grow your CSS skills. Land your dream job.

Best way to apply tabs/sorting in WordPress

  • # January 3, 2011 at 3:49 pm

    I was hoping for some advice on the best way to go about using tabs within WordPress.

    I have 4 categories which I’d like to separate using tabs, but if I use tabs I’m afraid that it will slow the page load down as all 4 loops would have to load in their respective posts within each tab. The first tab is ‘All’ and then the following 3 are categories, but essentially each post would be loaded once by the ‘All’ loop and then again in each category before the page fully loads.
    Would it be a better idea to use 1 loop along with an if statement which has a variable that is changed onclick by each tab, when each tab is pressed it changes the variable which changes the category within ‘query_posts’ and reruns the loop. The first option would be easier to set up but I’m worried about load time once the number of posts gets high.

    Anyone got any suggestions/advice? Or just their 2 cents. To give you an idea of what I’m trying to achieve please check out the Fantasy Interactive site here: http://www.f-i.com/work If you click on ‘Sort our work’ on the top of the middle column then you get the gist of it.

    Many thanks in advance.

    # January 3, 2011 at 4:30 pm

    So after a little research I realized that I can’t rerun the loop with a JS variable without refreshing the page, so that option is out. Would using AJAX to bypass a page refresh and save on initial page load work in this situation?

    # January 3, 2011 at 7:27 pm

    You most certainly can run a loop again without refreshing a page

    # January 4, 2011 at 4:12 am

    Maybe you could adapt this to your cause: http://css-tricks.com/examples/FilteringBlocks/

    Load all of the posts in one loop, then filter based on category?

    # January 4, 2011 at 12:17 pm

    Hey guys thanks for the feedback.

    @noahgelman, I didn’t think it was possible to pass a javascript variable to a variable within a php loop and then rerun it using that variable without refreshing the page, as the PHP is parsed server side and javascript parsed client side. Am I wrong on that? I am not too experienced with PHP beyond what I use with WordPress.

    @clokey2k, thanks for that link, looks like a great solution, I’m going to try that out using the tag names within each post’s post_class to categorize them.

    Thanks again for the replies!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".