Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 2 – How to Setup a Genesis Development Environment

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In the traditional method of learning PHP they talk about working locally which means working on your local computer or working on a computer that sits in front of you but we are going to work primarily on a live website.

Why Create a Local File Structure?

But before we do that we are going to need to create a local file structure that mirrors the website files because, in fact, we will do our actual programming using a piece of software on our own computers rather than say using the custom file editor in WordPress.

Problems with Using the Custom File Editor

I’m going to demonstrate the problems with using the custom file editor. There is all kinds of horrible advice out there that suggests you use a custom file editor for editing and that’s just a recipe for disaster that’s essentially impossible for you to recover from or very very difficult for you to recover from.

Tools We’ll be Using

We’re going to work on a local copy of the file and then use the FTP Client upload to the site and that actually brings me back to the tools of the trade that we’ll be using in this.

FTP/FileZilla

If you are familiar with my instruction, you’re going to be familiar with these. You can review how to use an FTP client in this video. I’ll be using FileZilla which is my FTP client.

NetBeans

I’ll be using NetBeans which is my preferred PHP code editor. It is a free editor and if you want to know how to use it, how to install it and set it up, I do have tutorials on the site so I encourage you to look at those videos.

Chrome

Finally, I’ll be using Chrome. I do almost all of my development using Chrome. I almost never use anything else. Chrome generally provides me with all the tools that I need in order to know what’s going on with the site.

You’ll see me demonstrate those tools as I work my way through this process but those are the 3 tools of the trade that I use and I’ll be using here.

Why These Tools?

The reason I use those is because, one, they are all free which is handy. They are all very well supported and they’re all very useful.

There are other tools you can use. There are other code editors, there are even some other free code editors. You can buy code editors and many people do that but I have a preference for this system and so that’s the system you’ll see demonstrated.

Setup the Local File Structure

The very first thing we’re going to do is actually setup the local file structure for the site we’re going to work on. Now, I personally keep all of the websites that I’m working on under this www section of my site. It happens to be inside the wamp directory although really I almost never run wamp really. You can put your stuff wherever you want but you should have a place where you develop projects.

Create Customizing Genesis and WP File Structure Folders

I’m going to start off by creating a new folder and we’ll call this Customize Genesis Like a Pro, CGLP. Inside that I’m going to create another new folder and now I’m mimicking the WordPress file structure. So wp-content and then inside of wp-content I’m going to create another folder called themes and then I’m going to leave it at that.

Now I’ve got this Customize Genesis Like a Pro folder with wp-content and themes inside of it.

Create a New Connection Using FileZilla

The next thing I’m going to do is open up FileZilla and I’m going to create a new connection. I am using sbywh12.byobgenesis.com, that’s the site we’ll be working on. I am going to duplicate that and we’re going to call this one CGLP – Customize Genesis Like a Pro.

My connection to these things are already setup but I need to change my local directory so I’m going to set my local directory to this file system we just created which is that one there.

Say okay to that and then connect and now I’ve got this wp-content folder. Actually, I’m sorry I should have said that I teach this is using synchronize browsing so that when I open up a folder on my local computer it opens it up in the remote.

Now if that doesn’t immediately makes sense to you, as I mentioned, I do have a whole section on how to use FileZilla and how to setup this synchronize browsing between a local directory and the live site. And that’s what we’re doing right here.

If I open up wp-content it opens up wp-content over here on the real website and if I open up themes it opens up the themes folder here. In this case, I have a number of themes installed. I have Enterprise Pro and I have Genesis and I’m actually going to download those to my themes folder so I have those to work with.

Really, we’re not going to be editing anything inside of the Genesis folder anyway but we will potentially look at the Genesis file structure. If I open up Enterprise Pro, I’ll setup as file name there and file name so I can see all the same stuff over here and over here. I’ve just copied it across.

Set Up a Project Inside of NetBeans

The third thing I need to do is setup my project inside of NetBeans. I’m going to say new project in NetBeans and in this case, I’m just going to choose HTML5 application because that’s the way I have this configured.

Then I’m going to browse to the location which in this case, is not Bootcamp class but goes back to wamp, www and then CGLP, that’s my new project. The project name will be CGLP.

Actually, pardon me. I’m sorry I should’ve shown HTML5 application with existing sources, that’s what I knew would do. Now I choose the site route, again go back to that because I already have existing files here. So I want to use those existing files. Just hit finish.

Now I have a project created called CGLP and I’ve got my wp-content, themes and my Enterprise Pro child theme here.

Working With the Genesis Theme and Child Theme

It’s important to understand, and everybody here probably does understand, that Genesis works almost always with two themes. It starts off with a parent theme which is Genesis and then it’s got any one of these StudioPress themes. In this case, we’re going to use Enterprise Pro. But it could be your own custom child theme or someone else’s. But generally speaking, when you are building a site in Genesis you have two themes that interact together.

Why You Should Not Edit Genesis Files Directly

The Genesis theme is the parent theme and really, you don’t edit anything in this. There’s never any reason for you to edit anything inside of this Genesis theme folder. The child theme folder has a couple of files in it that people say are available for you to edit.

Unrecoverable Mistakes Can Happen

If you’ve ever read a Genesis tutorial about how to do something in Genesis, usually they’ve either told you to open up style.css and add some CSS to it or open up functions.php and add code to that or open up front-page.php and add some code to that. But, in fact, I don’t believe that you should do any of those things.

The reason is that if you edit style.css you have the chance of messing up something in style.css without a very clear way of fixing it.

If you do the same thing to functions.php again, you have exactly the same situation. You have a very real possibility or probability that you are going to edit something here and then having no way no way of getting back to the original.

That’s one of the reasons why I strongly advise against editing either functions.php or style.css inside your child theme.

If this is your first introduction to this conversation you may be surprised to learn that everybody else out there tells you to do this. But really because you are new to this you don’t necessarily know what you’re doing. And as you learn you make mistakes and you make mistakes that can be very difficult to recover from if you are editing style.css and functions.php.

Lose Your Edits When Child Themes are Updated

In addition to that, Genesis does from time to time upgrade their child themes. And in fact, if you go look at the Genesis downloads you’ll see that there are a number of child themes that were updated last month. And you can’t upgrade a child theme that has been edited without losing all of those edits.

So if you edit functions.php or style.css you have made your theme un-upgradable or you have to figure out what parts of it you did yourself and what parts you changed and copy them off to some other file, upgrade and then go back and put them back in again. That’s the only fix you have.

Use the BYOB Genesis Child Theme Editor Plugin for Editing

I’m going to introduce a new system that gives you the ability to easily customize your favorite child theme while still preserving your ability to upgrade it. We are going to use a plugin that I created for this purpose, the BYOB Genesis Child Theme Editor.

You can find the plugin on my site under Member Benefits on the Menu. Just go down here to Plugins for the Genesis theme and then scroll to the BYOB Genesis Child Theme Editor Plugin.

How the Plugin Works

This plugin does a number of things but one of the things it does is it creates two new files and it uses the plugin to link those files into whatever child theme you happen to be working on. This means that you don’t ever have to worry about screwing up your actual child theme files.

Download and Install the Plugin

You need to download it and then once you’ve done that you can come over here and install it. So that’s what we’re going to do on this site. This is a site that I built in the course of a seminar I gave a couple of months ago. It is a customized version of Enterprise Pro.

I’ve downloaded it and now we’re going to come down here to Plugins and Add New. Then upload a plugin and choose the file. Go to my downloads and sort by date. You can see I’ve downloaded it before, byob-genesis-child-theme-editor(1). I’m going to delete this one because I know I’ve upgraded this and use the fresh copy of it. Choose the byob-genesis-child-theme-editor.

Install it, activate the plugin and now you have this BYOB Genesis Plugins item on the menu here and we’re going to go to the Child Theme Editor.

Turn Off Error Reporting in wp-config File

We’ve got a BackupBuddy error here, we can go ahead and ignore this for the time being. Actually, what I’m really going to do is I’m going to come back over here to wp-content and turn off errors in the wp-config, DEBUG, false.

We’ll get rid of the error reporting which will just get in our way. Upload the changed wp-config file, choose always overwrite.

Where to Put Your Custom CSS

We are not working currently in Custom CSS although you can choose to put your Custom CSS either in a file called BYOB Custom CSS, in the child theme stylesheet if you wish or in the head of your document, whatever it is. This is a code editor for CSS so you can use this to edit your CSS if you wish.

Add byob-custom-functions.php File to use for Editing

For PHP what we’re going to do is check this box to “add a custom.php file to the child theme directory” and hit save. What this does is it creates a new file in that directory. If we come back over to FileZilla and go down to Enterprise Pro, you’ll see there is a byob-custom.css and there should be a byob-custom-functions.php file.

Let’s refresh my view. And now you can see it was added to the child theme. So I’m just going to download that to my local computer and this is the file that I’m going to edit.

What Happens When You Upgrade the Child Theme

Now, the benefit of editing this file is that even if it gets deleted as long as you’ve got it on your local computer you can just always reload it back up. So it may get deleted in an upgrade but the only thing you have to do is reload byob-custom-functions.php and you’ll have all your code back. So it’s a very simple system.

How This System Works Well for Disaster Recovery

Let’s go back over to our NetBeans code editor now. And we’ll close these style.css and functions.php files and open up the new byob-custom-functions.php. Here we have a blank file, a file ready for us to work on.

Now, why do it this way? I’ve already talked about the upgrade ability issue. What I didn’t really talk much about is the disaster recovery issue. If we were using the system that everybody talks about and recommends which is here under Appearance and Editor and then it’s Theme Functions file, we could be in real trouble.

If we were to do that and if it were to have a code error in it, it would crash the site and the only way you could get back to it would be to either download this and edit it on your local computer to fix it or delete the theme and reinstall it.

Usually when that happens is that people don’t have any idea how to use FTP and so the whole thing falls apart for them, they just get the big white screen of death. I’m going to show you what that looks like here. We’re going to add a statement and it’s just going to be an echo statement but I’m going to misspell it.

NetBeans Alerts you to Syntax Errors

Now in the first place, because I’m using NetBeans, it’s an error checking code editor, it’s telling me right now that there is a syntax error here. Let’s say I did that in my functions file and if I save that upload it to my site, it’s going to bring my site down. I have the big white screen of death here.

The whole reason why is because I introduced a PHP syntax error in the theme which caused the site to crash. The troubleshooting solution would be to comment this out which means select it and then go over here to the comment button. Comment out that code, upload it and then reload it now the site’s going to look fine.

That’s the downside of following the typical advice about editing your functions.php file and editing your style.css and using the custom file editor to do that.

Really, the only people who should be doing that are people who are so good at it that they do not make syntax errors when they type that stuff in. I can assure you, it doesn’t really matter how careful you are, you’re going to make syntax errors and when you do that you’ll bring your site down which means you need a very simple way of recovering from that.

Nothing could be simpler than essentially hitting the undo button and reloading up a clean file and having your site come back. That gives you a chance then to go and figure out what’s wrong with your code.

However, if you make that edit in the functions file in the editor on your site, you don’t have any easy way of recovering. So for whatever reason all of the tutorials tell you to do that but no professionals ever do that. Professionals always work on local files because it’s just so much easier to recover from the errors that even professionals inevitably make when they’re working on this sort of thing.

So that’s the system we’re going to use. We are going to use the plugin with the byob-custom-functions.php file.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one