0

I'm wanting to build a page that dynamically loads data into 'sections', very similar to how ebay loads its listings (see below):

enter image description here

As you can see I have highlighted each section in red, is there anyway to achieve this in Wordpress? I currently have Elementor Pro installed and was hoping there would be a widget that could provide this functionality but I'm yet to find anything.

  • where is the data coming from? according to that there would be entirely different solutions to do this, which may already exist or not. – majick May 29 at 2:43
  • @majick Data is coming from an API I have built. I'm fairly new to Wordpress hence my lack of knowledge. Not sure what other tags to use on this post too. – M0rty May 29 at 3:33
  • I guess it depends on whether you want to pull the data from the API each pageload and display it dynamically, or sync the data regularly into custom posts so it is cached... in the first case you could have a shortcode which outputs a template, in the second you could create a custom archive page template that displays the posts. neither are particularly easy options depending on your skill level. – majick May 29 at 4:41
  • @majick I would want to pull the data from the API each pageload. Would you know a tutorial where I could learn how to create a shortcode that outputs a template? – M0rty May 29 at 4:45
1

You can create a shortcode function to use in your content eg. [data-display] which you would place in your custom plugin, child theme's functions.php, or /wp-content/mu-plugins/ folder:

add_shortcode('data-display', 'custom_api_data_display');
function custom_api_data_display($atts) {

    // for whatever you API call function is
    // you may want check $_REQUEST or shortcode $atts to modify
    $args = array('some_key' => 'some_value', 'some_key2' => 'some_value2');
    $data = custom_api_data_request($args);

    if (count($data) > 0) {
        $html = '<div class="result-container">';
        foreach ($data as $result) {
            $html .= '<div class="single-result">';

                // output whatever data result keys you like here
                // this is just a simple example with image, title and description
                $html .= '<img class="result-image" src="'.$result['image_url'].'">';
                $html .= '<div class="result-title">'.$result['title'].'</div>';
                $html .= '<div class="result-description">'.$result['description'].'</div>';

            $html .= '</div>';
        }
        $html .= '</div>';
    } else {
        $html = '<p>No results found.</p>';
    }

    return $html;
}

Noting that $atts are the shortcode attributes passed in the content, eg. [data-display category="cat1"] will give $atts as array data of array('category' => 'cat1');

Of course you would need to add further layers to enable search filtering functions, and these parameters could be checked via $_REQUEST

  • Perfect, thank you that appears to be working. Surprised however that there's no simple plugin for this. Would have thought it was quite a common request. – M0rty May 29 at 6:28
  • No problemos, well pretty much plugins are built around a specific use case API, much like you are doing... I don't see how a plugin could more generally account for data that it doesn't really know the format of. If you went the post-sync route maybe but you'd probably ending up writing the template in a similar anyway. – majick May 29 at 10:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.