CannaBiz WordPress Theme Code Snippets

Our CannaBiz WordPress theme comes pre-packaged with a lot of customization features, which we’ll be going over later this week.

But to keep #CannaBizWeek going, let’s go over some of the ways that you can use our CannaBiz theme and extend it with simple code snippets to suit your specific needs.

Add a newsletter box after blog posts

One of the ways you can drive continued user engagement is by getting them to sign up to your newsletter.

With the CannaBiz theme, you can utilize one of it’s action hooks to add in your own custom newsletter box.

Add the following code to your WordPress theme’s functions.php file, changing the title tag, text and newsletter form code to your mailing list provider.

function custom_newsletter_box() {
echo "<div class='hentry newsletter-box'>
      <h2>Join our Newsletter</h2>
      <p>Add some more text here to convince people that signing up is worth it.</p>
      <form>
        <input type='text' class='newsletter-email' value='' placeholder='Email Address' />
        <input type='submit' class='newsletter-submit' value='JOIN NOW!' />
      </form>
    </div>";
}
add_action( "cannabiz_single_after", "custom_newsletter_box" );

The following code should be added to your theme’s style.css file, and will take the above codes and style them like the image above.

You can always change the colors/style to better suit your branding needs.

.hentry.newsletter-box {
  background: #454545;
  color: #FFF;
  overflow: auto;
  padding: 24px;
  text-align: center;
}

.hentry.newsletter-box h2 {
  font-size: 48px;
  margin: 0;
  padding-top: 0;
}

.hentry.newsletter-box p {
  margin: 0 0 24px 0;
}

.hentry.newsletter-box input.newsletter-email {
  border: 1px solid #FFF;
  float: left;
  margin-right: 1%;
  padding: 18px;
  width: 68%;
}

.hentry.newsletter-box input.newsletter-submit {
  float: left;
  width: 30%;
}

Add custom advertisements areas

For the times that you’d like to sell advertisement space, promote a product of your own or use a service like Mantis, this is the code snippets for you.

CannaBiz Theme Code Snippet for advertisements — click to expand

Like the image above shows, the following codes will help add in custom advertisements at the end of blog posts and the bottom of your theme’s sidebar.

Add the code below to your functions.php file and change up the ad codes on line #2 in order to display a custom advertisement below your blog posts.

function custom_ad_box() {
  echo "<p><a href='CUSTOMURL'><img src='IMAGEURL' alt='' /></a></p>";
}
add_action( "cannabiz_single_after", "custom_ad_box" );

Add the code below to your functions.php file and change up the ad codes on line #2 in order to display a custom advertisement at the end of your sidebar.

function custom_ad_box_sidebar() {
  echo "<p><a href='CUSTOMURL'><img src='IMAGEURL' alt='' /></a></p>";
}
add_action( "cannabiz_sidebar_inside_bottom", "custom_ad_box_sidebar" );

Add a custom link to the theme’s top bar

The top bar of the header in CannaBiz holds contact information and social links, all of which are available to show or hide via the Customizer.

But what happens if you need to add in a custom link that isn’t already available in the top bar, like this:

You add the code below to your functions.php file to add a new link to the top bar before the email address and phone number.

function custom_topbar_link() {
  echo "<a href='#' class='topbar-link'><i class='fa fa-globe' aria-hidden='true'></i> New Link</a> ";
}
add_action( "cannabiz_topbar_inside_before_email", "custom_topbar_link" );

Then you can add a simple piece of CSS to your theme’s style.css file which adds in the spacing between your new link and the default links in the top bar.

a.topbar-link {
    position: relative;
    margin-right: 10px;
}

Add “designed by” text in the footer

For developers building websites for clients, having a link to your website in the client’s footer can help bring in traffic and potential sales to your business.

So, it’s only right that the CannaBiz theme adds in a filter for you to add in your own message into the copyright area of the CannaBiz theme, like this:

The website owner will be able to change the copyright text within the Customizer, but your custom text will remain attached to the end of it.

In your theme’s functions.php file, you can add the following code to place your own custom copyright message into the footer.

function custom_cannabiz_footer() {
  $cannabiz_footer_designedby = "| Designed by <a href='http://www.robertdevore.com'>Robert DeVore</a>";
  return $cannabiz_footer_designedby;
}
add_filter( "cannabiz_footer_designedby", "custom_cannabiz_footer" );

Add categories to WP Dispensary shortcodes

While this isn’t just specific to the CannaBiz theme, it’s a good snippet to have if you’re looking to customize your cannabis menu further.

Add the following code to your functions.php file to add the categories to each item in all WP Dispensary menu type shortcodes (including the free Gear and Tinctures add-on’s).

function cannabiz_wpd_shortcode_categories() {
  if ( in_array( get_post_type(), array( 'flowers', 'prerolls' ) ) ) { ?>
    <div class="cannabiz-categories"><?php echo get_the_term_list( get_the_id(), 'flowers_category', '', ', ' ); ?></div>
  <?php }
  if ( in_array( get_post_type(), array( 'concentrates' ) ) ) { ?>
    <div class="cannabiz-categories"><?php echo get_the_term_list( get_the_id(), 'concentrates_category', '', ', ' ); ?></div>
  <?php }
  if ( in_array( get_post_type(), array( 'edibles' ) ) ) { ?>
    <div class="cannabiz-categories"><?php echo get_the_term_list( get_the_id(), 'edibles_category', '', ', ' ); ?></div>
  <?php }
  if ( in_array( get_post_type(), array( 'topicals' ) ) ) { ?>
    <div class="cannabiz-categories"><?php echo get_the_term_list( get_the_id(), 'topicals_category', '', ', ' ); ?></div>
  <?php }
  if ( in_array( get_post_type(), array( 'growers' ) ) ) { ?>
    <div class="cannabiz-categories"><?php echo get_the_term_list( get_the_id(), 'growers_category', '', ', ' ); ?></div>
  <?php }
  if ( in_array( get_post_type(), array( 'tinctures' ) ) ) { ?>
    <div class="cannabiz-categories"><?php echo get_the_term_list( get_the_id(), 'wpd_tinctures_category', '', ', ' ); ?></div>
  <?php }
  if ( in_array( get_post_type(), array( 'gear' ) ) ) { ?>
    <div class="cannabiz-categories"><?php echo get_the_term_list( get_the_id(), 'wpd_gear_category', '', ', ' ); ?></div>
  <?php }
}
add_action( "wpd_shortcode_inside_top", "cannabiz_wpd_shortcode_categories" );

Now we need to style the link so it sits on top of the image of each item and has a similar style/color to the CannaBiz theme.

Add the following CSS to your theme’s style.css file, and feel free to change this CSS to better suit your branding needs.

.cannabiz-categories {
    position: absolute;
    top: 10px;
    left: 10px;
}

.cannabiz-categories a,
.cannabiz-categories a:visited {
    color: #FFF;
    background: #76BD1D;
    padding: 5px;
    border-radius: 3px;
    font-size: 13px;
}

.cannabiz-categories a:hover {
    color: #FFF;
    background: #8224e3;
}

How have you customized CannaBiz?

Let us know through the support page and we can add your website to our official WP Dispensary Showcase!