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.

Check out BeTheme here!

What is a widget?

Widgets are those little blocks that you can add to your sidebar and/or footer. More info on widgets here.

widgets

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]