Blog article

Code snippets, plus the latest news

lbfl ConsultancyAdd shortcodes to WP BakeryWP Bakery adding your own pHp shortcodes to the editor

WP Bakery adding your own pHp shortcodes to the editor

WP Bakery, add your own shortcodes

WP Bakery page builder comes with a shortcode builder that’s suitable for a variety of custom shortcodes, but what if you want to add something that’s not catered for? That’s where we’re going to focus our efforts today. WP Bakery recommend hiring a pHp expert to carry out this work, however, for basic functionality, many of you will be able to do this for yourselves without knowing too much about pHp.

Let’s look at a basic piece of software so that you can build on the content here. We’re going to add a call to a youtube video which needs placing in a laptop background image. Ordinarily you would just embed the youtube video pasting it’s URL to the webpage.

This method divides the screen into two, if you’re using bootstrap it’s <div class col-md-6>

What you’ll need

You’ll need to be familiar with uploading content to your website using ftp. There are a number of programs out there that will do this for you on PC and MAC. Filezilla, WinSCP, Transmit and Cyberduck all work with Windows and MAC. Download your favourite.

We’ll assume that you’re working with a child theme, if not consider creating a child theme so that updates don’t break any changes that you have made to your theme.

Files and directories we’ll be working with.

If your working with a child theme, you’ll already have functions.php as part of your install. We will be adding code at the foot of this file. We will also need to create an include directory using filezilla in the /wp-content/themes/child_theme folder. The steps are as follow:-

  1. Download a copy of functions.php, keep it on your desktop for easy access.
  2. Create an includes directory on your server using ftp.

Please be careful when adding code to functions.php, a simple mistake can break your theme! Please remember, it’s your responsibility to keep a working backup copy of functions.php so that you can quickly recover your website, so proceed with caution, if in doubt ask for help.

Let’s start editing…

Amending functions.php

After the last line in functions.php add the following code.

/** ----------------------------------------------------- 
 ** EMBEDDED VIDEO IN LAPTOP
 ** Either Youtube, Vimeo or your own hosted video
 ** -----------------------------------------------------
 */
 
 function myvideo() {
     require_once( get_stylesheet_directory() . '/includes/video.php');
 }
 add_shortcode ('wp_bakery_call' , 'myvideo');

This basically adds a shortcode that we’re going to call in WP Bakery. The function name is myvideo, and the shortcode that we will use to call this function is wp_bakery_call. Save the modified file functions.php to your desktop only at this stage.

Creating the Youtube video function.

For this we need to create a new pHp file called video.php to which we will add the following code: –

/**------------------------------------------------------
 ** Assume that we're working with a child theme
 ** Includes get_stylesheet_directory
 ** rel = 0, prevents youtube playing associated videos.
 **------------------------------------------------------
 */
 <?php
?>
<div class="videoWrapper">
        <img src="/wp-content/uploads/2020/06/macbook-blank-1.png" alt="Video in a laptop" /><!-- replace with location of laptop artwork in your media library-->
            <div id="video" class="js-video [vimeo, widescreen]">
                <!--Youtube video below, or your own hosted video eg: '<video width="560" height="315" src="/wp-content/uploads/2020/10/videoplayback.mp4" controls/>' -->
                <!-- External media, Youtube, Vimeo... rel=0 disallows associated videos to load after playing-->
                <iframe width="1244" height="700" src="https://www.youtube.com/embed/mjsruPwWdCw?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
</div>

The required css

You may need to fine tune the position of the video using the css detailed in lines 9 to 14. This code will need to be added to your child themes stylesheet – style.css

/** YOUTUBE **/
.videoWrapper {
    position: relative;
    padding-bottom: 67.5%;
    padding-top: 25px;
    height: 0px;
}
.fluid-width-video-wrapper { position:inherit !important; width:0% !important;}
.fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed {
    position: absolute;
    top: 13.75% !important;
    left: 18% !important;
    width: 65.15% !important;
    height: 62.15% !important;
}

Next steps. within Filezilla, WinSCP or your favourite ftp program, carry out the following:

  1. Add the first code snippet to the end of functions.php and remove the opening <?php statement. Then upload the file to the child theme directory.
  2. Create an include directory in the child theme directory and navigate to the includes folder. Upload youtube.php to that directory.
  3. Finally, add the css code to the foot of your themes style.css file, and update.

Note – if this code breaks your theme, dowload functions.php, restore and upload your backup copy of functions.php to the /wp-content/theme/child_theme directory.

Output, testing and positioning.

This is the first half of the screen width.

To output  the function, add a text block in WP Bakery and add the following code as plain text in the visual or text editor [wp_bakery_call], that’s it!

If you’re using the full screen width then you’ll need to amend the css accordingly, adding @media screen and (max-width:600px) { } statements to control video scaling.

lbfl Consultancy services provided

Our next two articles will focus on:

  • Passing parameters to WP Bakery so that created functions are more versatile.
  • Scraping information from external websites, so that you can display remote content on your website pages. In our case this was required to extract a live fuel price from an external transactional database.

Screen scraping

Post your comments here

Your email address will not be published. Required fields are marked *