{"id":70949,"date":"2022-11-30T18:19:00","date_gmt":"2022-11-30T18:19:00","guid":{"rendered":"\/tutorials\/?p=70949"},"modified":"2026-03-10T09:28:45","modified_gmt":"2026-03-10T09:28:45","slug":"wordpress-github","status":"publish","type":"post","link":"\/ca\/tutorials\/wordpress-github","title":{"rendered":"WordPress GitHub: how to incorporate and use GitHub for better website development"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>GitHub is an essential tool for web developers. By storing your project database on its cloud-based remote server, different users can track, manage, and change it anytime.<\/p><p>Integrating WordPress with GitHub can improve your website development process and make your team&rsquo;s workflow more efficient.<\/p><p>This article will cover all about WordPress and GitHub integration. We will explain why you should use GitHub and provide step-by-step instructions to integrate it with WordPress. Finally, we will recommend WordPress GitHub plugins to help your development tasks.<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-why-should-you-choose-github-for-wordpress-development\">Why Should You Choose GitHub for WordPress Development<\/h2><p>Before discussing GitHub, we will explain what <strong>Git <\/strong>and <strong>version control <\/strong>are. They are essential for understanding GitHub and how it can improve your website development workflow.<\/p><h3 class=\"wp-block-heading\" id=\"h-what-are-version-control-and-git\">What Are Version Control and Git<\/h3><p>Version control is a system for tracking changes in a set of files, such as software development codes. It stores all versions of your project files in a <strong>repository <\/strong>or <strong>repo <\/strong>for short.<\/p><p>There are two main types of version control systems &ndash; <strong>centralized<\/strong> and <strong>distributed<\/strong>.<\/p><p><strong>Centralized version control systems<\/strong> require users to connect to the main repository to make changes. When the repository encounters a problem, users can&rsquo;t access or modify it.<\/p><p>Meanwhile, <strong>distributed version control systems <\/strong>allow users to make modifications without accessing the main repository. Users can clone the repository and modify files on their local machine.<\/p><p><a href=\"\/ca\/tutorials\/git-tutorial\">Git (Global information tracker)<\/a> is the most popular distributed version control system. Since Git is hosted on a remote server, multiple people can access and work on the same project simultaneously.<\/p><p>There are various Git hosting platforms, but GitHub is the most popular. It also offers <a href=\"https:\/\/www.geeksforgeeks.org\/difference-between-git-and-github\/\" target=\"_blank\" rel=\"noopener\">additional features<\/a> on top of the essential Git functionality.<\/p><p>When developing a WordPress site, you may need to edit plugins, themes, or core files. Although you can edit WordPress files with only text editors, it is a tedious process that&rsquo;s prone to errors.<\/p><p>GitHub creates a <a href=\"\/ca\/tutorials\/wordpress-version-control\">version control<\/a> that backs up your WordPress files. It also shortens the development process, allowing you to immediately apply changes to the server.<\/p><p>\n<div><p class=\"important\"><strong>Important!<\/strong> WordPress doesn&rsquo;t recommend modifying your core WordPress files except for <a href=\"https:\/\/wordpress.org\/support\/article\/editing-wp-config-php\/\" target=\"_blank\" rel=\"noopener\">wp-config.php<\/a><span>. You should only modify a core file when it&rsquo;s faulty and not without creating a backup first.<\/p><\/div><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-what-are-the-benefits-of-github\">What Are the Benefits of GitHub<\/h3><p>GitHub has many benefits for web developers, including:<\/p><ul class=\"wp-block-list\">\n<li><strong>Version control<\/strong>. This platform stores different versions of your project and tracks every change. You can identify each change and revert to a previous version when needed.<\/li>\n\n\n\n<li><strong>Free web hosting<\/strong>. GitHub offers hosting services for WordPress websites. This way, you can apply changes to the website directly on GitHub, increasing efficiency.<\/li>\n\n\n\n<li><strong>Integration with WordPress<\/strong>. WordPress has various GitHub plugins with features that can help your development projects.<\/li>\n\n\n\n<li><strong>WordPress plugin and theme repositories<\/strong>. Many developers use GitHub repositories to store their themes or plugins. If a plugin or theme is unavailable in WordPress&rsquo;s official library, you can likely install it from GitHub&rsquo;s repository.<\/li>\n\n\n\n<li><strong>User-friendliness<\/strong>. The GitHub desktop application has a user-friendly visual interface, making it easier to use than the typical command-line Git. And since it has <a href=\"https:\/\/docs.github.com\/\" target=\"_blank\" rel=\"noopener\">comprehensive documentation<\/a>, it is an excellent option for Git beginners.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-how-github-benefits-distributed-teams\">How GitHub Benefits Distributed Teams<\/h3><p>The main benefit of using GitHub is easy collaboration, thanks to features such as:<\/p><ul class=\"wp-block-list\">\n<li><strong>Cloud-based repository<\/strong>. GitHub lets users clone the main repository on their local machine. This way, developers can make changes to the repo offline and merge them with the version on the cloud when finished.<\/li>\n\n\n\n<li><strong>Branching<\/strong>. <a href=\"\/ca\/tutorials\/how-to-use-git-branches\/\">Git branches<\/a> simplify task distribution. They let team members work on independent development lines simultaneously without clashing with each other.<\/li>\n\n\n\n<li><strong>Pull request. <\/strong>This<strong> <\/strong>feature lets you assign up to 10 people to work on a specific task. This way, you can know what others are working on and review the changes before applying them to the main repository.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-how-to-create-a-local-wordpress-environment-for-git\">How to Create a Local WordPress Environment for Git<\/h2><p>Before using GitHub, create a local version of your WordPress site. This local development site is for testing changes, including new themes, plugins, or designs.<\/p><p>Any modifications on your local WordPress site will not affect the live website until you deploy them.<\/p><h3 class=\"wp-block-heading\" id=\"h-local-wordpress-tools\">Local WordPress Tools<\/h3><p>Use a local web development tool to create a WordPress environment on your machine. Based on the functions, there are two tool types &ndash; <strong>general-purpose<\/strong> and WordPress <strong>development tools<\/strong>.<\/p><p>General-purpose tools let you create any <a href=\"\/ca\/tutorials\/development-environment\">web development environment<\/a>. They support all <a href=\"\/ca\/tutorials\/what-is-a-cms\/\">Content Management Systems (CMS)<\/a>, but you must install the CMS manually.<\/p><p>Although you can use general-purpose tools for WordPress development, we recommend WordPress-specific development ones instead. They are pre-installed with WordPress, making them more convenient.<\/p><p>For this tutorial, we will use <a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener\">Local WP<\/a>. This development tool has a Graphical User Interface (GUI), making it user-friendly and ideal for beginner web developers. Follow these steps to set up Local:<\/p><ol class=\"wp-block-list\">\n<li>Visit <a href=\"https:\/\/localwp.com\/releases\/\" target=\"_blank\" rel=\"noopener\">Local&rsquo;s release note web page<\/a>.<\/li>\n\n\n\n<li>Download Local&rsquo;s latest version for your operating system.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Local_s-latest-version-download-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"399\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Local_s-latest-version-download-page-1024x399.png\" alt=\"Local's latest version download page\" class=\"wp-image-70951\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Run the <strong>Local installer<\/strong>. Follow the <a href=\"https:\/\/localwp.com\/help-docs\/getting-started\/installing-local\/\" target=\"_blank\" rel=\"noopener\">installation guide<\/a> according to your operating system.<\/li>\n<\/ol><p>After the Local WordPress installation process finishes, create a local development site:<\/p><ol class=\"wp-block-list\">\n<li>Open Local. For now, skip the account creation step by clicking the <strong>X<\/strong> button.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Local_s-welcome-screen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"642\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Local_s-welcome-screen-1024x642.png\" alt=\"Local's welcome screen\" class=\"wp-image-70954\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>On the<strong> Terms of Service<\/strong> window, check <strong>the box <\/strong>and click <strong>I agree<\/strong>.<\/li>\n\n\n\n<li>On Local&rsquo;s dashboard, click <strong>Create a new site<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Creating-a-new-site-on-Local_s-dashboard.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"494\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Creating-a-new-site-on-Local_s-dashboard-1024x494.png\" alt=\"Creating a new site on Local's dashboard\" class=\"wp-image-70955\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Select <strong>Create a new site <\/strong>and<strong> <\/strong>click <strong>Continue<\/strong> to proceed.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Local_s-create-a-site-window.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"633\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Local_s-create-a-site-window-1024x633.png\" alt=\"Local's create a site window\" class=\"wp-image-70956\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Enter your<strong> website name<\/strong> and click <strong>Continue<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Naming-your-new-website-on-Local.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Naming-your-new-website-on-Local-1024x577.png\" alt=\"Naming your new website on Local\" class=\"wp-image-70957\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"6\" class=\"wp-block-list\">\n<li>Select your local environment settings. If you are unsure, select <strong>Preferred<\/strong>. Click <strong>Continue<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Setting-your-new-website_s-environment-on-Local.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"564\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Setting-your-new-website_s-environment-on-Local-1024x564.png\" alt=\"Setting your new website's environment on Local\" class=\"wp-image-70958\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"7\" class=\"wp-block-list\">\n<li>Enter your WordPress account details. For WordPress multisite, select <strong>Yes <\/strong>under <strong>Advanced options<\/strong>.<strong> <\/strong>Click <strong>Add Site<\/strong> to confirm, and your new site will appear on the Local dashboard.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Setting-up-your-WordPress-account-on-Local.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Setting-up-your-WordPress-account-on-Local-1024x560.png\" alt=\"Setting up your WordPress account on Local\" class=\"wp-image-70959\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Once your local environment is ready, install a text editor to change your site data. With Local, you can install <strong>VSCode <\/strong>directly from its dashboard:<\/p><ol class=\"wp-block-list\">\n<li>From the Local dashboard, open the add-ons<strong> <\/strong>menu represented by the <strong>puzzle icon<\/strong> on the left sidebar.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Local_s-add-on-installation-menu.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Local_s-add-on-installation-menu-1024x469.png\" alt=\"Local's add-on installation menu\" class=\"wp-image-70960\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Click <strong>Xdebug + VS Code<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Xdebug-VS-Code-plugin-on-Local_s-add-on-menu.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Xdebug-VS-Code-plugin-on-Local_s-add-on-menu-1024x469.png\" alt=\"Xdebug + VS Code plugin on Local's add-on menu\" class=\"wp-image-70961\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>The installation window will show. Click <strong>Install Add-on<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Installing-Xdebug-VS-Code-Local-add-on.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"591\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Installing-Xdebug-VS-Code-Local-add-on-1024x591.png\" alt=\"Installing Xdebug + VS Code Local add-on\" class=\"wp-image-70962\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Wait until Local finishes installing and restarting.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-how-to-install-git-locally\">How to Install Git Locally<\/h3><p>You must install local Git first to use the GitHub remote repo. Your local Git repository is where you will commit changes before pushing them onto GitHub.<\/p><p>A machine running the latest Linux or macOS may have Git pre-installed. Check by typing <strong>git &ndash;version<\/strong> in the <strong>Terminal<\/strong>.<\/p><p>For Windows, type<strong> <\/strong><strong>git version<\/strong> into the <strong>Command Prompt.<\/strong><\/p><p>If Git is already installed, your command-line application<strong> <\/strong>will return Git&rsquo;s version number. Otherwise, it will tell you that Git is an unknown command or ask whether you want to install it.<\/p><p>You can manually download the Git installer and run it on <a href=\"https:\/\/git-scm.com\/download\/mac\" target=\"_blank\" rel=\"noopener\">macOS<\/a>, <a href=\"https:\/\/git-scm.com\/download\/linux\" target=\"_blank\" rel=\"noopener\">Linux<\/a>, or <a href=\"https:\/\/git-scm.com\/download\/win\" target=\"_blank\" rel=\"noopener\">Windows<\/a>. Alternatively, download one of the <a href=\"https:\/\/git-scm.com\/downloads\/guis\/\" target=\"_blank\" rel=\"noopener\">Git GUI clients<\/a> if you prefer working with a user-friendly interface instead of the command line.<\/p><p><a href=\"https:\/\/git-scm.com\/book\/en\/v2\/Getting-Started-Installing-Git\" target=\"_blank\" rel=\"noopener\">Git installation steps<\/a> differ depending on your operating system. This tutorial will show you how to install Git on the Windows command line interface:<\/p><ol class=\"wp-block-list\">\n<li>Download the Git installer for Windows.<\/li>\n\n\n\n<li>Run the<strong> installer<\/strong>. Click <strong>Next <\/strong>and <strong>Finish<\/strong> to complete the installation using the default option.<\/li>\n\n\n\n<li>Open the <strong>Windows Start menu<\/strong> and search <strong>Git Bash<\/strong>. Press<strong> Enter<\/strong>.<strong><\/strong><\/li>\n\n\n\n<li>Verify if Git is already installed by executing the <strong>git version<\/strong> command.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Git-version-command-returning-installed-Git_s-version-number.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"116\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Git-version-command-returning-installed-Git_s-version-number-1024x116.png\" alt=\"Git version command returning installed Git's version number\" class=\"wp-image-70963\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Now, create a local repository using Git Bash. If you are unfamiliar with Git, read our <a href=\"\/ca\/tutorials\/basic-git-commands\">basic Git commands<\/a> article to learn its basics.<\/p><p>For example, here is how to create a repository for WordPress&rsquo; Twenty Twenty default theme:<\/p><ol class=\"wp-block-list\">\n<li>Explore the <strong>wp-content <\/strong>directory and open the <strong>twentytwenty <\/strong>theme folder.<\/li>\n\n\n\n<li>Right-click anywhere on the folder and click <strong>Git Bash Here.<\/strong><\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Git-Bash-Here-on-a-repository-folder.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Git-Bash-Here-on-a-repository-folder-1024x567.png\" alt=\"Git Bash Here on a repository folder\" class=\"wp-image-70964\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>A <strong>Git Bash <\/strong>window will open. Type <strong>git init<\/strong> and hit <strong>Enter<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Using-the-git-init-command.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"105\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Using-the-git-init-command-1024x105.png\" alt=\"Using the git init command\" class=\"wp-image-70965\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Type<strong> git add .<\/strong> and press<strong> Enter<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Using-the-git-add.-command-to-add-changes.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"222\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Using-the-git-add.-command-to-add-changes-1024x222.png\" alt=\"Using the git add. command to add changes\" class=\"wp-image-70972\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Type <strong>git commit -m &ldquo;message&rdquo;<\/strong> and hit <strong>Enter<\/strong>. Replace the <strong>message<\/strong> with any phrase, but make sure it is clear and descriptive.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Using-the-git-commit-command-to-save-the-changes-to-the-repository.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"195\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Using-the-git-commit-command-to-save-the-changes-to-the-repository-1024x195.png\" alt=\"Using the git commit command to save the changes to the repository\" class=\"wp-image-70983\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>If successful, a hidden <strong>.git folder <\/strong>should show up.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/A-hidden-.git-folder-appears-after-creating-a-remote-repository.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"262\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/A-hidden-.git-folder-appears-after-creating-a-remote-repository-1024x262.png\" alt=\"A hidden .git folder appears after creating a remote repository\" class=\"wp-image-70984\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-how-to-create-and-commit-to-your-first-github-repository\">How to Create and Commit to Your First GitHub Repository<\/h2><p>Now, you will learn how to create a repository on GitHub and push the local one there. The GitHub repository is where all the team members will work on applying their changes.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-register-for-a-github-account\">How to Register for a GitHub Account<\/h3><p>If you already have a GitHub account, skip this section and sign in to your account. Otherwise, do the following:<\/p><ol class=\"wp-block-list\">\n<li>On your web browser, go to <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener\">GitHub<\/a> and click the <strong>Sign up <\/strong>button<strong> <\/strong>on the top right of the page.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Sign-in-button-on-GitHub_s-website-homepage.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"465\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Sign-in-button-on-GitHub_s-website-homepage-1024x465.png\" alt=\"The Sign in button on GitHub's website homepage\" class=\"wp-image-70985\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Enter your <strong>email address<\/strong> and click <strong>Continue <\/strong>to proceed.<\/li>\n\n\n\n<li>Create a <strong>username <\/strong>and <strong>password<\/strong>. Then, choose whether you want to receive news and updates. Click <strong>Continue<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/GitHub_s-account-registration-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"599\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/GitHub_s-account-registration-page-1024x599.png\" alt=\"GitHub's account registration page\" class=\"wp-image-70986\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Verify your account<\/strong> by clicking <strong>Start Puzzle <\/strong>and solving it. Then, select the <strong>Create Account <\/strong>button.<\/li>\n\n\n\n<li>Check your email inbox for a launch code from GitHub. Type the code into the <strong>Enter code<\/strong> boxes and hit <strong>Enter<\/strong>.<\/li>\n\n\n\n<li>Answer some questions to automatically configure the GitHub account based on your preferences. Otherwise, click <strong>Skip personalization.<\/strong><\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/GitHub-asks-questions-for-a-new-account-personalization.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/GitHub-asks-questions-for-a-new-account-personalization-1024x585.png\" alt=\"GitHub asks questions for a new account personalization\" class=\"wp-image-70988\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"7\" class=\"wp-block-list\">\n<li>Choose either<strong> <\/strong>the <strong>Free Account<\/strong> or <strong>Team Account<\/strong>.<\/li>\n\n\n\n<li>Wait until GitHub redirects you to your account page.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-how-to-create-your-first-github-repository\">How to Create Your First GitHub Repository<\/h3><p>To create a new repository, sign in to your GitHub account. Then, on any page:<\/p><ol class=\"wp-block-list\">\n<li>Click the <strong>+ <\/strong>icon on the top right of the page. From the drop-down menu, select <strong>New repository<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-New-repository-button-on-GitHub.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"228\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-New-repository-button-on-GitHub-1024x228.png\" alt=\"The New repository button on GitHub\" class=\"wp-image-70990\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>On the <strong>Create a new repository<\/strong> page, select an <strong>Owner <\/strong>and enter your <strong>Repository name<\/strong>. Optionally, add a <strong>Description<\/strong> for your repository.<\/li>\n\n\n\n<li>Select your <strong>repository&rsquo;s visibility<\/strong>. Refer to GitHub&rsquo;s <a href=\"https:\/\/docs.github.com\/en\/repositories\/creating-and-managing-repositories\/about-repositories#about-repository-visibility\" target=\"_blank\" rel=\"noopener\">guide on repositories<\/a> for more information.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Create-a-new-repository-page-on-GitHub.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"474\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Create-a-new-repository-page-on-GitHub-1024x474.png\" alt=\"The Create a new repository page on GitHub\" class=\"wp-image-70991\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Since we are pushing the local repository, skip <strong>Initialize this repository with:<\/strong> and click <strong>Create repository<\/strong>. Once created, GitHub will show your new empty repository.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Create-repository-button-on-GitHub_s-new-repo-creation-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"390\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Create-repository-button-on-GitHub_s-new-repo-creation-page-1024x390.png\" alt=\"The Create repository button on GitHub's new repo creation page\" class=\"wp-image-70992\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-how-to-make-your-first-github-commit\">How to Make Your First GitHub Commit<\/h3><p>After creating a GitHub repository, make your first commit by uploading your local repository data:<\/p><ol class=\"wp-block-list\">\n<li>Open your <strong>GitHub repository<\/strong>.<\/li>\n\n\n\n<li>Under the <strong>Quick setup <\/strong>section, find and copy the <strong>repository&rsquo;s URL<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-new-repository_s-URL-shows-under-the-Quick-Setup-section.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"397\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-new-repository_s-URL-shows-under-the-Quick-Setup-section-1024x397.png\" alt=\"The new repository's URL shows under the Quick Setup section\" class=\"wp-image-70993\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Open <strong>Git Bash<\/strong>. Type <strong>git remote add origin URL<\/strong> and press <strong>Enter<\/strong>. Don&rsquo;t forget to replace <strong>URL <\/strong>with your repository&rsquo;s link.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Connecting-a-remote-repository-to-the-local-one-using-git-remote-add-origin.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"92\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Connecting-a-remote-repository-to-the-local-one-using-git-remote-add-origin-1024x92.png\" alt=\"Connecting a remote repository to the local one using git remote add origin\" class=\"wp-image-70994\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Type <strong>git push -u origin master<\/strong> and hit <strong>Enter<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Pushing-local-repository_s-file-to-remote-using-the-git-push-u-origin-master-command.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"281\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Pushing-local-repository_s-file-to-remote-using-the-git-push-u-origin-master-command-1024x281.png\" alt=\"Pushing local repository's file to remote using the git push -u origin master command\" class=\"wp-image-70995\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>The <strong>connect to GitHub<\/strong> window will appear. Select <strong>Sign in with your browser<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Sign-in-with-your-browser-option-in-the-Connect-to-GitHub-window.png\"><img loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"429\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Sign-in-with-your-browser-option-in-the-Connect-to-GitHub-window.png\" alt=\"Sign in with your browser option in the Connect to GitHub window.\" class=\"wp-image-70996\"  sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/a><\/figure><\/div><ol start=\"6\" class=\"wp-block-list\">\n<li><strong>Sign in <\/strong>by entering your GitHub <strong>username <\/strong>and <strong>password<\/strong>.<\/li>\n\n\n\n<li>In the <strong>authentication screen, <\/strong>select <strong>Authorize GitCredentialManager<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-GitHub-authentication-screen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-GitHub-authentication-screen-1024x589.png\" alt=\"The GitHub authentication screen\" class=\"wp-image-70999\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"8\" class=\"wp-block-list\">\n<li>Open your GitHub repository, and your local repository&rsquo;s file should appear.<\/li>\n<\/ol><p>After you make changes to your local repository, push it to GitHub. It will update your GitHub repository with the new changes from the local version.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-fetch-updates-from-github-to-your-local-computer\">How to Fetch Updates From GitHub to Your Local Computer<\/h3><p>After pushing your local repository&rsquo;s files to GitHub, other users can make changes to them. To apply these changes to your local repository, you must <strong>fetch <\/strong>the updates from GitHub.<\/p><p>Fetching means downloading and merging updates into your local repository. While <strong>pull<\/strong> also downloads the updated repo, it doesn&rsquo;t automatically merge the data with your working files.<\/p><p>The steps for fetching updates from GitHub are:<\/p><ol class=\"wp-block-list\">\n<li>Open your <strong>project folder<\/strong>.<strong> <\/strong>In this example, we will open the <strong>Twenty Twenty WordPress theme folder<\/strong>.<\/li>\n\n\n\n<li>Right-click anywhere and select <strong>Git Bash Here<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Git-Bash-Here-on-a-repository-folder-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Git-Bash-Here-on-a-repository-folder-1-1024x567.png\" alt=\"Git Bash Here on a local repository folder\" class=\"wp-image-71000\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Type <strong>git fetch URL<\/strong> and press <strong>Enter<\/strong>. Your local repository should now be updated.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Downloading-and-merging-GitHub-repository-with-local-using-the-git-fetch-command.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"91\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Downloading-and-merging-GitHub-repository-with-local-using-the-git-fetch-command-1024x91.png\" alt=\"Downloading and merging GitHub repository with local using the Git Fetch command\" class=\"wp-image-71004\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-how-to-use-github-for-wordpress-development\">How to Use GitHub for WordPress Development<\/h2><p>After preparing all the tools, you can start using GitHub to work on your site development. Here is a sample workflow for changing your site&rsquo;s theme:<\/p><ol class=\"wp-block-list\">\n<li>Fetch your website theme&rsquo;s GitHub repository.<\/li>\n\n\n\n<li>Make changes to the theme and test it on the local server.<\/li>\n\n\n\n<li>Open the<strong> theme&rsquo;s folder<\/strong> &rarr; <strong>right-click anywhere<\/strong> &rarr; select <strong>Git Bash Here<\/strong>.<\/li>\n\n\n\n<li>Type <strong>git add<\/strong><strong> <\/strong>and press <strong>Enter<\/strong>. This<strong> <\/strong>tells Git that you want to include the changes for the next commit.<\/li>\n\n\n\n<li>Apply the changes to the local repo by executing the <strong>git commit<\/strong> command.<\/li>\n\n\n\n<li>Push your updated local repo to GitHub with the <strong>git push -u origin master<\/strong> command. Replace <strong>master<\/strong> with the branch name when pushing changes to another branch.<\/li>\n\n\n\n<li>Once ready, apply the changes to the live site by deploying your remote repo.<\/li>\n<\/ol><p>There are many ways of deploying remote repositories to the live production server. The most convenient method is to use a WordPress GitHub plugin, like <a href=\"https:\/\/wppusher.com\/\" target=\"_blank\" rel=\"noopener\">WP Pusher<\/a>.<\/p><p>Here is how to use WP Pusher to deploy your GitHub repo to the live website:<\/p><ol class=\"wp-block-list\">\n<li><a href=\"\/ca\/tutorials\/wordpress\/how-to-install-wordpress-plugins\">Download and install<\/a> the WP Pusher plugin.<\/li>\n\n\n\n<li>On your <strong>WordPress sidebar<\/strong>, navigate to <strong>WP Pusher<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/WP-Pusher-plugin-menu-on-WordPress-sidebar.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"230\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/WP-Pusher-plugin-menu-on-WordPress-sidebar-1024x230.png\" alt=\"WP Pusher plugin menu on WordPress' sidebar\" class=\"wp-image-71005\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Navigate to the <strong>GitHub <\/strong>tab and click <strong>Obtain a GitHub Token<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/A-button-on-WP-Pusher-for-obtaining-a-GitHub-token.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/A-button-on-WP-Pusher-for-obtaining-a-GitHub-token-1024x518.png\" alt=\"A button on WP Pusher for obtaining a GitHub token\" class=\"wp-image-71006\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>An <strong>authentication pop-up window<\/strong> will appear. Authorize WP Pusher to access your GitHub account.<\/li>\n\n\n\n<li><strong>Copy the token<\/strong> from the pop-up window and <strong>paste it into WordPress<\/strong>.<\/li>\n\n\n\n<li>Click the <strong>Save GitHub token<\/strong> button to confirm.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Save-GitHub-token-to-authorize-WP-Pusher_s-access-of-your-GitHub-account.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"421\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Save-GitHub-token-to-authorize-WP-Pusher_s-access-of-your-GitHub-account-1024x421.png\" alt=\"Save GitHub token to authorize WP Pusher's access of your GitHub account\" class=\"wp-image-71007\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"7\" class=\"wp-block-list\">\n<li>Navigate to the <strong>WordPress sidebar<\/strong> &rarr;<strong> WP Pusher <\/strong>&rarr;<strong> Install theme <\/strong>or<strong> Install plugin<\/strong>. In this example, we will <strong>Install a theme<\/strong>.<\/li>\n\n\n\n<li>Fill in the <strong>Theme repository <\/strong>field with your GitHub repository&rsquo;s name<strong>.<\/strong><\/li>\n\n\n\n<li>For<strong> <\/strong>the <strong>Repository branch <\/strong>field,<strong> <\/strong>enter <strong>main<\/strong>.<\/li>\n\n\n\n<li>Click the <strong>Install theme <\/strong>button.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Installing-theme-menu-on-WP-Pusher-plugin.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"658\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Installing-theme-menu-on-WP-Pusher-plugin-1024x658.png\" alt=\"Installing theme menu on WP Pusher plugin\" class=\"wp-image-71008\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"11\" class=\"wp-block-list\">\n<li>After the installation, navigate to <strong>Appearance<\/strong> &rarr; <strong>Themes<\/strong> &rarr; and <strong>Activate <\/strong>your newly deployed theme.<\/li>\n<\/ol><p>Whenever you push changes to repositories, go to <strong>WP Pusher <\/strong>&rarr; <strong>Plugins<\/strong> or <strong>Themes<\/strong> &rarr; <strong>Update<\/strong>. Otherwise, your changes will not show up on the live site.<\/p><h2 class=\"wp-block-heading\" id=\"h-extra-resources-for-github-wordpress-integrations\">Extra Resources for GitHub WordPress Integrations<\/h2><p>Aside from improving development workflows, integrating WordPress with GitHub has other purposes. For example, you can install plugins or themes from GitHub and host your website on this platform.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-install-wordpress-plugins-and-themes-from-github\">How to Install WordPress Plugins and Themes From GitHub<\/h3><p>WordPress developers typically have GitHub repositories for their themes or plugins. If these themes or plugins are unavailable in the WordPress official library, you can install them from GitHub.<\/p><p><a href=\"\/ca\/tutorials\/wordpress\/how-to-install-wordpress-themes\">The steps to install a theme<\/a> and a plugin are similar. Here&rsquo;s how to download and install a WordPress plugin from GitHub:<\/p><ol class=\"wp-block-list\">\n<li>Open GitHub and look for the plugin you want to install.<\/li>\n\n\n\n<li>On the <strong>plugin&rsquo;s GitHub repository<\/strong> page, click <strong>Code <\/strong>&rarr; <strong>Download ZIP<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Download-ZIP-button-on-a-plugin_s-GitHub-repository-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"946\" height=\"525\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Download-ZIP-button-on-a-plugin_s-GitHub-repository-page.png\" alt=\"The Download ZIP button on a plugin's GitHub repository page\" class=\"wp-image-71010\"  sizes=\"auto, (max-width: 946px) 100vw, 946px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Select your desired directory and click <strong>Save<\/strong>.<\/li>\n\n\n\n<li>After it finishes downloading, install the WordPress plugin manually.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-github-pages-for-static-wordpress-hosting\">GitHub Pages for Static WordPress Hosting<\/h3><p>GitHub offers a free hosting service called GitHub Pages. It lets you create a static site directly from your GitHub remote repo.<\/p><p>However, it will convert your WordPress website into static, omitting dynamic functionalities. A static site is ideal for a simple portfolio, blog, or project demonstration page.<\/p><p>Also, websites hosted on GitHub Pages will use a <strong>github.io<\/strong> domain by default. To change it, <a href=\"\/ca\/domain-name-search\">purchase a domain<\/a> from a registrar like Hostinger.<\/p><p>To host your WordPress website on GitHub Pages, follow these steps.<\/p><p><strong>1. Create a New GitHub Pages Repository<\/strong><\/p><p>A GitHub Pages repository is where you store your static site&rsquo;s data. Creating one is the same as creating a new GitHub repository. However, in this case, the repository&rsquo;s name will be <strong>username.github.io.<\/strong><\/p><p>After creating a remote GitHub Pages repository, clone it to your local machine:<\/p><ol class=\"wp-block-list\">\n<li>Open GitHub and navigate to the repository&rsquo;s page.<\/li>\n\n\n\n<li>Click <strong>Code <\/strong>and copy the <strong>repository&rsquo;s URL<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Copying-a-GitHub-repository_s-URL.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Copying-a-GitHub-repository_s-URL-1024x496.png\" alt=\"Copying a GitHub repository's URL.\" class=\"wp-image-71012\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Navigate to the folder where you want to save the repository.<\/li>\n\n\n\n<li>Right-click anywhere and select <strong>Git Bash Here.<\/strong><\/li>\n\n\n\n<li>Type <strong>git clone URL<\/strong> and hit <strong>Enter<\/strong>. A new folder with your GitHub Page repository&rsquo;s name should show up.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Cloning-a-GitHub-repository-to-your-local-machine.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"156\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Cloning-a-GitHub-repository-to-your-local-machine-1024x156.png\" alt=\"Cloning a GitHub repository to your local machine\" class=\"wp-image-71013\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p><strong>2. Create a WordPress Site<\/strong><\/p><p>The WordPress site will be your development environment. It&rsquo;s where you will make changes to the live website&rsquo;s content and design hosted on GitHub pages.<\/p><p>Using tools like Local, you can host your WordPress GitHub Pages sites on a local server. Otherwise, use <a href=\"\/ca\/web-hosting\">web hosting services<\/a> to allow other WordPress users to access it remotely.<\/p><p>When hosting your development site remotely, set it to private to prevent users from visiting while it&rsquo;s still in the works.<\/p><p>Check our <a href=\"\/ca\/tutorials\/wordpress\">WordPress tutorial<\/a> to learn more about installing and using the CMS. Once your site is created, configure its content and design.<\/p><p><strong>3. Convert the WordPress Site to Static HTML<\/strong><\/p><p>GitHub Pages only supports static pages. Since WordPress sites are dynamic, convert them to static before deploying.<\/p><p>There are different methods to convert your WordPress site, but using a plugin is the most common. In this tutorial, we will use the freemium plugin <a href=\"https:\/\/wordpress.org\/plugins\/simply-static\/\" target=\"_blank\" rel=\"noopener\">Simply Static<\/a>.<\/p><p>To convert a WordPress site using Simply Static, set up the plugin first:<\/p><ol class=\"wp-block-list\">\n<li><a href=\"\/ca\/tutorials\/wordpress\/how-to-install-wordpress-plugins\">Download and install<\/a> the Simply Static plugin.<\/li>\n\n\n\n<li>Navigate to the <strong>WordPress dashboard sidebar<\/strong> &rarr; <strong>Simply Static <\/strong>&rarr; <strong>Settings <\/strong>&rarr; <strong>General <\/strong>tab.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Simply-Static-plugin_s-setting-menu-on-WordPress.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Simply-Static-plugin_s-setting-menu-on-WordPress-1024x517.png\" alt=\"Simply Static plugin's setting menu on WordPress\" class=\"wp-image-71014\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Under <strong>Destination URLs<\/strong>,<strong> <\/strong>select <strong>Use absolute URLs<\/strong>.<\/li>\n\n\n\n<li>Enter your <strong>GitHub Pages&rsquo; site URL<\/strong>. For sites with the free github.io domain, the URL is <strong>username.github.io.<\/strong><\/li>\n\n\n\n<li>For the <strong>Delivery Method<\/strong>,<strong> <\/strong>select <strong>Local Directory<\/strong>.<\/li>\n\n\n\n<li>Enter the local path to your GitHub Pages repository clone. This is where Simply Static will save your site&rsquo;s HTML files.<\/li>\n\n\n\n<li>Click <strong>Save Changes<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Setting-up-Simply-Static-site-URL-and-delivery-method-and-destination.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"600\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Setting-up-Simply-Static-site-URL-and-delivery-method-and-destination-1024x600.png\" alt=\"Setting up Simply Static site URL, and delivery method and destination\" class=\"wp-image-71015\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>After the configuration completes, it is time to convert your WordPress site:<\/p><ol class=\"wp-block-list\">\n<li>Navigate to your <strong>WordPress dashboard&rsquo;s sidebar<\/strong> &rarr; <strong>Simply Static <\/strong>&rarr; <strong>Generate<\/strong>.<\/li>\n\n\n\n<li>Click the <strong>Generate Static Files <\/strong>button. Wait until the export process completes.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Generate-static-HTML-files-on-Simply-Static.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"524\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/Generate-static-HTML-files-on-Simply-Static-1024x524.png\" alt=\"Generate static HTML files on Simply Static\" class=\"wp-image-71016\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Open your <strong>local GitHub Pages repository<\/strong>. If the export succeeded, the HTML files should show up.<\/li>\n<\/ol><p><strong>4. Deploy the Site to GitHub Pages<\/strong><\/p><p>Deploy your static WordPress site to GitHub Pages to make your site live. Unlike other hosting services, pushing to the GitHub Pages repo will automatically deploy changes to the live site.<\/p><p>To deploy your site, push the HTML files to your GitHub repo:<\/p><ol class=\"wp-block-list\">\n<li>Copy your <strong>GitHub Pages repo&rsquo;s URL<\/strong>.<\/li>\n\n\n\n<li>Open your<strong> local repository folder<\/strong>.<\/li>\n\n\n\n<li>Right-click anywhere and select <strong>Git Bash Here<\/strong>.<\/li>\n\n\n\n<li>Enter <strong>git remote add origin URL<\/strong> and hit <strong>Enter<\/strong>. If the<strong> <\/strong><strong>error: remote origin already exists<\/strong> message shows up, you have already added the remote repository. In this case, proceed to the next step.<\/li>\n\n\n\n<li>Push all the files to the GitHub repository by typing <strong>git push origin -u master<\/strong> and press <strong>Enter<\/strong>.<\/li>\n\n\n\n<li>If GitHub asks you to sign in, select <strong>Sign in with your browser <\/strong>and enter your <strong>username <\/strong>and <strong>password<\/strong>.<\/li>\n<\/ol><p>After pushing the HTML files to your GitHub Pages repository, you can now access the live site.<\/p><p>Whenever you make changes to your site, create new HTML files and push them to the GitHub Pages repository. If you are using the GitHub desktop client, click <strong>Push Origin<\/strong>.<\/p><p>If you prefer automatically deploying your site&rsquo;s HTML files to GitHub Pages, consider purchasing Simply Static&rsquo;s pro version. It starts at <strong>$99.99<\/strong>.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-wordpress-hosting\" href=\"\/ca\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-111781\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-popular-wordpress-github-plugins\">Popular WordPress GitHub Plugins<\/h2><p>Using plugins can further optimize your workflow, making WordPress development more efficient. Here are our picks for the three best GitHub WordPress plugins, each with different purposes:<\/p><h3 class=\"wp-block-heading\" id=\"h-1-wp-pusher\">1. <a href=\"https:\/\/wppusher.com\/\" target=\"_blank\" rel=\"noopener\">WP Pusher<\/a><\/h3><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/WP-Pusher-plugin_s-website-homepage.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"494\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/WP-Pusher-plugin_s-website-homepage-1024x494.png\" alt=\"WP Pusher plugin's website homepage\" class=\"wp-image-71017\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>WP Pusher helps deploy a new theme or plugin to your live WordPress site using the repository&rsquo;s URL. It lets you install a theme and plugin directly from the WordPress dashboard.<\/p><p>WP Pusher ensures a more effective workflow for users who frequently update their plugins or themes. It is also useful for installing plugins or themes unavailable in the WordPress library.<\/p><p>To install a WordPress theme using WP Pusher, simply enter its repo link and click the <strong>Install <\/strong>button. The plugin also has <strong>Themes <\/strong>and <strong>Plugins <\/strong>sections that list all installed plugins and themes.<\/p><p>WP Pusher is available in free and premium versions. The premium plan offers more features, starting at <strong>$99\/year<\/strong>. It also comes<strong> <\/strong>with a 30-day money-back guarantee.<\/p><p><strong>Key Features:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Multi-platform support<\/strong>.<strong> <\/strong>WP Pusher integrates with multiple Git-based repo services, including GitHub, GitLab, and Bitbucket.<\/li>\n\n\n\n<li><strong>Push-to-deploy<\/strong>. Automatically updates WordPress themes or plugins every time users push to Git.<\/li>\n\n\n\n<li><strong>Multisite support<\/strong>.<strong> <\/strong>This plugin will work for all websites within a WordPress multisite network.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-2-git-updater\">2. <a href=\"https:\/\/git-updater.com\/\" target=\"_blank\" rel=\"noopener\">Git Updater<\/a><\/h3><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Git-Updater-logo.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"281\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/The-Git-Updater-logo-1024x281.png\" alt=\"The Git Updater logo\" class=\"wp-image-71018\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Git Updater is a simple plugin for automating updates to<strong> <\/strong>GitHub-hosted WordPress themes, plugins, and language packs.<\/p><p>Git Updater must have authorized access to the repositories to work properly. Additionally, it requires themes and plugins&rsquo; <strong>style.css <\/strong>files to include specific lines of code.<\/p><p>The plugin can periodically check for newer updates on your theme and plugin repositories. If it detects a newer version, it will automatically deploy the changes on the live server.<\/p><p>Git Updater offers free and pro versions. The pro versions start at <strong>$30\/year<\/strong> and come with additional features, such as remote installations and branch switching.<\/p><p><strong>Key features:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Automatic updates<\/strong>. Automatically updates a theme, plugin, or language pack as a new version appears on the GitHub repository.<\/li>\n\n\n\n<li><strong>Remote plugin and theme installation<\/strong>.<strong> <\/strong>Lets you install GitHub-based themes and plugins via the WordPress dashboard.<\/li>\n\n\n\n<li><strong>Private and public repository support.<\/strong> Track updates from public and private repositories.<\/li>\n\n\n\n<li><strong>Branch switching<\/strong>.<strong> <\/strong>Users can choose whether Git Updater looks to the master branch or other development branches.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-3-github-embed\">3. <a href=\"https:\/\/wordpress.org\/plugins\/github-embed\/\" target=\"_blank\" rel=\"noopener\">GitHub Embed<\/a><\/h3><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/GitHub-Embed_s-plugin-banner.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"349\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/GitHub-Embed_s-plugin-banner-1024x349.png\" alt=\"GitHub Embed's plugin banner\" class=\"wp-image-71019\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>GitHub Embed is an open-source plugin for embedding GitHub information into your website. It currently supports:<\/p><ul class=\"wp-block-list\">\n<li>Repositories<\/li>\n\n\n\n<li>User profiles<\/li>\n\n\n\n<li>Project milestones summary<\/li>\n\n\n\n<li>Project contributors<\/li>\n<\/ul><p>To embed GitHub information, simply paste the repo URL on your site. This plugin automatically fetches and applies any updates made to the embedded information.<\/p><p>GitHub Embed is especially useful for project websites. With this plugin, developers can keep information about their projects on the website up to date.<\/p><p>Best of all, this plugin and all its features are completely free.<\/p><p><strong>Key features:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Styling customization. <\/strong>The plugin has styling classes, allowing users to customize their embedded information to match their website design.<\/li>\n\n\n\n<li><strong>Automatic information updates. <\/strong>GitHub Embed automatically updates embedded information every time a user makes a change on GitHub.<\/li>\n\n\n\n<li><strong>Multi-information embedding. <\/strong>Users can embed multiple pieces of information on their sites.<\/li>\n\n\n\n<li><strong>Milestone summaries. <\/strong>Provide details about your project&rsquo;s progress, including the issues, due dates, and milestone descriptions.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>GitHub is a Git hosting service that allows developers to collaborate on projects more efficiently. The platform has version control, tracking, and branching features, enabling simultaneous and organized development of the same project.<\/p><p>Integrating WordPress with GitHub will improve your website development workflows. This article has explored each step to integrate GitHub with WordPress.<\/p><p>GitHub integration lets users install WordPress plugins from their repositories and host a WordPress site on GitHub Pages. Additionally, plugins like WP Pusher, Git Updater, and GitHub Embed can automate some integration processes.<\/p><p>We hope this article has helped you understand how to use GitHub to support your WordPress projects. If you have any questions, don&rsquo;t hesitate to leave us a comment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>GitHub is an essential tool for web developers. By storing your project database on its cloud-based remote server, different users can track, manage, and change it anytime. Integrating WordPress with GitHub can improve your website development process and make your team&rsquo;s workflow more efficient. This article will cover all about WordPress and GitHub integration. We [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ca\/tutorials\/wordpress-github\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":337,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"WordPress GitHub: How to Integrate and Use + Helpful Tips","rank_math_description":"Integrating GitHub with WordPress can help the site's development and efficiency. Check this article to learn how to integrate and use GitHub.","rank_math_focus_keyword":"wordpress github","footnotes":""},"categories":[22698,22692],"tags":[],"class_list":["post-70949","post","type-post","status-publish","format-standard","hentry","category-advanced","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-github","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/integrar-wordpress-github","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/github-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-github","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-github","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-github","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/integrar-wordpress-github","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-github","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-github","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-github","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-github","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/70949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/users\/337"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/comments?post=70949"}],"version-history":[{"count":20,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/70949\/revisions"}],"predecessor-version":[{"id":138064,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/70949\/revisions\/138064"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media?parent=70949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/categories?post=70949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/tags?post=70949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}