Joyce Grace

Learning the Basics of the WordPress web development trade at WordCamp Seattle

by

Although I’m a Vancouver WordPress developer, I went to this year’s WordCamp Seattle, where we learned great tips for starting out with WordPress web development. Lucy Beer was the presenter on this topic and she did a great job of pointing out things every web site developer should know, and especially if you are planning on working with WordPress.

Here are my notes from the WordCamp Seattle lecture, as well as my later reflections and commentary on Lucy’s great tutorial: 

 

Getting set up with your WordPress developer tools: 

1) You need an FTP program. For example, I use FileZilla, but there are many other programs out there. I will tell you another little secret of mine that Lucy Beer may not like me telling you…[whispers] I love using File Manager on cPanel, it saves me from having to keep re-uploading and replacing files via an FTP program. As one person told me this helps prevent carprel tunnel syndrome too  :) 

2) You need a text editing program. This is not like using Microsoft Word to edit text that you write. This refers to something like Notepad, Smultron, Text Edit (Mac) or, what I like, Text Wrangler on a Mac (it colour codes your tags so you can see and sift through your code clearly).

3) You need a Desktop Server for local installations, so you can test things and work while not on a live site. Lucy Beer mentioned ServerPress.com which has free and premium versions.

4) You need to be able to see HTML, CSS and other code online, so for this you will need Chrome Developer Tools or Firebug on Firefox.

 

Working like a PROFESSIONAL WordPress developer:

In short, you must have backups! Otherwise you could stand to lose a lot of your work should anything happen. It’s not just hacks you need to be worried about, but you yourself could do something to break your site (happens to the best of us), and when that happens, sometimes only a backup can save you.

The way Lucy Beer put it was “remove fear by building a safety net.” Here are some pointers on when and how to use backups:

Backup files AND database before upgrading WordPress.

Use any of these tools to create WordPress backups:

  • BackupBuddy (now has “Stash” which can store your files off-site, a new feature they just introduced).
  • VaultPress (I personally recommend this to clients because it is easiest to use for non-techy people).
  • Duplicator (a free backup tool recommended by Lucy).
  • WP-DB-Backup + FTP files backup WordPress plugin.

 

Other notes on “building a safety net”:

Practice locally first, before you apply your changes to a live site.

Practice with test sites on your own server before working on your clients’ servers.

Things will break, and that’s ok – this is how we learn!  :)

 

Best practices for tweaking your code in WordPress:

Always retain the original copy of any file you are working on. Computer languages can be super particular, and if you are missing a tag that is breaking the site, and can’t find it, your best course of action will be to just revert to where you started from and try again.

Use a text editor and FTP program – don’t use the WordPress dashboard Editor under “Appearance” to change your code. Sometimes you can break something there and won’t be able to go back and change it, so you’ll have to use FTP anyway.

Use comments in your code if you make a lot of changes, that way you can keep the original stuff there so you can see where you started in one particular spot, and where you ended up if something goes wrong.

NEVER EVER touch the WordPress core files! Those changes will be lost on update, not to mention you can do some serious harm to WordPress if you do. The only files you should be using or making any edits to are:

  • .htaccess file (rules are written in here when you change permalinks in WordPress Settings. Also for security some rules may need to be written in here).
  • wp-config.php file (this connects the site to the MySQL database. If you ever get the error message “error establishing a database connection”, it is probably because there is a password or something wrong in the wp-config.php file).
  • wp-content folder
  • Your theme files inside the wp-content folder. Even better, you should utilize child themes, which are a copy of your parent theme with a new name, and make all your changes there so that if you update your theme, your changes will be preserved instead of over written by the update. Studiopress has a lot of high quality themes that utilize the parent and child theme structure in WordPress. I love using them for WordPress development projects.

 

What’s not on the server when building a site with WordPress?

Ah ha! If you are just getting started with WordPress as a developer you will notice that your content, user info, site settings, plugin settings and many other things are no where to be found via FTP on your server. This is because WordPress uses what is called a MySQL database. This is where all your “stuff” is stored.

You can access the database using a program called PhpMyAdmin. Most hosting companies that use CPanel will have this program available to you, such as Hostgator. Hosting companies that don’t use CPanel, but you need to check with them before you sign up for their service. For example WP Engine is a superior, specialized WordPress hosting company and they do give you easy access to your database, even though they don’t use CPanel or many of its features.

Lucy mentioned you can also install a plugin called Aminer to be able to access your database from the WordPress dashboard.

 

Anatomy of a WordPress site

Although Lucy talked about this, she mentioned that popular WordPress guru Joast de Valk has a graphic online about the anatomy of a WordPress site. The basics you need to know are that WordPress is made up of these files when building a WordPress theme: 

Header.php (NOTE: Genesis themes, which I recommend, use and talk about a lot, don’t use this file. There are other ways to access the header area of Genesis themes from the WordPress dashboard. This is a tricky one to developers who are not used to working with Genesis). 

Sidebar.php

Footer.php

Functions.php – everything in this file works sort of like a plugin. Sometimes there are inbuilt SEO, or social sharing features, etc. If for example you google a tutorial and it says, “take this code and put into functions.php,” this is where you put it. It is basically providing ways to add new functionality to your site.

Then depending on your layout or set up, different files may be controlling your site, such as:

Index.php

Single.php

Page.php

You also must have a style.css file in your theme folder! To set up a child theme, simply add this to your theme folder (modify content of course for your own set up): 

/*

Theme Name: Twenty Eleven Child Theme

Author: The wordpress team + ME

Template: twentyeleven – most important

@import url(“../twentyeleven/style.css”); – most important

*/

This will set up the child theme folder.

 

What to do when your WordPress site breaks.

Chances are it is a plugin conflict. You might have installed a plugin that does not comply with the latest WordPress standards, could be conflicting with your theme (which may be the thing not up to WordPress codex standards), or two plugins could be interacting badly.  First course of action is to try deactivating all your plugins, then reactivate them one by one until you find the culprit. 

What if a bad plugin breaks your site so bad you can’t access your WordPress dashboard anymore?

You will need to go into your FTP server and do a manual de-activation by renaming the file (Lucy suggests putting a few dashes in front of the name).  This will make it unreadable to WordPress and then your WordPress dashboard will say, “the plugin has been deactivated due to an error: Plugin file does not exist.” But at least at that point you can access your site.

What if it’s not a plugin?

Then it’s probably the theme. Try testing your site using the Twenty Twelve theme (or whatever WordPress has released as its latest ‘gold bar’ standard default theme). If the problem goes away you know there is something wrong with your theme.  But be sure to create a back up, and maybe set up a testing environment on your server or somewhere where you can revert themes.

For this I love using Import Buddy by Backup Buddy – it migrates sites very easily and quickly and makes life a lot easier for this Vancouver WordPress developer!

 

WordPress Resources

Finally Lucy mentioned some great resources to check out which will help you on your way to becoming a great WordPress developer! Thanks Lucy!

Awesome blogs and resources