In this tutorial we are going to add our custom widget to the BeTheme.
What is BeTheme?
BeTheme is an awesome, feature-rich WordPress responsive theme. It comes with a 100+ pre-made layouts and a wealth of features such as page builder, WooCommerce support, MegaMenu, multiple blog and portfolio layouts, custom pages and so on.
What is a widget?
Widgets are those little blocks that you can add to your sidebar and/or footer. More info on widgets here.
I’m using custom post types on my site and I’ve realized that I need to display some of my data in a widget. Unfortunately the BeTheme does not have a widget that can handle custom post types. In this example I will use one of my custom post types called “Articles”. This is similar to the default wordPress post type. I have created my custom post types with a plugin called “WCK – Custom Fields and Custom Post Types Creator“. For simplicity’s sake we will re-use the default “Recent Posts” widget that comes with the BeTheme. This will save us a lot of time.
My custom post type details:
- Name: articles
- Category taxonomy: artcats
It is very important that you get this right so double-check your custom post type details!
Files that we will edit:
- betheme/functions/widget-functions.php
- betheme/functions.php
Step 1
Create a new file in the ‘betheme/functions/‘ directory, and name it: widget-recent-articles.php
Open ‘betheme/functions/widget-recent-posts.php‘ and copy its entire content and paste it into the ‘betheme/functions/widget-recent-articles.php‘
Step 2
Open the following file in a text editor: ‘betheme/functions/functions.php‘
Find the following code:
// Widgets ---------------------------------------------------------------------- require_once( LIBS_DIR .'/widget-functions.php' ); require_once( LIBS_DIR .'/widget-flickr.php' ); require_once( LIBS_DIR .'/widget-login.php' ); require_once( LIBS_DIR .'/widget-menu.php' ); require_once( LIBS_DIR .'/widget-recent-comments.php' ); require_once( LIBS_DIR .'/widget-recent-posts.php' ); require_once( LIBS_DIR .'/widget-tag-cloud.php' );
right below add
require_once( LIBS_DIR .'/widget-recent-articles.php' );
Save this file and close it.
Step 3
Now we need to register the new widget. Open ‘betheme/functions/widget-functions.php‘
Find the following code (should be at the beginning)
function mfn_register_widget() { register_widget('Mfn_Flickr_Widget'); // Flickr register_widget('Mfn_Login_Widget'); // Login register_widget('Mfn_Menu_Widget'); // Menu register_widget('Mfn_Recent_Comments_Widget'); // Comments register_widget('Mfn_Recent_Posts_Widget'); // Posts register_widget('Mfn_Tag_Cloud_Widget'); // Tags
right below add
register_widget('Mfn_Recent_Articles_Widget'); // Articles
Step 4
Open ‘betheme/functions/widget-recent-articles.php‘
Here we’ll have to change a lot of things. We’ll go from top to bottom.
Find the following code
class Mfn_Recent_Posts_Widget extends WP_Widget {
change it to
class Mfn_Recent_Articles_Widget extends WP_Widget {
Find this code:
function Mfn_Recent_Posts_Widget() { $widget_ops = array( 'classname' => 'widget_mfn_recent_posts', 'description' => __( 'The most recent posts on your site.', 'mfn-opts' ) ); $this->WP_Widget( 'widget_mfn_recent_posts', __( 'Muffin Recent Posts', 'mfn-opts' ), $widget_ops ); $this->alt_option_name = 'widget_mfn_recent_posts';
Change it to
function Mfn_Recent_Articles_Widget() { $widget_ops = array( 'classname' => 'widget_mfn_recent_articles', 'description' => __( 'The most recent articles on your site.', 'mfn-opts' ) ); $this->WP_Widget( 'widget_mfn_recent_articles', __( 'Muffin Recent Articles', 'mfn-opts' ), $widget_ops ); $this->alt_option_name = 'widget_mfn_recent_articles';
Find the following code:
$args = array( 'posts_per_page' => $instance[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"]['count'] ? intval($instance['count']) : 0,
right below add
'post_type' => 'articles',
Find this code
if( $instance['category'] ) $args['category_name'] = $instance['category']; $r = new WP_Query( apply_filters( 'widget_posts_args', $args ) );
Replace it with
if( $instance['artcats'] ) $args['artcats_name'] = $instance['artcats']; $r = new WP_Query( apply_filters( 'widget_articles_args', $args ) );
Find this code:
$instance['category'] = strip_tags( $new_instance['category'] );
Replace it with:
$instance['artcats'] = strip_tags( $new_instance['artcats'] );
Find this code:
$category = isset( $instance['category']) ? esc_attr( $instance['category'] ) : '';
Replace it with:
$category = isset( $instance['artcats']) ? esc_attr( $instance['artcats'] ) : '';
Find this code:
<label for="<?php echo esc_attr( $this->get_field_id( 'category' ) ); ?>"><?php _e( 'Category:', 'mfn-opts' ); ?></label> <select id="<?php echo esc_attr( $this->get_field_id( 'category' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'category' ) ); ?>" class="widefat" > <?php $categories = mfn_get_categories( 'category' );
Replace it with:
<label for="<?php echo esc_attr( $this->get_field_id( 'artcats' ) ); ?>"><?php _e( 'Category:', 'mfn-opts' ); ?></label> <select id="<?php echo esc_attr( $this->get_field_id( 'artcats' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'artcats' ) ); ?>" class="widefat" > <?php $categories = mfn_get_categories( 'artcats' );
This will make sure that the widget form is displayed in the widget administration.
Save the file and upload it to your server, place the widget in one of your sidebars. The widget will have the same look and feel as the default recent posts widget, but it will display your custom post type content. Be careful when updating the theme, becuase the
- betheme/functions/widget-functions.php
- betheme/functions.php
files will be overwritten and you will have to make the modifications again.
[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
May you know how to create custom post type uder BeTheme? With all BeTheme features (muffin builder, vc builder, etc)