Monday, November 6, 2017

How to Host Your Open-Source WordPress Theme on GitHub

Publishing an open-source WordPress theme sounds relatively simple if you follow the steps provided in the Theme Developer Handbook. However, what happens once a piece of code breaks the theme, while you're in the middle of developing another feature? Without a way to easily track and manage code, your theme may soon become unorganized and unwieldy.

Version control enables you to track changes to your WordPress theme so you can revert to a previous iteration when something breaks. You can also work on new features in one place while fixing bugs for old versions in another.

In this article, you will first learn about version control and its capabilities. Then, you'll find steps for how to host your open-source WordPress themes on GitHub, so you can take advantages of version control. Let's get started!

Introducing Version Control, Git, and GitHub Git homepageGit is a version control system.

In its simplest definition, version control enables you to track your files over time. Version Control Systems (VCS) let multiple contributors add and receive changes, track those changes, and maintain multiple versions of the same codebase. This also means you can easily backup and restore old versions of code whenever necessary.

Git is a robust open-source VCS. Furthermore, GitHub is a popular, free hosting service for managing your open-source themes using Git in the cloud. Many major open-source projects such as Bootstrap, Node.js, and jQuery are built using GitHub. Industry giants like Google, Facebook, Twitter, and Netflix all use GitHub to manage code. In short, you and your code are in good company with Git!

With GitHub, you'll always have backups of your code available from anywhere in the world with an internet connection. Plus, it comes with a thriving community and plenty of documentation, making it easy to share with others. Naturally, GitHub offers code tracking thanks to Git's built-in features, and also offers issue tracking, wikis, and the ability to add multiple official contributors to your project.

Once your theme is on GitHub, you'll be able to take advantage of Git's advanced features to manage updates down the line. For example, Git branches enable you to work on multiple versions of your theme at once. This is helpful when you are working on features for a new version, but still, need to track and update bugs on the current version.

Overall, a VCS such as Git and a service such as GitHub offers developers a controlled way to manage code changes over time. All that's left is to learn how to use it!

How to Host Your Open-Source WordPress Theme on GitHub (In 5 Steps)

Git could be intimidating at first for beginner developers. However, GitHub makes it relatively simple to start learning by offering plenty of step-by-step documentation. You can also read the open-source book Pro Git for free online, to get a complete introduction to the topic.

We've narrowed down the process of getting you up and running with your WordPress theme on GitHub to five steps. The only requirement for this tutorial (other than an internet connection) is access to the command line on the computer where you're developing your WordPress theme.

Step 1: Register an Account on GitHub

GitHub offers free accounts for all open-source projects, and creating one is a simple process. First, visit the GitHub home page and provide a username, current email address, and strong password:

GitHub signup page

On the next page, select the Unlimited public repositories for free option. You can change this later if you want to host private themes or other proprietary projects on GitHub. Click Continue at the bottom of the screen to move on to your profile:

GitHub welcome page

The final page of the signup process will ask you a few questions so GitHub can give you useful tips while you work. You can fill this section out and click Submit, or simply click Skip this step located at the bottom of the screen:

GitHub tailor your experience

Finally, GitHub may offer to train you to use their service, depending on how you filled out the previous page. You can optionally follow the provided GitHub Hello World guide. However, we're about to lead you through a more in-depth process, specific to your WordPress theme.

Step 2: Install Git On Your Computer

Before you can proceed further, you'll need to install Git locally on your computer. This will enable you to communicate between your locally developed theme and GitHub's hosting resources.

To start, visit the Git downloads page and grab the appropriate version for your operating system. Regardless of your platform, you can open up the provided file and follow the prompts for installation.

Once Git is installed, you'll want to configure your user account so it easily connects to GitHub. In your chosen command prompt, enter the same name and email you signed up to GitHub with, using the following commands:

$ git config --global user.name "John Doe" $ git config --global user.email johndoe@example.com

$ git config --global user.name "John Doe"

$ git config --global user.email johndoe@example.com

You can also optionally pre-configure stored HTTPS or SSH authentication. This means either caching your GitHub password in Git or setting up Secure Shell (SSH) keys within your GitHub account. While these will make updates faster in the future, they're not required to complete this tutorial.

Step 3: Choose the Theme You'd Like to Host on GitHub

Next, it's time to find the theme you'd like to host at GitHub within your local development environment. You can use the Change Directory (cd) command to navigate to your WordPress theme folder. Of course, you'll need to use the path to match your development environment, but here's an example:

$ cd /user/Sites/wordpress/wp-content/themes/your-theme-name/

1

$ cd /user/Sites/wordpress/wp-content/themes/your-theme-name/

This will place you within your theme's folder. This is important because the next thing you want to do is tell Git you'd like to work with this folder as its own project:

Git will now have been added to your project. Next, your theme will need its own 'repository' on your local computer, which is the name for projects in Git.

Step 4: Create a GitHub Repository for Your Theme

With Git added to your theme on your development computer, it's time to create a GitHub repository you can sync your files with! To get started, open up your account on GitHub again. In the upper right-hand corner, click the plus sign and choose New repository from the provided drop-down:

GitHub new repository

You'll be greeted with a small form to explain what your new project is, so choose a repository name. We recommend using the name of your theme. GitHub will convert your name to lowercase, and replace spaces with dashes. You can optionally fill in a description, although you'll need to mark the repository as being Public. When you're finished, click Create repository.

GitHub new repository form

Congratulations, you're almost finished! Armed with this new GitHub repository, there is only one more step to add your theme files to GitHub.

Step 5: Commit Your Theme to GitHub

It's time to connect the dots between your theme's local Git repository and GitHub's remote repository. In your theme folder in the command line, add all your theme files to Git using this command:

Adding files indicates to Git you are finished making changes to them for now. You can then take added files and bundle them into a single 'commit', which you will send to GitHub in a moment. To create a commit, use the following command:

$ git commit -m "Initialize theme"

1

$ git commit -m "Initialize theme"

The m flag in this command stands for "message". This is simply a descriptive note about what files are being committed and why. In this case, we are initializing the theme in GitHub. In the future, you would use it to describe new changes, such as 'Adding support for featured images' or something similar. Now the commit is prepared for sending.

GitHub quick setup link

Finally, you need to actually send this commit to GitHub. Use the provided URL to replace the one in the following command:

$ git remote add origin https://github.com/torque-example/wordpress-theme-name.git

1

$ git remote add origin https://github.com/torque-example/wordpress-theme-name.git

This creates the link between your local Git repository and GitHub. To send everything over, type:

$ git push -u origin master

1

$ git push -u origin master

If you didn't save your password or set SSH keys earlier, you will be prompted to enter your username and password for GitHub to finish sending the changes. Once this process is complete, you can refresh the project on GitHub to see all of your new files.

Going forward, you can follow the same add and commit cycle to save your code on GitHub whenever you make a new change:

$ git add . $ git commit -m "Explain the new changes here" $ git push -u origin master

$ git add .

$ git commit -m "Explain the new changes here"

$ git push -u origin master

That's all it takes! From here on out, your theme will be available on GitHub and you can always track new changes there.

Conclusion

GitHub is a free way to host your open-source WordPress themes and take advantage of version control in your development projects. This acts as a free backup of your theme, while also giving you management tools for keeping track of your changes over time.

In this article, you've learned about the power of version control, as well as the five steps required to start hosting your open-source themes on GitHub:

  • Register an account on GitHub.
  • Install Git on your computer.
  • Choose the theme you'd like to host on GitHub.
  • Create a repository for your theme.
  • Commit your theme to GitHub.
  • What questions do you have about getting started with GitHub? Let us know in the comments section below!

    Image credit:  Jantine Doornbos.

    John Hughes

    John is a blogging addict, WordPress fanatic, and a staff writer for WordCandy.


    Source: How to Host Your Open-Source WordPress Theme on GitHub

    No comments:

    Post a Comment