6.7 C
London
Tuesday, November 12, 2024

Display Blogposts Using WordPress Shortcode

- Advertisement -spot_imgspot_img
- Advertisement -spot_imgspot_img

WordPress shortcode are small pieces of code that you can use to add various features and functionalities to your website. One of the most common uses of shortcodes in WordPress is to display blog posts or groups of posts on specific pages or posts on your website.

To use the WordPress shortcode to display a specific post, you need to know the post ID of the post you want to display. You can find the post ID by going to Posts > All Posts in your WordPress dashboard and hovering over the post you want to display. The ID will appear in the URL in your browser’s address bar.

Once you have the post ID, you can insert the following shortcode into the page or post where you want to display the post: [display-posts id="your-post-id"] Replace “your-post-id” with the ID of the post you want to display.

To display the blogs of any post type you must know how to add a shortcode in WordPress. You need to follow the below steps to display blogposts using shortcode:

  • Register a shortocode in functions.php
  • Use attributes in shortcode
  • Pass query argument to the shortcode

One need to use this filter “add_shortcode()” to register the shortcode.
This is how our shortcode will be used “[loop_shortcode the_query=”showposts=100&post_type=page&post_parent=453″]

Register a shortocode in functions.php

The Shortcode API is a simple set of functions for creating WordPress shortcodes for use in posts and pages.
Below code snippets will help to register the shortcode in functions.php

function custom_query_shortcode($atts) { 
    // Defaults 
    extract(shortcode_atts(array( 
      "the_query" => '' 
    ), $atts)); 
   } 
   add_shortcode("loop_shortcode", "custom_query_shortcode");

Use attributes in shortcode

One can create attributes for the shortcode as per requirements. We have created one attribute to pass query parameters and format the query before executing

function custom_query_shortcode($atts) { 
     // Defaults 
     extract(shortcode_atts(array( 
     "the_query" => '' 
     ), $atts)); 
  
    //do format wp_query argument 
    $the_query = preg_replace('~*([0-9a-f]+);~ei', 'chr(hexdec("\1"))', 
    $the_query); $the_query = preg_replace('~*([0-9]+);~e', 'chr(\1)', $the_query); 
  } 
 add_shortcode("loop_shortcode", "custom_query_shortcode");

Pass query argument to the shortcode

One need to pass the query to the attributes with the query parameters following WordPress standard. Below is the shortcode functions that will go in functions.php file and nee to use the shortcode as mentioned above to fetch the blogs as per the query you have passed in the form of attribute.

function custom_query_shortcode($atts) {
                 // Defaults
                 extract(shortcode_atts(array(
                 "the_query" => '' 
                 ), $atts));

             //do format wp_query argument
             $the_query = preg_replace('~*([0-9a-f]+);~ei', 'chr(hexdec("\1"))', $the_query);
             $the_query = preg_replace('~*([0-9]+);~e', 'chr(\1)', $the_query);

            // query is made
            query_posts($the_query);

            // the loop
            if (have_posts()) : while (have_posts()) : the_post();
            $temp_id = $post->ID;
            $temp_title = get_the_title($post->ID); 
            $temp_link = get_permalink($post->ID); 
            $temp_content = get_the_content($post->ID);
            if ( has_post_thumbnail() ) {
                  $temp_thumb = get_the_post_thumbnail($post->ID);
            } else {
                $temp_thumb = "" ;
           }

           // output all findings - 
           $output .= "HTML WITH ABOVE DYNAMIC DATA";
        endwhile; else:
            $output .= "not found.";
            endif;

           wp_reset_query();
         return $output;
}
add_shortcode("loop_shortcode", "custom_query_shortcode");

- Advertisement -spot_imgspot_img
Latest news
- Advertisement -spot_img
Related news
- Advertisement -spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here