BackupBuddy and GoDaddy

BackupBuddy and GoDaddy have never really been buddies really. Been hard to run BackupBuddy on GoDaddy to say the least, but I am here to tell you there are options to make it work on GoDaddy as running backups from the Dashboard fail most if not all the time. The option is running backups from the shell. This  you can of course only do if can access the site from shell and know how to use shell commands and or follow this short tutorial.

WP CLI

First of all you need to install WP CLI, the wonderful WordPress command line that is completely open source. GoDaddy explains how this can be done here. FYI this guide can be followed to upgrade WP CLI as well.

You first access GoDaddy using shell like so:

 ssh user@domain.com

Then you use curl to download WP CLI:

 curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Shell - Download WP CLI
Then you make sure the file can be executed

 chmod +x wp-cli.phar

And to check the functionality of WP CLI you can run the following command:

 php wp-cli.phar --info

Then you create an alias so you can use wp instead of the entire path to the file. Mind you that you make sure you have the PHP phar file in your home directory or else move it there.

 

NB If you were following this guide for updating WP CLI you should be done now.

 alias wp='~/wp-cli.phar'

Once the alias is created add it to .bashrc:

 echo "alias wp='~/wp-cli.phar'" >> .bashrc

and make sure it is taken up in the current Bash session:

 source .bashrc

Once that is done the wp cli command line tool should be working and we can move on to running BackupBuddy from the commandline.

Backup with BackupBuddy from the Command Line

Now from the command line you can do the following command to do a full backup:

 wp backupbuddy backup 2

Number two is related to a FULL backup of the site. Once that command is given a full backup will be run without I/O or RAM issues and you will see that it can be done!

Extra Tip

You could also add a crontab job from GoDaddy (see document at GD here) to run the script automatically on certain times, but that is for another tutorial.

From WordPress Dashboard to Frontend

Sometimes the most obvious steps to take for some, and certainly for veteran WordPress users like me are overlooked. By blogging here at Imagewize I am trying to help clients with answering basic WordPress questions so they can work on updating their site and promoting their business. So a question I had on a site that was under maintenance was how to get to the frontend to see the site in progress.

Dashboard

The WordPress Dashboard is the backend of WordPress where posts can be created, edited, pages can be created, plugins can be added and so on. It is the hear of your WordPress site

Frontend

But if you just landed there to be logged in so you could see the site this is what you have to do to see your site in all its glory? To go from the WordPress Dashboard to Frontend do the following:

  1. Move your mouse to the top left corner where you see the name of your site
  2. Hover on it until you see a dropdown with “visit site” and perhaps a few other options
  3. Click on visit site and you will be sent to the public side or frontend of your site

And that is all really. Now you have arrived at the frontend and can check your website.

Modern WordPress Development with Roots

I have been working on and off as a web developer and mainly with WordPress for over 15 years. I worked with different frameworks such as Genesis, Thesis, Canvas and Divi. I also worked or dabbled in a few starters themes such as _s .  And often I have customized themes that customers found / bought on Themeforest. And as these options became less and less appealing to me I started to look for something else.  That choice has become Roots

Reasons why I am moving

The reasons why I am moving more and more of my projects to Roots with Bedrock as a modern WordPress stack, Ansible for provisioning and Sage as a starts theme are many. Allow me to go throught the most important ones.

Efficiency

To learn a new theme every time a client decides this is the theme for him or her is tiresome, tedious and NOT efficient.  It will require you to read new documentation, get familiar with different theme panels and coding techniques used by the developer in question.

Quality

Also there are many themes out there on Themeforest and other places that just have not been coded well.  Often themes inject CSS and javaScript in odd ways making it hard to override CSS using a child theme, lack options which require me to use lots of plugins, adding lots of files to the stack, making it hard to optimize the site. Sometimes pages are not even valid causing different displays in different browsers.

Something missing

Most of the time these starter themes or frameworks had something I liked, but they were always lacking something or were not rigid enough in the way they were set up to truly offer clients high end themes and get them these in the quickest way possible.

Support

When you create your own code, or know a starter theme inside out you can provide your own support. When you use a theme that is supported by WordPress experts you have people to fall back too. Roots is such a warm and fuzzy place.

Roots to the rescue

When you create a product for a client don’t do something half-assed. Deliver quality and know your product. Good quality products attract good quality clients. And that is something we all want right?

Modern WordPress Development with Roots to the rescue! Roots is a all encompassing framework. Not a WordPress framework, but a place where people help you build better WordPress sites, become a better programmer and build sites faster. This by providing you with a Modern WordPress Stack: Bedrock, efficient provisioning system with Ansible and a kick ass starters theme called Sage.

This does not mean this will be easy. Learning a new work structure takes time, but believe me this is worth it. I am only a beginner, but I have been convinced and as a new enthusiast I will do my best to bring you over to the dark side too 😉

Modern WordPress Development with Roots

So what is modern WordPress Development with Roots? Well it is a package that helps you set up your local, staging and production environments,  put together a modern WordPress Stack AND provides you with a very effcient WordPress Starters Theme to deliver awesome WordPress sites your clients will love!

Bedrock

• Bedrock Modern WordPress Stack- Better folder structure, Dependency management with Composer, Easy WordPress configuration with environment specific files,  Environment variables with Dotenv, …

Bedrock-Ansible

•  Bedrock-Ansible – Easy server provisioning with Ansible (Ubuntu 14.04, PHP 5.6 or HHVM, MariaDB), Local Vagrant Package, One-command deploys, WP CLI,..

Sage

• Sage Starters Theme – Roots Starters Theme managed with NPM asset builder, Bower for front end package management, Gulp for image optimization, concatenationan and minification and sass/less compiling and error checking, Browser Synch.

See next post(s) with more details on Bedrock, Bedrock Ansible and Sage:

  • Bedrock
  • Bedrock Ansible – To be added
  • Sage – To be added
  • Roots WordPress Stack Workshop

Bedrock Modern WordPress Stack

Bedrock Modern WordPress Stack is a package that helps you set up a WordPress environment at lighning speed with Ansible and Vagrant to work on a site locally or on a server. It setups a better folder structure, makes loading plugins easier, takes care of deployment and puts your WordPress credentials in a safer place.

Features of Bedrock Modern WordPress Stack

Bedrock Modern WordPress Stack is modern because it is using the latest techniques out there to make WordPress development professional fast and easy. I will go though the main features now here below.

Composer

In the case of Roots Bedrock it uses composer for the installation of WordPress, phpdotenv and the management of all plugins. Composer is a dependency manager like NPM or bundler for Ruby and helps you manage PHP packages. You can read more about Composer working together with WordPress here, but the  magic of it in Roots projects is that it will automagically install WordPress for you and the earlier mentioned php packages that have been included in the json file. It also allows you to update your installation with easse and add plugins to your setup that will be maintained by composer as well as long as you add the plugin to the json file.

PHP dotenv

PHP dotenv is a setup in which environmental variables are loaded from a .env file. As the author states: “You should never store sensitive credentials in your code. Storing configuration in the environment is one of the tenets of a twelve-factor app.” So basically this is a safer way to store your WordPress configuration data instead of the storing it in a .php file

Folder Structure

It uses a better folder structure.

bedrock site tree

In their wiki Roots explains why the structure is better. Let me summarize it for you:

  • All required files are moved into web and all others are put into separate folders that do not have to be exposed in the webroots
  • wp-content is renamed to make clearer what is in there.
  • wp-config.php does stay in the web folder  because that is a requirement by WordPress, but the actual configuration files have been moved as explained earlier
  • vendor is where all composer dependencies are stored and that is where the WordPress core files live too. They are files you need for your app whether it is your plugin or theme.

MU Plugin Auto Loader

Bedrock has an option that allows standard plugins to be required and installed via Composer. Foxaii explains the benefits of this at Roots Discourse:

It enables must-use plugins to be installed via composer and it enables you to declare standard plugins as must-use (meaning that they don’t need to be activated manually and cannot be deactivated from the dashboard).

WP CLI

WP CLI is also included and it is a great command line tool to manipulate WordPress. You can do almost anything you would normally do from the Dashboard with WordPress Core tools or plugins, but with simple commands and less overhead. A few examples:

  • wp plugin install hello-dolly
  • wp import /path/to/file – to import wxr file into WordPress with all content or whatever the WXR package contains
  • wp any-ipsum – with plugin installed
  • wp backupbuddy backup 2 – do a full BackupBuddy backup
  • wp acf status – provides a list of found field-groups in the current database of your WordPress project.

Bedrock Ansible

Bedrock-Ansible is basically an extension of Bedrock and helps you with easing the deployment of sites and management of sites locally, on staging and production environments. With the awesome use of Roots’ Ansible Playbook you can setup a WordPress environment locally with the entire Bedrock structure, put together a Vagrant Box that runs NGINX, PHP 5.6, MariaDB and WordPress with a database by just filling in a few variables. To me this is what truly makes Bedrock awesome.

To quote from the Bedrock Ansible github page:

Bedrock-ansible will configure a server with the following and more:

  • Ubuntu 14.04 Trusty LTS
  • Nginx (with optional FastCGI caching)
  • PHP 5.6 (or HHVM)
  • MariaDB as a drop-in MySQL replacement (but better)
  • sSMTP (mail delivery)
  • Memcached
  • Composer
  • WP-CLI
  • Fail2ban
  • ferm
  • SSL support

And this my friends is truly awesome.

Deployment

Not only does this get setup locally, but options can be added to push all this to a staging server and or production server. Ansible has var files in which you add your WordPress Dashboard user details, database details, url and so on. This can be done for the local, staging and production server. And you get to add connection details too so you can push all to the server using a shell script.

More on Bedrock Ansible in a soon to be published post. Here is the WordPress LEMP Stack Management with Trellis Post

Translate Comments in WordPress

For one of the many projects of mine “Teacher in A Bottle” I have been looking for a plugin or way to translate comments on the fly. That is to say to automatically translate comments when a visitor wants to. Or way to get comments made translated into the language of the teacher. There are many translate plugins that add a widget to your site to for example use Google Translate to translate the whole page in language x, but what if you want to translate only the comments made on a page? Just because these were made in Russian and your native language is English?

Outdated Stuff

I quickly bumped into many plugins that were outdated such as “Translate This Button” , “Global Translator”  , Google AJAX Translations  and others. I also found many that just offer to install / load a translate widget as mentioned such as the Google Translate Plugin .

Comments Translation Only

As said I only wanted to get the conversation or comments translated. Google does have an app for this. Now I need integration with WordPress or if need be Disqus commments. I prefer not to integrate the site with Google Plus comments  as not everybody uses G+. The same goes for the Facebook Translate option out there  , which is abysmall anyways as it uses Bing Translate.

Disqus and Google Translate

Cloudpipes says they have an option to make Disqus work with Google Translate here but this is an invite only option and I did not see any demos.

Google Translate Plugin

One option would be to use the Google Translate Plugin  the way WordPress Beginner suggests here and then use the shortcode to wrap comments made perhaps. There is a Bing like plugin as well, but as said Bing isn’t great at translating as of yet. So the Google Translate option with template adjustments using the built in shortcode might be the best way to go.

Shortcode in Template

To actually use the shortcode

[google-translator]

to translate a part of the site I found out the shortcode was not made for this. It is just to load the translation widget in a different location. That it can be useful still I will explain below. To use shortcode in a template please see the WordPress Codex here. A snippet like:

<?php
echo do_shortcode('[google-translator]');
?>

will do the trick very nicely.

Exclude Site Content

This same Google Translate plugin also offerts the option to make certain parts of the site not translatable so you could make all NOT translateable, but the comments section. I quote from their FAQ “Add the “notranslate” class to the HTML element containing your text” This class you could add to all elements except for the one loading the comments and then add the translation button with the shortcode just above the comment section.

There we go, we made some progress 🙂 !

Featured Imagehttp://en.wikipedia.org/wiki/Tower_of_Babel

Command Line Installation WordPress

To install WordPress from the command line there are several tools available WordShell (commercial) and wp-cli (free)to name a few –  but here I will show you how you can use the basic command line or shell to speed up things.
We do a full WordPress installation from the command line we will use the command line  to download the latest WordPress version, untar  it(decompress the archive) and remove the WordPress folder using typical *Nix commands.
https://gist.github.com/4640125

You can also add a new database using the shell. See here the command to import database data:

https://gist.github.com/4529189

To create a new database you will need to log into the MySQL client and then create one.

mysql -u root -p

CREATE DATABASE dbasename;

Could be you need to type mysql5 instead of mysql, but the rest should be the same. You then need to grant privileges to the database for a user of choice:

GRANT ALL PRIVILEGES ON dbasename.* TO user@host IDENTIFIED BY 'user_pass';

NextGen Gallery Template Sample 5

Well here as promised at a WordPress.org support forum post and requested by Marc Serra the code to make a NextGen Gallery similar to sample 5 and as shown at www.ultimatefijivacations.com.

!This Code is not re-formatted for general use and might not be complete. Will try to rework the code some other time.

I created a folder with three essential files:

  • gallery-resort-php
  • style.css with styles including the ones for the gallery
  • single-resort.php
Here the code for gallery-resort.php with the gallery code:
<?php/**
 Template Page for the adjusted gallery carousel

Follow variables are useable :

$gallery : Contain all about the gallery
 $images : Contain all images, path, title
 $pagination : Contain the pagination content
 $current : Contain the selected image
 $prev/$next : Contain link to the next/previous gallery page

You can check the content when you insert the tag <!--?php var_dump($variable) ?-->
 If you would like to show the timestamp of the image ,you can use <!--?php echo $exif['created_timestamp'] ?-->
 **/
 ?>
 <!--?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?--><!--?php if (!empty ($gallery)) : ?--></pre>
 <div class="ngg-galleryoverview">
 <div id="resortpic">
 <div id="picborder">
 <div class="pic"><img title="<?php echo $current->alttext ?>" src="<?php echo $current->url; ?>" alt="<?php echo $current->alttext ?>" />
 <div id="resort-info"></div>
 </div>
 </div>
 </div>
 <div id="ngglist">
 <ul class="ngg-gallery-list">
 <ul class="ngg-gallery-list">
 <li class="ngg-prev"><a class="prev" href="<?php echo $prev ?>"><img src="<?php echo CHILDTEMPLATEIMAGES . '/resort-slider-previous.jpg' ; ?>" alt="" /></a></li>
 </ul>
 </ul>
 <ul class="ngg-gallery-list">
 <ul class="ngg-gallery-list">
 <li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>">
 <a title="<?php echo $image->description ?>" href="<?php echo $image->pidlink ?>">
 <img title="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" />size ?> />
 </a></li>
 </ul>
 </ul>
 <ul class="ngg-gallery-list">
 <ul class="ngg-gallery-list">
 <li class="ngg-next"><a class="next" href="<?php echo $next ?>"><img src="<?php echo CHILDTEMPLATEIMAGES . '/resort-slider-next.jpg' ; ?>" alt="" /></a></li>
 </ul>
 </ul>
 </div>
 <div id="nggpanel"><!--?php if ($prev) : ?-->
 <a href="<?php echo $prev ?>"><img class="previmage" src="<?php echo CHILDTEMPLATEIMAGES . '/gallprev.gif' ; ?>" alt="" />PREVIOUS</a>
 <!--?php endif; ?-->
 |
 <!-- NEXT LINK -->
 <!--?php if ($next) : ?-->

<a href="<?php echo $next ?>">NEXT</a> <img class="previmage" src="<?php echo CHILDTEMPLATEIMAGES . '/gallnext.gif' ; ?>" alt="" />

<!--?php endif; ?--></div>
 </div>
 <pre>
 <!--?php endif; ?-->

And here the gallery page CSS code

/* ##################################
 RESORT PAGE
 ################################## */

#resort-info {
 position:absolute;
 bottom:0;
 background:url('images/resort-desc-bar.png');
 background-repeat:repeat-x;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
 left:0;
 width:700px;
 height:44px;
 }

#pic-caption{

}

#pic-title {

}
 .pic {
 position:relative;
 color:#69c5ff;
 }

.ngg-gallery-list li img {
 width:110px;
 height:80px;
 }

li.ngg-next, .ngg-next a.next, li.ngg-next a.next img {
 height:80px;
 width:15px;
 padding:0;
 }

.ngg-gallery-list li.ngg-prev, .ngg-next a.prev, li.ngg-prev a.prev img {
 height:80px;
 width:15px;
 padding:0;
 }

li.ngg-next a, li.ngg-prev a {
 padding:0;
 }

#content ul, #content ol {
 padding:0 0 0 20px;
 }

.ngg-gallery-list {
 margin: 10px 0 0 0;
 }

On single-resort.php I added the code to load the gallery:

<?php /* NG Gallery Custom Field Rotating Images */
 $gallery = get_post_meta($post-&gt;ID, 'Gallery ID Number', true);
 $gal = $gallery;
 //$gal = 1; //REMOVE THIS JUST FOR TESTING
 if( !empty($gal) )
 {
 $nggtemplate = "template=resort images=5";
 $gal = apply_filters('the_content', '[nggallery id='.$gal.' ' . $nggtemplate. ']' );
 echo $gal;
 }
 ?>