Introduction

The Jira Plugin Bridge To WordPress is designed to help you export and maintain refreshed issues into your WordPress site. The issues are exported as a HTML table. The table is then refreshed each time the issues that are inside it are changed on the JIRA site. However, the table is refreshed only if one of the issue fields that are published in the table are changed in JIRA.

For proper functioning of the plugin a few things are needed:

Configuration

The plugin needs to be able to connect to your WordPress instance in order to save exported issues. In order for that to happen an application password needs to be created. Please see this guide to learn how to create it.

The configuration panel of the plugin is available at by going in JIRA in: Apps menu/Manage your apps and then picking Bridge To WordPress from the left side menu. Pick the first tab Endpoint Config. Three pieces of information are required.

Endpoint Config
This is the address of your publicly accessible WordPress site.
User
The name of the WordPress user
Application Password
This is the password necessary to access the WordPress site and it is the one you have created above.
Once all the above information was entered you can click the Submit button to persist this information in the Atlassian cloud.

A button is available to test your connection to the WordPress site using the information just submitted: Test Connection. In case of success a new window should appear reporting either Connected Successfully! or an error. Note that if the connection could not be established correctly to the WordPress site the plugin will not work properly. Check the endpoint configuration or contact the plugin support address if you need help.

Issue Exporting

Issue exporting is available from the project page. In order to get to plugin please follow this steps: pick your project from the Projects menu. Then from the sidebar click Back to project. In the new page click Bridge to WordPress in the left sidebar under the APPS entry.

The first step to export issues to WordPress is to pick the exact issues that you wish to export. In the JQL Search you need to input a jql query that will return the issues that you might want to export. The Export fields field should contain the fields that you wish exported for each issue.

Once you click Search a table of issues is shown together with their associated fields. From this table you can either:

Clicking Proceed to export to WordPress will show a last window in which you need to pick a name for the post to be created. All issue tables are performed in new posts created as Draft. This also means that in order for the post to appear on the WordPress site it needs to be manually published in the WordPress interface.

Clicking Export will start the exporting process. Note that this process might take some time depending on the number of issues to export. At the end of the exporting a confirmation message should appear of form: Successfuly exported issues to WordPress.

WordPress table styling

Note that the table exported in WordPress might not have the desired layout (columns too big or too little, too much irrelevant text).

The WordPress css can be customized as described here.

Here's below a sample CSS style sheet that can be added to your customized CSS in WordPress for a better rendering of progress, labels. Support might be able to help you with CSS that might be better suited to your needs.

.btw-table {
	word-break: normal;
}

.btw-labels>span {
  background-color: blue;
  color: white;
  padding: 4px 8px;
  margin-left: 1rem;
  text-align: center;
  border-radius: 5px;
}

.btw-customfield_10020>span {
  background-color: green;
  color: white;
  padding: 4px 8px;
  margin-left: 1rem;
  text-align: center;
  border-radius: 5px;
}

.btw-aggregateprogress {
  background-color: #e8e8e8;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

.btw-aggregateprogress>div {
  background-color: #666699;
  height: 20px;
  border-radius: 10px;
}

.btw-progress {
  background-color: #e8e8e8;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

.btw-progress>div {
  background-color: #666699;
  height: 20px;
  border-radius: 10px;
}