Introduction
In this tutorial I want to show you how to integrate two of my favorite WordPress plugins. Custom Post Widget is an awesome plugin that allows you to create re-useable content blocks throughout your website. It creates a custom post type (Content Blocks) and makes the posts you create available via shortcode, WordPress editor button and widgets. The beauty of the content block concept is you can create a block of content in one place and display it in numerous places throughout a website. If you need to make changes, you just edit the content block post and all of the instances are updated. A couple examples of uses for this are:
- An About Us block.
- A Contact block.
And then there’s one of my favorite page builder plugins for WordPress, Visual Composer. Visual Composer is awesome for visually laying out pages and adding content. Here are just some of the many features:
- You’ve got access to tons of built in elements which are all responsive.
- There’s a great layout builder which let’s you drag and drop those elements around
- You can create complex layouts by easily splitting up a layout into columns.
- You can also create templates for any of your layouts to re-use them in any other page, post or custom post.
Check out the demo for more ideas of what you can do.
Details
Ok, so we’ve got these two great plugins but unfortunately Visual Composer doesn’t have a Content Block element built in. You could just use the Text Block element and then paste in a Content Block shortcode, but that’s no fun. I’d like to be able to have a Content Block element that I can drop in and select my desired content block right from the Visual Composer editor. Here’s how to do that.
First we need to make the Custom Post Widget post type public. By using this simple filter we can accomplish this easily:
/*-------------------------------------------------------------------------------
Make Content Blocks Public
-------------------------------------------------------------------------------*/
function filter_content_block_init() {
$content_block_public = true;
return $content_block_public;
}
add_filter('content_block_post_type','filter_content_block_init');
Next, please download and activate my custom Visual Composer Content Block Extension plugin. Rather than guide you through all the steps to do this yourself, this will be much easier. Essentially this plugin just takes advantage of the Visual Composer code that let’s you extend and create your own elements. You can find more on creating your own custom shortcodes in the Visual Composer knowledgebase.
Install and activate the plugin and you should now have a Content Block element in Visual Composer that loads your content blocks. Hit me up with any issues on Github or in the comments here. Enjoy!