Join Morten Rand-Hendriksen for an in-depth discussion in this video Setting up a development environment, part of WordPress: Building Child Themes.
- View Offline
- When you start developing your own child themes and full themes, you need to have a development environment on your computer. Now, a development environment can be something really basic like what we're going to be using in this course, or it can be something extremely advanced. Because this is a Level Up course, I'll show you how to set up a basic development environment that will serve our purposes. And then as we become more advanced, I'll help you set up more advanced development environments in other courses. So what do you need? Well, a minimum development environment requires the following components.
First of all you need to install WordPress on your computer. You can do this in multiple different ways, and we have a series of courses in the library to show you how to do that. It's called "Installing and Running WordPress," and it has different solutions for Windows computers, for Mac computers, for hosted services, and for other services. What you're looking at here is installing WordPress locally on your computer, and I would recommend using either WAMP for Windows computers, MAMP for Macs, or Desktop Server for either/or. By installing WordPress locally on your computer, you'll be able to work with the theme files and see the changes happen in real time in your browser.
You don't have to move the files from your computer to a server and then reload anything. Setting it up requires setting up a server environment on your computer, and that's what these tools like WAMP and MAMP will do for you. Next, you need some form of standard code editor or IDE. Now, there are hundreds of code editors and IDE's available, and you can choose whichever one serves you the best. My recommendation if you don't already have one is to use the one called Atom that's available for free at atom.io, that's what I'll be using in this course.
You can also use one called Brackets, also free and open source and available at brackets.io, and there are other code editors available, including SublimeText and Coda and so on. Some are for free, some are for pay, and some are available on a trial basis. Doesn't really matter which one you use, just make sure you have a proper code editor installed. Once that's in place, you need to populate your WordPress site with some content. Now there are different ways you can do that. If you have an existing WordPress site somewhere on the web, you can import the content from that site into your local install, or you can import what's known as the WordPress theme unit test data.
If you go online and search for "theme unit test data," you'll find a link to it. That's what I'll be using in this course. Or you can simply build up your site with some dummy content. It is important that you have some content on your site though, because otherwise you can't really test the theme that you're building. Finally, you need various browsers, including Chrome and Firefox for testing. Now depending on the platform you're on, you will have a default browser, either Windows Edge, or Mac Safari, and you should install some other browsers, including Chrome and Firefox and, ideally, Opera.
These browsers will be used both in the development process, you'll notice that I'll be using Chrome and its developer tools, and you'll also have to use these browsers to test what you have done in the different browser environments. Because although all the browsers take you to the same web, they interpret the web in slightly different ways, and any time you build a theme, or child theme or anything else, you need to make sure that what you are building works across all the different browsers. If this is the first time you're doing development, this might seem like a lot of work but trust me, this takes about ten minutes to set up, and once you have it set up in your computer, you'll be able to start working for the rest of the course.
WordPress: Building Child Themes opens the world of child theme development to anyone, no matter what level of experience or expertise. It helps you build your child theme on top of an existing properly coded foundation, and create stylish new WordPress sites—without the advanced knowledge of a web developer. Morten Rand-Hendriksen explains how to get started picking a parent theme, updating the CSS, creating a new template for your child theme, and updating its functionality. By the end of this practical, project-based course, you should have a functioning child theme and the skills to quickly customize your next WordPress site.
- What is a child theme?
- Creating and activating a child theme
- Overriding or overwriting?
- Changing existing styles
- Adding new styles
- Creating templates for the child theme
- Adding new menus and widgets
- Replacing custom web fonts