My home page displays all posts like below: enter image description here

I display in a grid that shows only 3 of them:

<div class="Jobs">

                if(have_posts()) {
                    $nbpostes = count(the_post());
                    while ($nbpostes < 3) :
                            echo'<div class="info_Job">';
                                echo '<h2>'.get_the_title().'</h2>';
                                echo get_the_post_thumbnail().'</div>';


I would like to know how I can turn each post as a link to another website when we click on the picture? And how can I define the type of post I want to display, for example: enter image description here

If someone can help, thanks.


2 Answers 2


You really should be using custom posts to do what you're trying to do, but to answer your question here's a solution (put this in your functions.php file):

add_shortcode( 'job-posts', 'rt_list_posts_by_category' );
function rt_list_posts_by_category($atts) {

  $a = shortcode_atts( array(
        'link1' => '#',
        'link2' => '#',
        'link3' => '#',
    ), $atts );

  // arguments for function rt_list_posts_by_category

  $taxonomy = 'jobs';

  // WP Query
  $args = array(
    'category_name' => $taxonomy,
    'post_type' => 'post',
    'posts_per_page' => 3,
  $query = new WP_Query( $args );

  if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); 
      if ($i==1) {
           $link= $a['link1'];
         }elseif($i==2) {
           $link= $a['link2'];
           $link= $a['link3'];      
      <div class="info_Job"><a href="<?php echo $link; ?>">
        <h2><?php the_title();?></h2>
        <?php the_post_thumbnail();?></a>
    <?php $i++;
  <?php else: ?>
    <h2>No posts found</h2>
  <?php endif;

Now on the page that you want to list the most recent 3 posts from the jobs category simply put this shortcode:

[job-posts link1="1" link2="2" link3="3"]

There are a few caveats.

This is a start for you, not a finished product. There is no security on the outputs at all.

For each link above replace what's in the quote with the link that you want to provide for each of the 3 jobs. ie. If you want the first job to go to www.example.com replace the 1 with http://www.example.com...like so (notice the addition of http:// which is required in this case or it will link to a page on your site):

[job-posts link1="http://www.example.com" link2="2" link3="3"]

It will directly take the user to that link for the 1st post, (no _blank was added)

I didn't do any checks in case there isn't a thumbnail either. You can add that if you need to.


Quick example we are using in HoverCraft inside index.php that fails gracefully, which will affect either your homepage and/or "Posts page" depending on your settings:

                // blog category
                $blog_category = get_theme_mod( 'hovercraft_blog_category', 'none' );
                // the query
                // https://wordpress.stackexchange.com/questions/145125/display-content-from-a-specific-category
                if ( $blog_category != 'none' ) {
                    $the_query = new WP_Query(array(
                        'category_name' => $blog_category,
                        'post_status' => 'publish'        
                } else {
                    $the_query = new WP_Query(array(
                        'post_status' => 'publish'        
                <?php if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>

Then simply register that category using Customizer:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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