How to Set Up a WordPress Development Site with Codio’s Free Cloud-Based IDE

codio-new-logo

Codio is a cloud-based IDE that is primarily used in the education sector but is also available to developer professionals. The service provides instant coding environments with support for code editing and a large array of popular programming languages and software components.

By making the IDE available to users through the browser, Codio eliminates the hassle that educators experience when setting up development environments for students. Projects created in Codio are accessible both in the classroom and at home, which helps students continue their learning outside of the classroom.

Codio offers a free account that gives you 256 MB memory per project and 2 GB storage per project. Other pricing tiers cater to teachers, students, schools, universities, and professionals. However, the free account is perfect for creating a quick development site with WordPress, and you can set it up in under five minutes.

Step 1: Create a New Project

After creating an account with Codio, you’ll be greeted with a prompt to create a new project. Click through to get started with a new project that will contain your development environment.

codio-projects-screen

You’ll now have the opportunity to choose from three different starting points: an empty project, a starter pack, or a GitHub import. Select “a starter pack.”

codio-create-project

This will take you to a page that lists all of Codio’s certified starter packs, which help you easily get started with technologies like Angular, Node + Express, Drupal, Ruby on Rails, and more. There are a dozen starter packs that are certified and supported by the Codio team.

codio-starter-packs

Fortunately, there’s a starter pack for WordPress that will automatically set up MySQL, Apache, and PHP. This makes the setup process quick and hassle-free, and you’ll be using the latest version of WordPress in just a couple minutes.

After you select the WordPress starter pack, you’ll be returned to the project page. Free accounts are limited to public visibility on projects, so you may need to upgrade to the Pro plan if you require private projects.

Step 2: Configure WordPress

After you complete the project setup, you’ll be dumped out onto the readme file for your project where you’ll find instructions for configuring and installing WordPress. If you’re bothered by non-capital P’s in WordPress, steady your nerves and remember that someone made this for you to use for free.

Navigate to “Configure Project” in the top menu and then follow the instructions in the terminal to run the configuration script. When prompted for your password, press Enter. This is the only action you need to take during the process.

codio-configure-project

Step 3: Install WordPress

Once configuration is complete, navigate to “WordPress Login” in the top menu. This will take you through the normal installation process.

codio-wordpress-install

Now you should be able to log in at the following URL:

http://theory-opera.codio.io:3000/wordpress/wp-admin/

Step 4: Activate the Permalink Fix & Disable Canonical Redirects Pack Plugin

Once you’re in, the last required step is to go straight to plugins and activate the Permalink Fix & Disable Canonical Redirects Pack plugin, which you’ll find pre-installed. Visit the front end like you normally would and you’ll see your shiny new WordPress site.

codio-wordpress-frontend

The URL for your site will look something like this:

http://theory-opera.codio.io:3000/wordpress/

Within the Codio interface you can easily edit WordPress core, theme, and plugin files, as well as upload new files. If you have WordPress projects hosted on GitHub, you can easily import those into Codio to make changes and push those changes back to the repository.

The cloud-based IDE is very similar to using WordPress on Koding in many respects, and I found it equally easy to set up on both services. Both provide a quick way to do some testing, without having to set up a development environment on your local machine. If you decide to experiment and break everything, it’s safe and easy to start over. Codio’s friendly environment provides a great way to get your friends or children started with using WordPress.

Since Codio was developed with educators in mind, the dashboard has a handful of helpful tutorials for learning about Git, an introduction to HTML and CSS, and an introduction to Javascript. If one of your 2015 resolutions is to get started learning some technologies outside of WordPress, such as Ruby, Python, or Angular, Codio is a great option for getting development environments up and running so that you can start learning right away.

5

5 responses to “How to Set Up a WordPress Development Site with Codio’s Free Cloud-Based IDE”

  1. Hey Sarah!

    Been a reader for a while now, first time commenting.

    Thanks for the heads up on this. I’m a part-time educator (full-time developer elsewhere) teaching WordPress and web design at my local probation office in San Francisco to young adults and any community members that drop in.

    It’s always been a challenge to get configurations on the workstations right, especially so with GIT.

    This really seems like it would be a tool that could come in extremely handy in the sense that the students whom typically are homeless or can’t afford computers, could totally be able to pick up and continue on their project at a local library or any other computer outside of the classroom.

    Although Koding is an excellent product, from experience, having tutorials available within a few clicks and without having to remember a less than intuitive URL is always a big plus. It’ll actually get used!

    I just want to say, Thank You!

    Your post help fill the gaps where knowledge and time and an ever-growing list of services don’t always find each other.

    Thank You,
    Tulio

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Discover more from WP Tavern

Subscribe now to keep reading and get access to the full archive.

Continue reading