Sort Wordpress posts with Jquery or meta_key and meta_value

Question

I intend to use the code below to sort and group by posts section of my Wordpress site. This would be applied to Home Page and Categories, where each post would feature the css class according to its section (secao_1, secao_2 or secao_3), with the parent div of these elements being id #content. The question I ask is: to what extent could this harm the performance of the site in its upload? Also, would it be ideal to add the code inside the HEAD tag, so that the loading is (from the visual point of view of the elements) faster? Another detail, each page would have 30 posts.

    var array = ['secao_1', 'secao_2', 'secao_3'];

    $.each(array,function(index,value){
       $('#content').append($('.'+value));
    });

After testing with Jquery, I’m trying to get to what I want through meta_key and meta_value of fields created with the ACF plugin, where I’m using the Loops below. The 1st and 2nd loop search for meta_values secao_1 and secao_2, respectively. The 3rd loop displays posts that do not have any section.

My question is whether this code can be improved. In addition, H2 tags end up appearing on page 2 of the category, even if there are no posts from their respective sections, how to avoid this?

<?php
global $query_string; parse_str( $query_string, $my_query_array ); 
$paged = ( isset( $my_query_array['paged'] ) && !empty( $my_query_array['paged'] ) ) ? $my_query_array['paged'] : 1;
$multi_type = array('post','post2');

// The Query
$query1 = new WP_Query(array(
    'paged'             => $paged,
    'post_type'         => $multi_type,
    'meta_key'          => 'sec_especial',
    'meta_value'        => 'secao_1',
    'category_name'     => 'featured'
));

// The Loop

echo '<h2>Seção 1</h2>';

    while ( $query1->have_posts() ) {
        $query1->the_post();
        get_template_part( 'content', get_post_format() );  
    }

    // Restore original Post Data
    wp_reset_postdata();

/* The 2nd Query (without global var) */
$query2 = new WP_Query(array(
    'paged'             => $paged,
    'post_type'         => $multi_type,
    'meta_key'          => 'sec_especial',
    'meta_value'        => 'secao_2',
    'category_name'     => 'featured'
));

// The 2nd Loop

echo '<h2>Seção 2</h2>';

    while ( $query2->have_posts() ) {
        $query2->the_post();
        get_template_part( 'content', get_post_format() );
    }

    // Restore original Post Data
    wp_reset_postdata();

/* The 3nd Query (without global var) */
$query3 = new WP_Query(array(
    'paged'        => $paged,
    'post_type'    => $multi_type,
    'category_name'=> 'featured',
    'meta_query'   => array(
        'relation'     => 'OR',
        array(
            'key'      => 'sec_especial',
            'value'    => false,
            'type'     => 'BOOLEAN'
        ),
        array(
            'key'      => 'sec_especial',
            'compare'  => 'NOT EXISTS'
        )
    )
));

// The 3nd Loop

echo '<h2>Seção 3</h2>';

    while ( $query3->have_posts() ) {
        $query3->the_post();
        get_template_part( 'content', get_post_format() );
    }

    // Restore original Post Data
    wp_reset_postdata();

    twentyfourteen_paging_nav();
?>

Answer 1

I’m not sure I understand your question, but come on:

To what extent this could harm the performance of the site in its upload?

In my view, the difference will be minimal. Remember that any instruction that will run on the client side (in your case, JavaScript) will have a cost, however small it is. In the case of 30 posts, and the way you built the instruction jQuery, will not be so costly. I would particularly avoid all this cost by doing this server-side assignment. If I understand correctly, you want to give a class to <div> which contains the post according to its category. The method in_category() checks if a post (within a loop) belongs to a category. In a generic way:

if (have_posts()){
    while(have_posts()){
        the_post(); ?>

        <div class="content <?php if(in_category('minha_categoria')) echo 'minha_classe');?>">
            <?php the_content(); ?>
        </div>
    }
}

This way, you assign the class according to the category of the post directly inside the loop, without burdening the client side.

In addition, the ideal would be to add the code inside the HEAD tag, so that the loading is (from the visual point of view of the elements) faster?

The "fast" upload involves a lot, not just the presence of the code in the header. The number of requests is what can basically cause you problems (plus, of course, misspelled code). Wordpress has a method to include scripts .js which is the wp_enqueue_script(). The following line, in your functions.php

wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );

Includes the script example.js that’s in the directory js, which in turn is inside the folder of your theme. It also arrow the version of the script to the 1.0.0, and included the script in the footer. Here a discussion about where scripts should be placed in your code.