OceanWP: Create Custom Shortcode to Show Blog Posts

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.

Show blog posts in OceanWP design using custom shortcode
Show blog posts in OceanWP design using custom shortcode

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.

Feel free to contact us if you need help to implement this.

Share this post:
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments