Creating Inspector Controls for Shortcode attributes – Part 1

This is next part in the series of Converting Shortcodes to Gutenberg Blocks.

Shortcodes have been part of WordPress for a long time. As the new block editor is gaining users and popularity, converting these shortcodes to blocks will be helpful. Gutenberg blocks are not only useful for creating custom page layouts, but also make the website building experience better.

When Gutenberg blocks can be used in place of shotcodes, it improves the overall user experience. As we are making this transition to blocks, we need to pay attention and make sure that the inspector controls are user friendly.

When converting a shortcode to a block, one of the first things to do is to figure out how you want to display the options in the sidebar. There is no one size fits all option here. The type of user interface we want to show ideally depends on the type of attribute.

I will use the business directory block as an example as it has many different types of attributes. Each attribute is shown in the Inspector Controls to give the user finer control over displaying their business directory listings.

Controls for simple list attributes

Some of the attributes like format, text, orderby, etc were easy to build in the block sidebar. These have a few static options to choose from and could be put into a select dropdown.

Options in the Shortcode:

'format' => 'list',  // options: list, grid2, grid3, grid4, responsive
'text' => 'excerpt', // options: excerpt, description, none
'orderby' => 'title', // options: date, modified, menu_order, rand, membership_level

Format options control in the block – all the available options are listed in the SelectControl.

const formatOptions = [
    { label: 'List', value: 'list' },
    { label: '2 Columns', value: 'grid2' },
    { label: '3 Columns', value: 'grid3' },
    { label: '4 Columns', value: 'grid4' },
    { label: 'Responsive', value: 'responsive' },
 ];
<SelectControl
    label="Directory Layout"
    value={ format }
    options= { formatOptions }
    onChange = {setDirectoryLayout}
/>
const setDirectoryLayout = format => {
    props.setAttributes( { format } );
};

Options with boolean values in the shortcode

Many of the shortcodes we use have attributes that take in boolean options – true or false. It might also be a ‘yes’ or ‘no’ to make it easier for users to understand and use in the shortcodes. The best way to display them in the block sidebar, is to use a toggle button. You can also use a simple dropdown which is easier, but I feel a toggle button is more intuitive.

The business directory shortcode has the option to display the alphabet list at the top so that businesses can be sorted by their first letter.

Image showing the businesses list with the option to sort by first letter

The shortcode has it as a Yes or No option. In the block, the option can be simply switched on or off using a toggle button.

'alpha'	=> 'no',	//options: yes, no
'show_category_filter' => 'no', //options: yes, no

Toggle options in the block inspector controls.

The toggle button did present a couple of challenges. The toggle button gives the output as true or false, but our shortcode needs the values ‘yes’ or ‘no’. So, the true or false values need to be converted to string values before being passed into our shortcode function.

Another issue was that the toggle attribute needs to be the type ‘boolean’ and the shortcode attribute was the type ‘string’.

One of the important things to remember when converting shortcode to blocks is that we need to keep the name and the type of the attribute the same. As the original attribute cannot be modified in the block, I added another attribute ‘alphaToggle which is a boolean.

alphaToggle: {
  type: 'boolean',
  default: false,
},

The toggle button is displayed using the alphaToggle. When the option is toggled, the alpha option is set which gets passed onto the shortcode function.

<PanelRow>
    <ToggleControl
	label={ __( 'Enable Alpha Search' ) }
	checked={ alphaToggle }
        onChange = {setAlpha}
    />
</PanelRow>

const setAlpha = alphaToggle =>{
        props.setAttributes({alphaToggle})
        !! alphaToggle ? 
        __( props.setAttributes({alpha: 'yes'}) ) : __( 
        props.setAttributes({alpha: 'no'}) );
        
    };

This just needed a little bit of tweaking to make it more user friendly and intuitive. I also feel that the toggle buttons are easier to use than a dropdown sometimes as we can visually see which ones are “on” and which ones are “off”.

In the next part, I will cover the dynamic dropdowns for custom taxonomies and displaying toggle buttons for each option in a single shortcode attribute.

Block Editor Updates in WP 5.5

WordPress 5.5 released on August 11th, features a few big updates for the block editor. The editor interface has some noticeable changes. The block directory is now available to install individual blocks with a single click along with the block patterns which provide a few layout options.

Editor Interface

The block editor interface has been improved a lot. It is more structured, with bigger buttons and a clean interface. The blocks don’t seem to be cluttered anymore.

The ‘Add Button (+)’ on the top shows the blocks, block patterns and reusable blocks. In the previous version, the blocks were shown sorted by category in an accordion, but now though the blocks are displayed by category, they are not in an accordion anymore. I liked the accordion way of displaying the blocks. It was easier to get to the specific blocks I needed.

The list of blocks looks less cluttered, but I would have liked if the accordion didn’t go away.

Block Menu in WP 5.4

Block Menu in WP 5.4

Block Menu in WP 5.5

Block Menu in WP 5.5

The add button next to the blocks in the editor shows recently used blocks and an option to search for blocks or browse all the blocks.

Easy to preview posts in multiple device widths

There is now an option to preview your post in Desktop, Tablet or Mobile inside the editor making it easy to build responsive pages.

Tablet preview in editor
Mobile preview in editor

Select parent blocks easily

One thing that annoyed me in the previous version is not being able to select the parent block easily. This has been made really easy in WP 5.5. You can just hover over the block toolbar to see the parent block and select it.

Moving Blocks

Moving blocks is a little different in this version. The previous version had a clear handle next to the block to move it. That handle is not available now, but you can use the up/down arrows or the ‘Move To’ option to move the blocks.

With the Up/Down arrows, click and hold on the arrows in the toolbar. That lets you move the block around.

There is a ‘Move To’ option you can see when you click on the three dots to the right in the block toolbar. Click on the ‘Move To’ option and use the arrow keys on the keyboard to move the block.

You can also get to the ‘Move To’ option entirely using the keyboard.

Block Directory

This is one of the cool features of the editor in this version. Block directory is similar to the WordPress plugin directory, but just for blocks. Until now, if we wanted to find a new block to use, we had to search through the available plugins and install them. These plugins usually have multiple blocks and even though we don’t need all those blocks, they are on our site as part of the plugin.

Block directory makes it easy to search for the particular block we need and install it without leaving the editor. These blocks are essentially plugins which can be found in the plugins page and deactivated and deleted from that page if we don’t need them.

Currently, there are only a few blocks available in the block directory, but the list is growing.

Block Patterns

Block patterns are groups of blocks that can be added to your post or page with a single click. Once you add the pattern, you can edit it as you see fit. These patterns give you simple layouts using which you can quickly build page and post layouts.

Themes and plugins can add new block patterns too which will give us more options to build easy page layouts.

Block Patterns in WP 5.5

Inline image editing

I think this is one of the best features of this version. Being able to edit images inline in the editor makes it very easy for the users. You can now crop rotate and zoom the images after you add the image to the editor.

After you add the image, you can see a crop button in the toolbar. Clicking on the crop button gives you options to zoom in, rotate or change the aspect ratio of the image.

After editing the image, click ‘apply’ to save the changes. The image gets saved as a new image.

Let me know what your favorite feature of this release is in the comments!

Styling CSS grid responsive layouts based on the number of columns on the page

Building responsive layouts using CSS Grid and Flexbox is easy. Few lines of CSS and the columns resize nicely based on the width of the page. CSS Grid or Flexbox takes care of resizing and the columns nicely stack as needed in smaller view ports. We can style these columns using media queries for different browser widths. If we want to add styles based on the number of columns showing on the page though, we need to use JavaScript.

When I was working on converting the Business Directory shortcode to a Gutenberg block, we added options to select the image size. This was a new option which was not in the shortcode. So, the users could choose the number of columns, the image to display (featured image or logo) and the size of the image along with other options while displaying their business directory listings.

They have the option to choose from 1, 2, 3 or 4 column layout or a responsive layout. When it came to styling the images and the text around it, it was not easy. We had to maintain consistency between the specific column layouts and the responsive layout.

The columns in the responsive layouts change based on the width of the page or the content width. We wanted the listings to look consistent in all formats. If the page had only one column, it should show similar to the one column layout, and if the page had 2, 3 or 4 columns, it should show similar to the other column layouts respectively.

This could probably be done using media queries, but it is not easy. The number of columns showing on the page depends on the width of the device and the with of  the page itself, or to be specific, the content width of the page. If we used the Twenty Twenty theme with the default page layout, even on a desktop, the content width is smaller and the number of columns would be different when using the responsive layout.

Business Directory layouts with default and full width pages

Business Directory listings with Twenty Twenty theme using the default layout
Business Directory listings with Twenty Twenty theme using the full width layout

Adding custom classes using JavaScript

To make the styling of the responsive columns easier, I used JavaScript to add specific classes to the responsive columns. gridColumnCount gives us the number of columns being displayed on the page. The outputGridData function adds the desired classes the specific selector. This function is being called when the page loads and also when the browsers is resized. So, the columnCount gets updated when the page width changes.

function getGridData () {
  // calc computed style
const gridComputedStyle = window.getComputedStyle(businesslist);

  return {
    // get number of grid rows
    gridRowCount: gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").length,
    // get number of grid columns
    gridColumnCount: gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").length,
    // get grid row sizes
    gridRowSizes: gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").map(parseFloat),
    // get grid column sizes
    gridColumnSizes: gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").map(parseFloat)
  }
}

window.addEventListener("DOMContentLoaded", outputGridData);
window.addEventListener("resize", outputGridData);

function outputGridData () {
  const gridData = getGridData();
  const columnCount = gridData.gridColumnCount;
  var images = document.querySelectorAll("#businesslist.responsive.cd_block .business .description a");
  //alert(images);
  for (i = 0; i < images.length; ++i) {
    images[i].className = "grid"+columnCount;
  }
}

The code adds the class grid1, grid2 etc to the specific selector. In this case, it is the “a” tag that holds the featured image or the logo. Once the classes are in place, adding styles is simple.

This ensures that no matter the page width, content width or the device width, the layouts will be consistent based on the number of columns being displayed. The image styles are dependent on the number of columns being displayed on the page. If the screen width is 1200px, but only two columns are displayed, images get floated to the left and the content floats around it.

MailChimp lists using Ajax

I recently built a Mailchimp addon plugin for the Chamber Dashboard plugins. The plugin uses the Mailchimp api key to connect to Mailchimp and display the lists in the plugin options page. The admin can select a Mailchimp list to which new member emails can be automatically added.

Without Ajax, the user would have to save the api key first to display the Mailchimp lists dropdown. After they select the list, they would have to save the options again so that their list gets saved.

Using Ajax, it is easy to give them an option to save the api key temporarily and display the Mailchimp list. Once the user selects the list, they can save the options all at once.

Here is how to implement the Ajax functionality. The first step is to add the fields for api key and the MailChimp list.

Here is the callback function that renders the api input field.


function cdash_mailchimp_api_key_render($args){
  //specifying the ajax url
  $ajax_url = admin_url( 'admin-ajax.php' );
  $options = get_option('cdash_addon_options');
  if(!isset($options['cdash_mailchimp_api_key'])){
    $options['cdash_mailchimp_api_key'] = '';
  }
  ?>
  <input type='text' name='cdash_addon_options[cdash_mailchimp_api_key]' id="cdash_mailchimp_api_key" value='<?php echo $options['cdash_mailchimp_api_key']; ?>'>
  <br /><span class="description"><?php echo $args[0]; ?></span><br />
  <?php
  //Displaying the save button only if the api key is empty
  if($options['cdash_mailchimp_api_key'] == ''){
    ?>
    <button type="button" name="cdashmc_save_api_key" class="cdashmc_button" id="cdashmc_save_api_key">Save Api Key</button><span class="cdashmc_success_message save_api"></span>
    <?php
  }else{
    //if api key is not empty, we are displaying the Delete button
    ?>
    <button type="button" name="cdashmc_delete_api_key" class="cdashmc_button" id="cdashmc_delete_api_key">Delete Api Key</button><span class="cdashmc_success_message delete_api"></span>
    <?php
  }
}

The api key render form has a couple of additional buttons. The ‘Save Api Key’ is displayed only if the api key is not saved in the database. If there is a valid Api Key, the ‘Delete Api Key’ is displayed.

The ‘Save Api Key’ button also triggers the JavaScript. When the Save button is clicked, the script checks if there is an api key. If there is a valid api key, it generates a drop down of lists from Mailchimp associated with that api.

The api key from the field is used to connect to MailChimp to get the lists.

Here is the JavaScript and Ajax functions that do the trick.

jQuery(document).ready(function($){
  // When the api key is saved, get the list drop down
  $('#cdashmc_save_api_key').click(function (event) {
    event.preventDefault();
    var api_key = $('#cdash_mailchimp_api_key').val();
    if(api_key == ''){
      $(".cdashmc_success_message.save_api").text(" Please enter an api key.");
    }else{
      $.ajax({
        url: ajaxurl,
        type:'post',
        data: {
          'action': 'cdashmc_list',
          'cdash_mailchimp_api_key': api_key,
        },
        beforeSend: function(){
          // Show loading container
          $("#cdashmc_ajax_loader").css("display", "block");
          $(".cdashmc_api_key_msg").css("display", "none");
        },
        success: function(response){
          $("#cdashmc_list").replaceWith(response);
          $(".cdashmc_api_key_msg").css("display", "none");
          $(".cdashmc_success_message.save_api").text(" API key successfully saved.");
        },
        complete:function(data){
          // Hide image container
          $("#cdashmc_ajax_loader").hide();
          $('#cdashmc_save_api_key').hide();
        }
      });
    }
  });

  $('#cdashmc_delete_api_key').click(function (event) {
    $("#cdash_mailchimp_api_key").val("");
    $("#cdash_mailchimp_list").hide();
    $(".cdashmc_list_desc, .cdashmc_check_api_msg").hide();
    $("#cdashmc_api_delete_notice").css("display", "block");
  });

});

The Ajax function is calling the cdashmc_list function which connects to the server and gets the results back to the Ajax. cdashmc_list calls the function that uses the api to get the Mailchimp lists and send the list as a response back to the Ajax function. Here is the cdashmc_list function.

//Function to display the Mailchimp lists via Ajax
//Used the code from https://rudrastyh.com/mailchimp-api/get-lists.html to display the Mailchimp lists using the api key
function cdashmc_list(){
    $options = get_option('cdash_addon_options');
  if(isset($_POST['cdash_mailchimp_api_key'])){
    $api_key = $_POST['cdash_mailchimp_api_key'];
  }else{
    $api_key = '';
  }
  $response = '';
  if($api_key == ''){
    $response = "No api key found";
  }else{ //if there is an api key
    $data = array(
    	'fields' => 'lists', // total_items, _links
    );
    $url = 'https://' . substr($api_key,strpos($api_key,'-')+1) . '.api.mailchimp.com/3.0/lists/';
    $result = json_decode( cdashmc_mailchimp_curl_connect( $url, 'GET', $api_key, $data) );
    if( !empty($result->lists) ) {
      $response = "<select name = 'cdash_addon_options[cdashmc_list]'>";
      $response .= "<option value=''>Select your Mailchimp List</option>";
      foreach( $result->lists as $list ){
        if ( $options['cdashmc_list'] == $list->id ){
          $selected = 'selected="selected"';
      }else{
          $selected = '';
      }
        $member_count = $list->stats->member_count;
        $response .= "<option value='$list->id' $selected>$list->name ($member_count)</option>";
      }
      $response .= "</select><br />";
      $response .= "<span class='description'>Your members will be subscribed to this list.</span>";
    }elseif ( is_int( $result->status ) ) { // full error glossary is here http://developer.mailchimp.com/documentation/mailchimp/guides/error-glossary/
    	$response = "<strong> $result->title :</strong> $result->detail";
    }else{
      $response = "<p class='cdashmc_check_api_msg'>Please check your api key.</p>";
    }
    //$response = $api_key;
  }
  die($response);
}
/We only need this as we are doing this only for the logged in users
add_action( 'wp_ajax_cdashmc_list', 'cdashmc_list' );

The last function we need is the cdashmc_list_render. The ‘<div id=”cdashmc_list”></div>’ which displays the Ajax response is inside this function. This function is almost the same as the cdashmc_list().


function cdashmc_list_render($args){
  ?>
  <!-- Display the loading button when Ajax is running -->
  <div id="cdashmc_list"></div><div id="cdashmc_ajax_loader">Loading...</div>
  <!--Display this message when the api key is deleted -->
  <div id="cdashmc_api_delete_notice">Please save the changes and enter the api key again to select the list.</div>
  <?php
  $options = get_option('cdash_addon_options');
  if(!isset($options['cdashmc_list'])){
    $options['cdashmc_list'] = '';
  }
  if($options['cdash_mailchimp_api_key'] == ''){
    echo "<p class='cdashmc_api_key_msg'>Please enter your MailChimp API key.</p>";
  }else{
    $api_key = $options['cdash_mailchimp_api_key'];
    // Query String Perameters are here
    // for more reference please vizit http://developer.mailchimp.com/documentation/mailchimp/reference/lists/
    $data = array(
    	'fields' => 'lists', // total_items, _links
    );
    $url = 'https://' . substr($api_key,strpos($api_key,'-')+1) . '.api.mailchimp.com/3.0/lists/';
    $result = json_decode( cdashmc_mailchimp_curl_connect( $url, 'GET', $api_key, $data) );
    //print_r( $result);


    if( !empty($result->lists) ) {
      ?>
    	<select name = "cdash_addon_options[cdashmc_list]"  id="cdash_mailchimp_list"  >
        <option value="">Select your Mailchimp List</option>
        <?php
    	foreach( $result->lists as $list ){
        ?>
        <option value = "<?php echo $list->id; ?>" <?php selected( $options['cdashmc_list'], $list->id ); ?>><?php echo $list->name . ' (' . $list->stats->member_count . ')'; ?></option>
        <?php
    		//echo '<option value="' . $list->id . '">' . $list->name . ' (' . $list->stats->member_count . ')</option>';
    		// you can also use $list->date_created, $list->stats->unsubscribe_count, $list->stats->cleaned_count or vizit MailChimp API Reference for more parameters (link is above)
    	}
      ?>
    	</select>
      <br /><span class="description cdashmc_list_desc"><?php echo $args[0]; ?></span>
      <?php
    } elseif ( is_array($result) && is_int( $result->status ) ) { // full error glossary is here http://developer.mailchimp.com/documentation/mailchimp/guides/error-glossary/
    	echo '<strong>' . $result->title . ':</strong> ' . $result->detail;
    }else{
      echo "<p class='cdashmc_check_api_msg'>Please check your api key.</p>";
    }
  }
}

Adding a category filter to custom post type shortcode

The Chamber Dashboard plugins make it very easy to create member listings and display the businesses on the site. The shortcode used to display businesses has a few parameters that can be specified like pagination options, business details that need to be displayed like email, phone number, business category, membership level etc.

The business_category option will take in a category slug and filter the businesses accordingly. Although this is a useful feature, it is not the easiest way to filter the business listings by category. Each category listing should go on a different page. This is sometimes useful, but not if the user wants to just sort through the listings based on category. So, we wanted to add a category filter option to the shortcode.

Adding this new feature to the existing shortcode was the best way as it will ensure that the existing styling options can stay as is.

One of the important requirement was that the businesses from the selected category had to show up on the same page without the user getting redirected to a different page. This can be easily done with Ajax, but in this case using Ajax would have been a bit complicated. I just wanted to add the feature with minimal changes to the shortcode.

So, the first thing I added was another parameter to the shortcode – show_category_filter which controls the category filter dropdown. We did not want to show the dropdown by default. So, it is set to ‘no’ and if it is set to ‘yes’, the dropdown will be displayed.

Displaying the business categories dropdown

Displaying the dropdown is done using wp_dropdown_categories() and since I wanted this function to return the dropdown, I put it inside a function cdash_bus_cat_dropdown()

The dropdown should be displayed only when the category filter is set to yes.

if($show_category_filter == 'yes'){
	$business_list .= '<p>' . cdash_bus_cat_dropdown() . '</p>';
}

This is how it will show on the front end. This is can be styled to match the theme.

Chamber Dashboard Business Directory category filter dropdown

Displaying the businesses from the selected category

Since there was already an option in the shortcode to take in the category, all I had to do was to pass the selected category into that parameter. Rest of if will be taken care of by the shortcode. To do that, I got the slug of the selected category and appended it to the url using jQuery.

jQuery("#cdash_select_bus_category").change(function() {
        var category_value = $(this).val();
        //var base_url = window.location.href.split('?')[0];
        var base_url = $("#cdash_bus_list_page").text();
        //alert(base_url);
        var category_url = base_url + '/?bus_category=' + category_value;
        window.location.href = category_url;
    });

I got the value of the selected category using the $_GET and passed it to the $category parameter.

if(isset($_GET['bus_category'])){
		$category = $_GET['bus_category'];
}

This ensures that the shortcode will display the businesses from the selected category and all the other shortcode parameters will work as usual.

We wanted to display the selected category to the users and an option to clear the selected category.

if($show_category_filter == 'yes'){
	// remove pagination from url
	$pattern = "/page(\/)*([0-9\/])*/i";
	$current_url = home_url( add_query_arg( array(), $wp->request ) );
	$url = preg_replace($pattern, '', $current_url);
	$business_list .= '<p>' . cdash_bus_cat_dropdown();
	if(isset($_GET['bus_category'])){
		$business_list.= '<a href="'.$url.'">Clear Filter</a>';
	}
	$business_list .= '</p>';
	$business_list .= '<p id="cdash_bus_list_page">'.$url.'</p>';
	if(isset($_GET['bus_category'])){
		$bus_cat_slug = $_GET['bus_category'];
		$bus_cat_name = get_term_by('slug', $bus_cat_slug, 'business_category');
		$business_list .= '<p>Category: ' . $bus_cat_name->name . '</p>';
	}
}

Adding login/logout links to selected WordPress Menu

Choosing the best membership plugin for your WordPress site

WordPress is a powerful platform to build and maintain membership sites. As with anything related to WordPress, there are many different plugins available to build a membership site. There are free and paid options. I am going to compare some of the free plugins to help you decide which one works best for your site. Before I go into the different plugins and their features, I want to talk a bit about membership sites.

Skip to the plugins list

What are Membership sites?

Generally any site with pages, posts or other content protected by a login is considered a membership site. This is the simplest form of membership site. There are many different types of membership sites.

  • Sites with online member directories
  • Sites that give benefits to members based on membership level
  • Chambers of Commerce
  • Visitor guides/Travel Bureau sites
  • Websites offering courses/tutorials

Since there are many different types of membership sites, there will obviously be many different types of membership plugins as well. So, how can we choose the plugin that will work best for the site we want to build.

Requirements of Membership sites

If you want to build a membership site, first you need to come up with the requirements for your site. Each type of membership site has a different requirement. So, until you have a clear idea of all the things you want or need on your site, you cannot decide which plugin you can use.

Here are some of the requirements of membership sites. You can download this list here.

Register new members and event attendees

Most of the membership sites will need to register members. So, you will need a registration form for the users to add themselves as a member on your site. These members can be individuals or businesses.

Display members

Displaying members is not a requirement for all the membership sites. Websites that offer courses or tutorials do not need to display their members.

Update member profiles

If your website has a lot of members, it might be easier to have them update their own profiles. This is faster and more accurate as well. In some cases though, you might not need this feature all the time. So, if this feature is available in the free version, it is beneficial, but otherwise, you might want to think before you shell out the money.

Give instant access to members only content

If you want to have some content protected by a login, you need to be able to give your members instant access when they sign up on your site. So, being able to restrict content based on user role or membership level is a huge bonus. Having this feature as part of the membership plugin makes it very easy to set it up.

Email members and/or send out newsletters

One of the major requirements of membership sites is the ability to email members or send out newsletters. Having all your member emails in your email marketing program is beneficial. It saves you a lot of time and is less prone to errors. This feature is available in many of the membership plugins, but it might not be pro feature.

Add contacts (CRM)

If you have a site like chamber of commerce or a visitor bureau site, your members will most likely be businesses. These businesses can have multiple locations and can have multiple people as the point of contact. In this case, it will be nice to have a CRM feature in your membership plugin that will let you add these contacts for each business. Then when you display these members on your site, you can also display the people with their phone numbers and email addresses.

Process monthly/yearly dues or donations

One of the main reasons for having a membership site is to make recurring revenue. So, payment processing is very important. Many of the plugins provide PayPal options in the free versions and other options are available in the paid versions. If you are not sure what payment option you like, it would be best to try out the free version first.

Create reports

Creating monthly and quarterly reports of your revenue is quite useful. While it is true that you can transfer all of the payment information into QuickBooks or other software, it is definitely beneficial to have to this feature as part of the plugin.

You might want to see the difference in revenue from last year and this year or revenue from a particular category of members etc.. Being able to see this information in the WordPress admin would be nice.

Content dripping

Content dripping is making the content available in a pre-scheduled timeline. If you have a website that has some courses, you might want to give access to the first couple of course videos in the first week and one or two videos every week after that.

Now that we have seen the major requirements of membership sites, let’s look at what plugins are available to build these sites.

Free Plugins

  • WP Members Plugin
  • S2 Member
  • Chamber Dashboard Plugins
  • Simple Membership
  • Ultimate Member
  • Restrict Content
  • Members Plugin

Premium Plugins

  • WP eMember
  • WPMU Dev Membership
  • Member Press
  • Magic Members
  • Member Mouse
  • WC Groups/WC Subscriptions
  • Digital Access Pass (DAP)

Below is a comparison chart for the free plugins and some of the major features they support.

Features/PluginWP Members PluginS2 MemberChamber DashboardSimple MembershipUltimate MemberMembers PluginRestrict Content
Register New MembersYesYesYesYesYesNoYes
Login FormYesYesYesYesYesYesYes
Membership LevelsYesYes (5 levels in the free version)YesYesNoNoNo
Membership ListingsProProYesYes (Some pro options)YesNoNo
Process PaymentsProPayPal StandardPayPal Standard, PayPal SubscriptionsPayPal, StripeNoNoPro
Restrict ContentYes Yes Yes Yes Yes Yes Yes
Create ReportsNoNoYesNoNoNoPro
Update Member ProfilesNoYesProCan Delete ProfilesNoNoNo
Newsletter IntegrationProYes (MailChimp, AWeber)Pro (MailChimp)Yes (MailChimp),
Pro (AWeber, ConvertKit)
Pro (MailChimp)NoPro
Content DrippingYesProNoNoNoNoPro

Looking at the chart, you can determine which features you need for your membership site and choose the plugin accordingly. If a feature is not available in a plugin, it is not necessarily a bad thing. If you do not need that feature on your site, you can still go ahead and use that plugin.

Most of these free plugins provide premium options with more features. I think it is always better to try out the free plugins and see which ones you like. Then, you can go ahead and purchase the premium versions.

List of plugins for different types of membership sites

Restrict access to content

  • Restrict Content
  • Members
  • Ultimate Member

Online Member Directories

  • Simple Membership
  • Ultimate Member
  • Chamber Dashboard

Restrict Content based on Membership Levels

  • Simple Membership
  • Chamber Dashboard
  • S2 Member

Courses/Tutorials

  • WP Members
  • Simple Membership
  • S2 Member

The membership site checklist is a handy guide to help you choose the best membership plugins for your site.

Gutenberg (Block Editor) for Small Businesses

The block editor also called as Gutenberg was merged into WP core in Dec 2018. It was made the default editor as part of WP 5.0. I have been testing the editor even before it was released and I love it. In the past few months, there have been a few improvements and updates to the editor. Though there is a lot of room for improvement, there are a bunch of cool features that we can use now to create nice pages and posts.

Most WP users have used the block editor at least a few times by now. The WP users have mixed feelings about the new editor. Some people like it so much that they never want to see the old editor ever again. Some people hate it that they installed the classic editor plugin and are happy. Then there are people who don’t like it as much, but don’t mind using it.

Some of the cool features of the block editor

The block editor has all the features of the classic editor and some more. Here are some of the neat features of the block editor:

  • Can change the layout of your posts and pages. With the classic editor, you can only do what your theme template allows you to do. Now, you can move the content around to achieve a different layout.
  • The classic editor did not have the table option by default. With the block editor, adding tables is a breeze. You can not only add a table with a single click, you can also style it.
  • Adding columns to your posts or pages is now really simple which gives you the ability to modify the page layout.
  • You can add widgets in your posts and pages. The widgets usually live on the sidebar, but they have a lot of useful information. With responsive websites being the norm, the sidebars usually get pushed to the bottom or entirely disappear on tablets and phones. So, being able to add widgets to your posts is a huge advantage. You can add your latest posts from a certain category, a calendar, search bar or a RSS feed link.
  • If you have a WooCommerce store, adding latest products or products that are on sale is a breeze. You can add a bunch of different products with the click of a button. It makes it very easy to add products as part of your promotional post or page. Earlier this was possible by using shortcodes, but the blocks make it easier.
  • You can also save your blocks to be reused at other places which means that you can create an ad or a promotional item once and reuse it on other posts and pages. If you change the reusable block once, it gets updated everywhere. Read more about reusable blocks.

Managing the blocks in the page/post editor

There are many blocks being added with every new release and with so many plugins adding their own blocks to the list, it can become overwhelming. Sometimes, you might feel like there are too many blocks, and in that case, you can hide them through the block manager. If there are certain blocks that you don’t use at all, you can simply choose not to display them in the list of blocks.

To access the block manager, click on the three vertical dots on the top right corner and select the ‘Block Manager’. In the Block Manager, uncheck the blocks that you do not want to show up in your editor.

Block Manager Popup

If you want some distraction free writing mode in your editor, you can choose to display all the block and document tools at the top of your editor.

Setting the toolbar to be at the top
Toolbar at the top of the editor

How does the block editor help small businesses?

If you are just getting started with your business or if you are a local small business owner, you are most likely trying to keep the expenses low by doing most of the website related stuff yourselves. This is one of the big reasons WordPress is a good platform for you. It gives you the ability to setup and manage your websites at a low cost.

Before the block editor, you needed a page builder or theme templates to add a new page with a different layout. With the new block editor, that is made very easy. You can now easily setup a promotional landing page or ads within minutes and change it as you see fit. Ofcourse, with just the block editor, the possibilities are limited, but there are plugins that provide amazing layout options which make it very easy. Some of the page builders also now work with the new editor which give you more possibilities. You can find those plugins at the end of this post.

With the new editor and a couple of supported plugins, you do not need to depend on a web developer to build you new theme templates. This will save you time and money. It will be worth it, even though it has a small learning curve.

Read why small businesses need to have a strong online presence?

Page Layouts

Creating page layouts is very easy with the new editor. There are a number of layouts that you can create.

Here are some examples of some simple page layouts that you can create in a matter of minutes that will increase your page views and ultimately result in more clients.

  • Promotional sales
  • Portfolio layout

Do I need a Gutenberg ready theme?

With the block editor being drastically different from the classic editor, the themes and plugins need to add support for the new editor. The editor works with all themes by default, but, some of the features like full width will not be available unless the themes declare support for those features.

Displaying images in full width mode is one of the nice features of the block editor. The themes need to declare explicit support for this feature. Below are screenshots from editors that show the if the theme supports the wide width and full width modes.

Gutenberg ready themes also take into account the color palette of the site. Each theme has a set of colors that determines the appearance of the site. Since with the new block editor, you can choose some of the background and font colors, it is important that the color palette is limited to the ones that work well with the theme. You can still choose a custom color by clicking on the ‘Custom Color’ link.

Regular Color Palette in the block editor
Regular color palette
Theme specific color palette.
Theme specific color palette

How to find a Gutenberg ready theme?

Themes that provide complete support to Gutenberg are tagged as ‘Gutenberg Ready’ in the themes repo. You can go to wordpress.org/themes and search for ‘Gutenberg Ready’ in the search bar.

Alternatively, you can use the feature filter to filter for ‘Block Editor Styles’. Both these searches might not give you the same results.

Read more on how to choose a theme for your WordPress site?

Other plugins that add features to the block editor

There are a number of plugins that add more blocks to your default editor. These blocks give you additional functionality. Each of these plugins provides enhanced block features which gives you more power to create custom page layouts.

If you would like to learn more about how to use the editor, you can find some amazing tutorials here – https://gutenberghub.com/

Verified by MonsterInsights