Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Page to show example of the shortcode to post list
<?php
/**
* Template Name: Custom Template
*/
function posts_lists($atts) {
// Attributes
$atts = shortcode_atts(
array(
'post_type' => 'article',
'per_page' => '-1',
'orderby' => 'date',
'meta_position' => 'bottom',
'show_excerpt' => true,
),
$atts,
'video_embed'
);
$post_type = explode( ',', $atts['post_type'] );
$posts = new WP_Query(array('post_type' => $post_type, 'orderby' => $atts['orderby'], 'order' =>'ASC','posts_per_page' => $atts['per_page']));
var_dump($post_type);
if ($posts->have_posts()):
$output = '';
$output.= '<div class="container">';
$output.= '<div class="row inner-content-width">';
while ($posts->have_posts()):
$posts->the_post();
$post_thumbnail_id = get_post_thumbnail_id();
$post_thumbnail_url = wp_get_attachment_url($post_thumbnail_id);
$position = ( $atts['meta_position'] == 'left') ? 'pull-left' : '';
$bool = filter_var($value, FILTER_VALIDATE_BOOLEAN);
$excerpt = ( filter_var($atts['show_excerpt'], FILTER_VALIDATE_BOOLEAN) ) ? '<p class="excerpt">' . get_the_excerpt() . '</p>' : '';
$output .= '<div class="col-xs-12 col-sm-6 post">
<a class="overlay" href="' . get_the_permalink() . '"></a>
<div class="image '.$position.'">
' . get_the_post_thumbnail(null, null, array('class' => 'img-responsive')) . '
</div>
<div class="copy-slug">
<h3 class="header sans">' . get_the_title() . '</h3>' . $excerpt . '
</div>
</div>';
endwhile;
$output.= '</div><!-- row -->';
$output.= '</div><!-- container -->';
else:
$output = '<p class="bg-danger">Not Activities Found!</p>';
endif;
wp_reset_postdata();
return $output;
}
add_shortcode('posts-list', 'posts_lists');
get_header();
?>
<style>
body {
font-family: 'Bitter', 'Georgia', serif;
font-weight: 400;
}
.inner-content-width {
width: 960px;
margin: 0 auto;
padding: 10px 0px;
}
.post {
margin-bottom: 40px;
overflow: hidden;
}
.post .image {
width: 44%;
margin-right: 6%;
/*float: left;*/
position: relative;
margin-bottom: 10px;
}
a.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
/* Makes sure the link doesn't get underlined */
z-index: 100;
/* raises anchor tag above everything else in div */
background-color: white;
/*workaround to make clickable in IE */
opacity: 0;
/*workaround to make clickable in IE */
filter: alpha(opacity=1);
/*workaround to make clickable in IE */
cursor: pointer;
}
a ~ .image {
opacity: .9;
}
a:hover ~ .image {
opacity: 1;
}
.post .copy-slug h3 {
text-transform: uppercase;
font-family: 'Oswald', 'Impact', sans-serif;
font-weight: 400;
font-size: 1.2em;
line-height: 1.2em;
margin-top: 0px;
margin-bottom: 5px;
}
.post .copy-slug .excerpt {
padding-top: 15px;
font-size: .88em;
line-height: 1.5em;
}
.post .copy-slug:before {
content: '';
margin-left: 50%;
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: -moz-linear-gradient(rgba(255, 255, 255, 0) 150px, white);
background: -ms-linear-gradient(rgba(255, 255, 255, 0) 150px, white);
background: -o-linear-gradient(rgba(255, 255, 255, 0) 150px, white);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(1.5, rgba(255, 255, 255, 0)), to(white));
background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 150px, white);
background: linear-gradient(rgba(255, 255, 255, 0) 150px, white);
}
</style>
<?php
echo do_shortcode('[posts-list post_type="spirits, articles" per_page="10" show_excerpt="false"]');
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.