X Theme Top Bar with Shortcodes

The awesome WordPress X Theme‘s Top Bar doesn’t support shortcodes out of the box, but with this simple code update it can. Here’s what you need to do to make shortcodes work in X Theme Top Bar:-

  1. Create a _topbar.php file under your child theme in the following location ‘wp-content/themes/child-theme-name/framework/views/global/‘ (substitute ‘child-theme-name’ for your child theme)
  2. Add the following PHP code


// =============================================================================
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================


<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <!-- shortcode in topbar -->
	  	<div class="p-info">
	     <?php $my_topbar = (x_get_option( 'x_topbar_content' )); echo do_shortcode($my_topbar);?>
      <?php endif; ?>
      <?php x_social_global(); ?>

<?php endif; ?>

And that’s all you need to do. The code that renders the shortcodes is:-

<?php $my_topbar = (x_get_option( 'x_topbar_content' )); echo do_shortcode($my_topbar);?>

This code will allow the X Theme to display shortcodes and is particularly useful for displaying widgets and other forms of rich content like Gravity Forms, Google Maps, Social Sharing like Easy Social Share Buttons or other WordPress Widgets.

About the Author
x theme top bar with shortcodes X Theme Top Bar with Shortcodes 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.