17 Jan Using Visual Composer to Design Your Theme
First off, I’m a huge fan of WP Bakery’s Visual Composer. Anything that could make laying a page out easier for a client is a huge plus. So, just to be clear, I’m completely biased when it comes to Visual Composer 😉
Last year while making a theme for a client, I realized that instead of making theme options( where the client could add their logo, ect..), why not just let Visual Composer do the dirty work? That way the end user could customize their header or footer with out knowing any code and be able to customize it further than theme options.
First, I had to add a custom post type called Theme Blocks(‘post_type=block’).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /// REGISTER Theme BLOCKS POST TYPE ///////////////////////////////////////////// function create_blocks_post_type() { register_post_type( 'blocks', array( 'labels' => array( 'name' => __( 'Theme Blocks' ), 'singular_name' => __( 'Theme Block' ) ), 'public' => true, 'capability_type' => 'post', 'menu_position' => 5, 'rewrite' => array('slug' => 'blocks'), 'supports' => array('title','editor','author') ) ); } add_action( 'init', 'create_blocks_post_type' ); |
Then in the backend of WP, you need to allow Visual Composer to load under that post type. You can find that under Visual Composer settings screen.
Next, I added the following code to my footer and header files in my theme:
1 2 3 4 | <?php // Load Theme Block $page_id = get_page_by_title( 'Header' ,'','blocks'); $page_data = get_page( $page_id ); echo apply_filters('the_content', $page_data->post_content); ?> |
Now if the client wishes to change the complete layout of their Header, they can simply design it in Visual Composer’s interface.
I also added a shortcode to my functions file to allow theme blocks to be called from Ubermenu. This allowed me to create submenu’s with all kinds of widgets and layout styles.
Here is the shortcode for pulling a theme block or any page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function block_insertPage($atts, $content = null) { $output = NULL; extract(shortcode_atts(array( "page" => '' ), $atts)); if (!empty($page)) { $page_id = get_page_by_title( $page ,'','blocks'); $page_data = get_page( $page_id ); //Next 2 lines, enables custom CSS to load $block_css = get_post_meta( $page_data->ID, '_wpb_shortcodes_custom_css', true ); echo '<style type="text/css">'. $block_css .'</style>'; $output = apply_filters('the_content', $page_data->post_content); } return $output; } add_shortcode('block', 'block_insertPage'); |
25 Comments