WordPress Backup on CentOS

Now that I’ve moved my website over to CentOS, I’ll be showing you how I do backups.

My Setup

  • VirtualBox – CentOS web server running WordPress
  • iMac – connected Drobo

Goal

  • Run daily mysql backups
  • Run weekly website backups
  • Only keep the latest two backups
  • Run daily rsync’s to my Drobo from my iMac

CentOS — Create a backup directory within your home folder

mkdir -p /home/tommy/backup/itsmetommy.com

CentOS — Backup MySQL Database

How to run it manually.

/usr/bin/mysqldump -u tommy -psupersecretpassword itsmetommy > /home/tommy/backup/itsmetommy.com/itsmetommy_$(date '+%Y%m%d-%H%M%S').sql

CentOS — Backup Website Directory

How to run it manually.

/bin/tar -czvf /home/tommy/backup/itsmetommy.com/itsmetommy_$(date '+%Y%m%d-%H%M%S').tar.gz -C /var/www/ itsmetommy.com

You can see that both files are located in /home/tommy/backup/itsmetommy.

ls -l /home/tommy/backup/itsmetommy.com
total 6731528
-rw-r--r-- 1 root root 9927065 Dec 25 21:55 itsmetommy_20151225-215541.sql
-rw-r--r-- 1 root root 6883148434 Dec 25 22:04 itsmetommy_20151225-215602.tar.gz

CentOS — Setup cron

No one wants to run backups manually, so lets add these commands as a cronjob.

crontab -e
@daily /usr/bin/mysqldump -u tommy -psupersecretpassword itsmetommy > /home/tommy/backup/itsmetommy.com/itsmetommy_$(date '+\%Y\%m\%d-\%H\%M\%S').sql
@weekly /bin/tar -czvf /home/tommy/backup/itsmetommy.com/itsmetommy_$(date '+\%Y\%m\%d-\%H\%M\%S').tar.gz -C /var/www/ itsmetommy.com

If you’re having problems, check your cron logs.

tail -f /var/log/cron

MAC — Setup rsync on my MAC

I first created a backup directory on my Drobo.

mkdir -p /Volumes/Drobo5D02/Backup/itsmetommy.com

How to run it manually.

rsync -hva -e ssh --delete --progress tommy@itsmetommy.com:/home/tommy/backup/itsmetommy.com/ /Volumes/Drobo5D02/Backup/itsmetommy.com

MAC — Setup cron

Note: My iMac is always on, so this isn’t a problem for me. Obviously you may need to revisit the timing or method if your computer is not always on and connected to the internet.

Run everyday at 1am.

crontab -e
0 1 * * * /usr/bin/rsync -hva -e ssh --delete  tommy@itsmetommy.com:/home/tommy/backup/itsmetommy.com/ /Volumes/Drobo5D02/Backup/itsmetommy.com > /dev/null

The above setup works, but I really only want to keep the last two backups of both the .sql and .tar.gz files, otherwise I’d run out of space.

CentOS — only keep the last two backups

How to run it manually.

cd /home/tommy/backup/itsmetommy.com; ls -t | grep sql | tail -n +3 | xargs rm; ls -t | grep tar | tail -n +3 | xargs rm

CentOS — Setup cron

crontab -e
@weekly cd /home/tommy/backup/itsmetommy.com && /bin/ls -t | /bin/grep sql | /usr/bin/tail -n +3 | /usr/bin/xargs /bin/rm
@weekly cd /home/tommy/backup/itsmetommy.com && /bin/ls -t | /bin/grep tar | /usr/bin/tail -n +3 | /usr/bin/xargs /bin/rm

WordPress Google Font with Child Theme

I choose Open Sans as my font for my site (as of writing this post). Now that I’ve created a child theme, I want to change the font. To do this, we will be working with our style.css and functions.php files within our child theme folder.

Update functions.php

function google_fonts() {
 $query_args = array(
 'family' => 'Open+Sans',
 'subset' => 'latin,latin-ext',
 );
 wp_register_style( 'google_fonts', add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null );
 }
add_action('wp_enqueue_scripts', 'google_fonts');

Update style.css

/* google font */
ul li {
 font-family: open Sans, sans-serif;
}

p {
 margin: 0 0 20px;
 font-family: open Sans, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: open sans, sans-serif;
}

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

WordPress prismjs with Child Theme

  • Step 1: Go to http://prismjs.com/download.html
  • Step 2: Select your theme and languages
  • Step 3: Download JS and CSS files (bottom of the page)
  • Step 4: Upload files into child theme folder
  • Step 5: Update funtions.php with the below code
  • Step 6: Apply css <pre> and <code> class (see below examples)
<?php

// Function to add prism.css and prism.js to the site
function add_prism() {
// Register prism.css file
wp_register_style(
'prismCSS', // handle name for the style so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
);
// Register prism.js file
wp_register_script(
'prismJS', // handle name for the script so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

?>

I ended up having to update the background color to match the prismjs color, along with the paragraph margin spacing within the child-theme style.css file.

/* Update color to match prismjs background */
code,
        hr {
                background-color: #272822 !important; /* Make sure color schemes don't affect to print */
        }

p {
        margin: 0 0 20px;
}
Examples

javascript

input

<pre class="line-numbers"><code class="language-javascript">var myObject = {
property1: "something",
property2: 5,
property3: true
};</code></pre>

output

var myObject = {
property1: "something",
property2: 5,
property3: true
};

bash

input

<pre class="line-numbers"><code class="language-bash">#!/bin/bash 
count=99 
if [ $count -eq 100 ] 
then   
	echo "Count is 100" 
else   
	echo "Count is not 100" 
fi
</code></pre>

output

#!/bin/bash 
count=99 
if [ $count -eq 100 ] 
then 
 echo "Count is 100" 
else 
 echo "Count is not 100" 
fi

html

input

<pre class="line-numbers"><code class="language-markup">&lt;img src="/images/itsmetommy.png"&gt;</code></pre>

output

<img src="/images/itsmetommy.png">

css

input

<pre class="line-numbers"><code class="language-css">pre {
 border: 1px solid #d1d1d1;
 font-size: 16px;
 font-size: 1rem;
 line-height: 1.3125;
 margin: 0 0 1.75em;
 max-width: 100%;
 overflow: auto;
 padding: 1.75em;
 white-space: pre;
 white-space: pre-wrap;
 word-wrap: break-word;
 background: #272822;
 color: #f8f8f2;
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}</code></pre>

output

pre {
 border: 1px solid #d1d1d1;
 font-size: 16px;
 font-size: 1rem;
 line-height: 1.3125;
 margin: 0 0 1.75em;
 max-width: 100%;
 overflow: auto;
 padding: 1.75em;
 white-space: pre;
 white-space: pre-wrap;
 word-wrap: break-word;
 background: #272822;
 color: #f8f8f2;
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

php

input

<pre class="line-numbers"><code class="language-php">&lt;?php
phpinfo();
?&gt;
</code></pre>

output

<?php
phpinfo();
?>

WordPress Child Themes

The main reason to create a child theme is so that your edits do not get overwritten when doing any sort of updates to your main (parent) theme. The steps are fairly simple.

This example is for the Twenty Sixteen theme.

Navigate into your themes folder.

cd /<your_website_root_folder>/wp-content/themes/

Create a child directory within your themes folder and cd into it.

mkdir twentysixteen-child; cd twentysixteen-child

Create two files, style.css and functions.php.

Create style.css

Note: Update the appropriate fields.

/*
 Theme Name: Twenty Sixteen Child
 Theme URI: http://itsmetommy.com/twentysixteen-child
 Description: Twenty Sixteen Child Theme
 Author: Tommy Elmesewdy
 Author URI: http://itsmetommy.com
 Template: twentysixteen
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain: twentysixteen-child
*/

/* Your code goes below this line */

Create functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

Now go to your WordPress Dashboard > Appearance > Themes. You will notice that you now have a new theme called Twenty Sixteen Child.

WARNING: I ended up having to redo my Colors and Widgets once I activated the new child theme

Click Active and your done.

Create a Twitter Sidebar Widget within WordPress

This is how you create a simple Twitter sidebar widget that shows your last few tweets (I hate that word) from your Twitter account in three simple steps. It was actually really simple. I was initially looking for a plugin, but figured out I didn’t need one.

Step 1:

Sign in and create a new widget https://twitter.com/settings/widgets/new.

Note: Manage your Twitter widgets via https://twitter.com/settings/widgets.

Change any settings you’d like (I changed the theme from Light to Dark) and click Create widget.

twitter_widget

Step 2:

Copy the code.

twitter_widget_2

Step 3:

Browse to your WordPress widgets section and add a Text box to your Primary Sidebar, or anywhere you’d like to display the Twitter Timeline, and paste the Twitter widget code there.

twitter_widget_3

Click save and you should have a nice simple Twitter Timeline right in your website to help drive social traffic to your Twitter page.