HelpHub Development

Development is being managed through GitHub. Guidelines for development are fleshed out in the repo readme, but if you would like to get involved there then please pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @milana_cap (zzap in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.) in the #docs channel on Slack.

To setup HelpHub development environment on your local computer, please refer the CONTRIBUTING.md in above repository or Contributing to the Docs Team (HelpHub).

The latest code from the repository’s master branch will be uploaded to the staging site regularly.

We use ZenHub for project management, see https://github.com/WordPress/HelpHub/issues/79 for help on using it.

Contributing Code Contributing Code

Like any other website, HelpHub requires design and development work. Your contributions in these areas can assure that HelpHub is as performant and usable as possible.

To facilitate the work of many volunteer developers, HelpHub uses Varying Vagrant Vagrants (VVV) so developers can easily create a local WordPress environment. Follow the steps in this section to create your development environment and contribute code to the HelpHub project.

Top ↑

The workflow of getting started The workflow of getting started

First thing to start contributing is to set up your local environment. You can choose whichever environment works for you, the main thing is to have fresh WordPress install. You can also follow our VVV setup below.

Once you have WordPress install in your local environment ready, fork GitHub repository, clone your fork to local environment and import database and widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. settings. 

Follow instructions in CONTRIBUTING.md file. If you run into problems, get error messages or find the instructions incomplete or incorrect then this is the opportunity for your first contribution. 

If you know how to fix the problem and what’s missing or is incorrect, edit document in your fork and create pull request to HelpHub repo. Do this even if you are not sure if your fix is completely correct or applicable to every OS. We will review it and ask for changes if needed.

If you don’t know how to fix the problem, please ask for help in #docs channel or send direct message to @milana_cap (zzap in Slack). Once the problem is fixed it would be great if you could update the GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ document. 

Now you are ready for first development task.

Top ↑

Installing VVV Installing VVV

Overview Overview

The objectives of the procedure described here are to:

  1. create a local WordPress installation where you can do development and design work and
  2. contribute that work to the HelpHub project.

This process uses Vagrant, which allows you to create a sandboxed development environment on your computer. Vagrant provides an environment that isn’t specific to WordPress (or any other application), so you’ll also use VVV to configure your Vagrant environment specifically for WordPress development.

Top ↑

Installing and Configuring VVV Installing and Configuring VVV

  1. Install Vagrant. Download Vagrant from this site and install it on your machine.
  2. Install Virtualbox. Download VirtualBox from this site and install it on your machine.
  3. Install Vagrant plugins.  You will need 2 vagrant plugins to run VVV, install them using: vagrant plugin install vagrant-hostsupdater vagrant-triggers.
  4. Install and Launch VVV. Follow the VVV setup instructions here

Top ↑

Using Your Local Development Environment Using Your Local Development Environment

VVV is now running locally, which means you can access several versions of the WordPress application and the WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. source code. Click the links below to explore your VVV environment.

You can use your IDE to change any of the files in the environment, developing features and bugfixes and testing them locally. To learn how to contribute your changes back to the HelpHub project, see the next section.

Top ↑

Using GitHub to Contribute Code to HelpHub Using GitHub to Contribute Code to HelpHub

If you’re interested in contributing to HelpHub as a developer or designer, you can assign yourself an issue from the GitHub repo and contribute code to fix a bug or add a feature.

  1. Fork the project. Create a fork of the HelpHub source code from https://github.com/Kenshino/HelpHub. This fork is where you’ll commit any changes that you intend to contribute to the HelpHub project.
  2. Create a local environment. See “Installing and Configuring VVV” above.
  3. Backup wp-content. In your development environment, rename wp-content to something. Later, you will need the current theme contents to access the Administration Screen.
    For example, if you have installed VVV under ~/vagrant-local.
    $ cd ~/vagrant-local/www/wordpress-develop/public_html/src
    $ mv wp-content wp-content-original
  4. Clone your fork locally. Clone your fork of the HelpHub repo as a wp-content.
    $ git clone https://github.com/[githubusername]/HelpHub.git wp-content
  5. Copy back your current theme. If your environment is new one, it must be “Twenty Seventeen”.
    $ cp -r wp-content-original/themes/twentyseventeen wp-content/themes/twentyseventeen
  6. Switch your theme to HelpHub. From Web browser, access http://src.wordpress-develop.dev/wp-admin (Administration Screens) and switch your theme to HelpHub.
    After that you may remove your old theme files or wp-content-original folder you made in above Step 3.
  7. Import the HelpHub data. HelpHub’s source code includes a database export (helphub.wordpress.{DATE}.xml). Import this data into your local WordPress site to add a snapshot of the content.
    For more detail info, refer CONTRIBUTING.md in the GitHub repo.
  8. Make your changes in VVV. Develop and test your feature or bugfix in your VVV clone.
  9. Commit your changes. Commit your revised code to your HelpHub fork.
  10. Create a pull request. Request to merge your commits into the HelpHub repo from your fork.

Top ↑

Development Guidelines Development Guidelines

To make the site usable, and to keep our codebase manageable, we’re committed to these guidelines and standards.

  • AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) HelpHub should be usable by all, including users with physical and cognitive disabilities, and those using assistive technologies. Our work must not create any obstacles or limit the access of these users. We embrace tools and processes that facilitate creating an accessible HelpHub, and we value design and testing that maximize accessiblity.
  • Responsive Design We’re committed to designing, building and maintaining a site that is usable on devices of varying sizes and platforms.
  • Standardized Code We adhere to the WordPress Coding Standards. We aim to create code that is consistent and readable. The HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites., CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. and JavascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. created by the WordPress community should always follow the appropriate coding standard.

Last updated: