Month: June 2016

Opening your Divi Header and Footer icons in a new window.

A few weeks ago I released the Atlantic Wave Social Media plugin for Divi. The plugin extends the built in Divi header and footer social media icon set by adding up to 13 additional social media icons.

A customer recently asked me how it would be possible to open the social media links in a new window. Now I will probably release an update to the plugin to add this functionality, but for now I thought it would be a good idea to share a simple way of being able to do this. Even if you don’t use my plugin, being able to set your social media icons to open in a new window is a good practice.

By adding a little piece of JavaScript to your Integration tab in the Divi Theme Options, you can set the social media icons to open in a new window.

  1. In your WP admin, select Theme Options from the Divi menu
  2. Click on the Integration tab
  3. Make sure ‘Enable body code’ is enabled.
  4. Scroll down to the section where it says ‘Add code to the <body> (good for tracking codes such as google analytics)’
  5. Add the JavaScript code snippet below. If you already have some JavaScript there, you can just put this inside the existing <script> tags. If there is nothing there then make sure to wrap the JavaScript with <script> tags.
jQuery(document).ready(function($){
    $('.et-social-icon .icon').each(function(){
        $(this).attr('target', 'blank');
    });
});

And there you go, all your social media icons should now open in a new window!

Filed under: Divi, WordPressTagged with: ,

Make your Divi Page Builder go large.

FullScreenDiviPageBuilder

I tend to prefer to use the full extent of whatever screen I am on to it’s fullest effect. Typically I have two screens, my 23inch widescreen monitor and my 17inch laptop screen. The monitor is for coding and all coding related things and the laptop screen is for testing in browsers as well as the odd VLC or YouTube window.

One thing I hate is when I am working inside a modal view that doesn’t take full advantage of whatever screen I am on. This is a special pain point whenever I am using the Divi Builder, which makes extensive use of modals.

So I took a quick look under the hood and it turns out setting the modal to fill the screen isn’t that hard to do. A few lines of CSS code later and viola, Divi Full Width Page Builder plugin.

I haven’t tested this with every instance of every modal, but I’m looking forward to trying it out.

If you want to install it as a plugin, you can do so from the Git Hub repo. Alternatively copy and past the PHP code from the full_screen_page_builder.php file into your functions.php.

Happy Diviing.

Filed under: Development, Divi, WordPressTagged with: ,

Setting up a local development environment with Scotch Box

workstation

Very recently I had the misfortune of being forced to uninstall Ubuntu from my laptop and go back to Windows. I won’t get into the reasons behind this, but the one thing I miss in the Windows environment is my LAMP (Linux/Apache/MySQL/PHP) stack and bash command line. Most web site hosts around the world use LAMP so I always prefer to develop in as close as environment as what the production server will be as possible. Developing on Ubuntu makes this super simple, as I am effectively running the same (ish) OS and software on my laptop as would be on the server.

When I’m on Windows I use a combination of GitBash and WampServer to power my default local environment (now that ZendServer no longer offers a free edition). It’s super quick and simple to setup and configure and you can have a local development environment up and running in minutes. However it’s still not a replacement for a proper Linux based development server.

Then I discovered Scotch Box.

Scotch Box is a zero configuration Vagrant Box that will have to up and running with a Linux (Ubuntu) based virtual web development environment in literally minutes. It comes pre installed with everything a modern web developer might need and requires very little in the way of configuration to get up and running. Simply clone the GitHub repo, run vagrant up and you’re off.

Now, having said all that, there are some things about it that I don’t like.

Directory structure – If you are coming from a WampServer environment and you want to use Scotch Box, you are going to have to change your folder structure slightly. ScotchBox by default creates a public directory inside your project directory, in which you should have your project files. WampServer typically uses one root web directory (typically c:\wamp\www or c:\wamp64\www for 64bit environments) with all your site/project directories inside that directory.

Database access – Scotch Box doesn’t come with PHPMyAdmin installed by default. Now while I understand the reasons behind this, sometimes you just want to be able to quickly view your data and PHPMyAdmin is one of the best web based tools to do this.

Multiple sites – While ScotchBox does support virtual hosts (for running multiple sites on the same instance) I prefer to run a single instance of ScotchBox for each project but with it’s own virtual IP. This means I can have two or three development sites running at the same time.

MySQL Password – this is a personal preference, but I prefer to use password as my MySQL password instead of ScotchBox’s default of root.

So, after playing around with the Vagrantfile a little I have successfully set up an environment that suits my requirements.

The Setup

Step one – you will need to install VirtualBox and Vagrant for your OS of choice.

Step two – either download (as a zip) and extract or clone (if you git) my scotch-box repo.

Step three – copy the Vagrantfile and vagrant.yml files to your project directory (this is the root of your development website, wherever the index.php file is located)

Step four – Edit the vagrant.yml file and change the ip and sitename variables to an IP address and virtual host name of your choosing. I usually start with the default Vagrant 192.168.33.10 IP address and then increment it for each new project (192.168.33.11, 192.168.33.12 etc). I also usually make the sitename the same is my project directory name, but really all this is used for is the DNS record (next step)

Step five – in your hosts file (usually C:\Windows\System32\drivers\etc on Windows, or /etc/hosts on either Mac or Linux) add a record for the new site

192.168.33.10    yourchosensitename

This tells your browser that when you browse to http://yourchosensitename/ to look for its content on the IP 192.168.33.10, which will be bound to your project’s ScotchBox instance.

Step six – Using the command line tool of your OS, browse to the project directory and run the following command

vagrant up

It will do a bunch of stuff and then your ScotchBox will be ready.

You can use http://yourchosensitename/ to browse the project you are working on and http://yourchosensitename/phpmyadmin to access PHPMyAdmin for this instance.

When you are finished you can run the following from the command line (inside your project directory)

vagrant halt

This will stop your ScotchBox instance. You can start it up again with the vagrant up command and it will be there, just as you left it.

Under the hood

Let’s take a look at the Vagrantfile and vagrant.yml to see whats happened behind the scenes. You can read more about the Vagrantfile, but in short its the file that makes all the Vagrant and ScotchBox magic happen.

Vagrantfile

Line 4-6 include the vagrant.yml and make this site settings available to the Vagrantfile.
Line 11 sets the Scotch Box IP to whatever you have specified in the vagrant.yml
Line 12 sets the hostname to whatever you have specified in the vagrant.yml
Line 13 setups up a synced folder between the current directory (wherever the Vagrantfile is) and the ScotchBox’s /var/www/public directory (this is the servers web root)
Line 18-54 runs the Shell provisioner. This is where you can run some shell commands to setup any extra server related stuff. Here you will see I have removed a scotchbox.conf site that is not needed, set the new mysql password, installed PHPMyAdmin and created a database, using the sitename as the database name. If you are a shell master you can set up pretty much anything else here, from installing any other software you might need to project specific configurations. Remember that this runs every time you start up the box, so make sure whatever you are provisioning can be tested to see if it already exists, otherwise you might get some errors that cause the provisioner to fail.

vagrant.yml

All this does is contain the settings for IP address, sitename and mysql password, to be used in the Vagrantfile.

What I love about ScotchBox is that there are a bunch of things that come pre installed, including WP-CLI and a MailCatcher for testing email sending. And with a little tweaking to the Vagrantfile I have it configured perfectly for my environment.

Filed under: DevelopmentTagged with: , ,