We have been using the free verson of OceanWP wordpress theme for a long time in multiple websites. It’s a great theme with lots of customization options including the blog posts designs. This makes the posts designs similar in blog page, category and other archive pages. In some of the websites we had to add the blog posts on the home page. We wanted to make it similar like other blog post designs. But as OceanWP doesn’t provide an option or shortcode to add blog posts in any other pages, we have to use another plugin and change the design to match the OceanWP blog posts with the help of custom CSS, which is an additional work on each websites. Also, an extra plugin needs to be installed everytime.
So in this post we want to show you how you can create a custom shortcode for blog posts and show them in the same design like the blog and other archive pages.
PHP Snippet Part 1: Get OceanWP blog wrapper classes
OceanWP uses oceanwp_blog_wrap_classes() function to print the class names for blog wrapper. We will first use the codes from this function and create a new function to return the name of the classes.
/**
* @snippet Return OceanWP blog wrapper classes
* @author Anjan Phukan
* @theme OceanWP 1.9.0
* @tutorial https://www.zealopers.com/wordpress-tutorials/oceanwp-create-custom-shortcode-to-show-blog-posts/
*/
if ( ! function_exists( 'zlp_get_oceanwp_blog_wrap_classes' ) ) {
function zlp_get_oceanwp_blog_wrap_classes( $classes = NULL ) {
// RETURN CUSTOM CLASS IF SET
if ( $classes ) {
return $classes;
}
// ADMIN DEFAULTS
$style = oceanwp_blog_entry_style();
$classes = array( 'entries', 'clr' );
// ISOTOPE CLASSES
if ( $style == 'grid-entry' ) {
$classes[] = 'oceanwp-row';
if ( 'masonry' == oceanwp_blog_grid_style() ) {
$classes[] = 'blog-masonry-grid';
} else {
if ( 'infinite_scroll' == oceanwp_blog_pagination_style() ) {
$classes[] = 'blog-masonry-grid';
} else {
$classes[] = 'blog-grid';
}
}
}
// EQUAL HEIGHTS
if ( oceanwp_blog_entry_equal_heights() ) {
$classes[] = 'blog-equal-heights';
}
// INFINITE SCROLL CLASS
if ( 'infinite_scroll' == oceanwp_blog_pagination_style() ) {
$classes[] = 'infinite-scroll-wrap';
}
// ADD FILTER FOR CHILD THEMING
$classes = apply_filters( 'ocean_blog_wrap_classes', $classes );
// TURN CLASSES INTO SPACE SEPARATED STRING
if ( is_array( $classes ) ) {
$classes = implode( ' ', $classes );
}
// RETURN CLASSES
return esc_attr( $classes );
}
} This function will be used in the second part of the snippet below.
PHP Snippet Part 2: Create shortcode to show the blog posts in OceanWP design
/**
* @snippet Create shortcode to show the blog posts in OceanWP design
* @author Anjan Phukan
* @theme OceanWP 1.9.0
* @tutorial https://www.zealopers.com/wordpress-tutorials/oceanwp-create-custom-shortcode-to-show-blog-posts/
*/
add_shortcode('zlp_posts', 'zlp_posts_shortcode');
function zlp_posts_shortcode($atts, $content = null) {
global $post;
extract(shortcode_atts(array(
'num' => '3',
'order' => 'DESC',
'orderby' => 'post_date',
), $atts));
$args = array(
'posts_per_page' => $num,
'order' => $order,
'orderby' => $orderby,
);
$posts = get_posts($args);
$output = '';
if($posts){
$output .= '<div id="blog-entries" class="'.zlp_get_oceanwp_blog_wrap_classes().'">';
foreach($posts as $post) {
setup_postdata($post);
ob_start();
get_template_part( 'partials/entry/layout' );
$output .= ob_get_clean();
}
$output .= '</div>';
wp_reset_postdata();
}
return $output;
} Now the shortcode [zlp_posts] can be added to any page or post. This will show the 3 most recent blog posts in the same design set through the customizer. In this shortcode number of posts, order by and order value can be changed through attributes. For example, [zlp_posts num=4] will show the 4 most recent blog posts.
Where to add this snippet?
You can place this PHP snippet at the end of your child theme’s functions.php file. Please make sure you know what you are doing and take a backup of the file before making any changes. Please do not add custom code directly to your parent theme’s functions.php file because whenever you update the theme the codes will be deleted.
Did it work for you?
Please let us know in the comments section below if this tutorial worked as anticipated. The code was tested with the OceanWP version listed above.
Did it save your time and money? Please feel free to share it and/or Like us our Facebook Page.
I used code snippets and it worked for me thank you! Is there a way to get the posts by categories?
I figured it out!
Hi Serah, good to hear that. I believe that you used passed the category name as parameters. You may check this article if you need any help.