Tips & Tricks for Changing the Design/Content of a WordPress Site

I spent a good part of the weekend on a re-design of a client’s dental practice site. Like probably 95% of dentist/doctor practices’ sites out there, this site runs on WordPress. Here’s the updated design:

Here’s the mobile version:

I didn’t have time to find/get better photos for the mobile dentistry service at the bottom of the page, so those photos will have to do for now.

So, here are some tips for how to quickly make changes to an existing WordPress site:

Learn the Theme

Familiarize yourself with the WordPress theme in use. Every theme works a little differently. The theme for this site exposes a lot of the options via its Theme Options menu, but not all theme customizations can be done there. Some of the options must be done in WordPress’s built-in Appearance/Customize menu.

Most commercial themes also come with fairly extensive documentation. Give the docs a read-over at least once.

Learn the Plug-ins

Many sites / themes make heavy use of plug-ins. For example, this dentist office’s site uses Slider Evolution to show a slider on the home page. Slider Evolution itself is fairly deep application with lots of options.

Use the String Locator Plug-in

The String Location plug-in is great for when you see some element on a page that you need to change, but have no idea how it gets there. This plug-in lets you easily search through your themes, plugins, or even WordPress core to find files containing the text.

Track Your WordPress Site in Git

Adding the site’s files to a git repo allow you to track changes you make to the theme’s files (style.css, header.php, etc.) and easily revert or identify exactly what you changed.

You should configure your .gitignore to ignore at least the following folders/files:

• uploads
• /wp-content/plugins/
• /wp-content/mu-plugins/
• cache/
• backups/

Make Frequent Site & MySql Backups

Set up automated backups of the site’s files and database, so that in the case a disaster happens, you have something to go back to.

Here’s the script I use to back up my files and database:

# database

/usr/local/bin/mysqldump -h<host> -u<user> -p<password> <dbname> > ~/backup/divadentistry_main.sql

# Files
/bin/tar zcvf ~/backup/divadentistry.gz ~/public_html/divadentistry.com

Override CSS with Appearance/Customize/Additional CSS

With WordPress themes, the “Additional CSS” feature can be used to customize CSS to your liking. I find that the best way to use this is in conjunction with Chrome Dev Tools. I would try to get a relevant class for the element I need to tweak, and customize its CSS. A lot of times you need to add “!important” for your override to take effect. A really cool thing about the Additional CSS feature is that any CSS change takes effect right away in the preview pane.