Developers & Translations

How to Modify the Frontend Layout in UpStream

The templating system for UpStream is much the same as for other plugins such as WooCommerce. Template files can be found in /wp-content/plugins/upstream/templates/ To override the default templates for UpStream, you need to create a folder within your active theme called /upstream/. Within this folder you can add various files and other folders to overwrite the default templates. The file and folder structure looks like this: /upstream archive-project.php login.php single-project.php /assets /css upstream-custom.css /global footer.php header.php sidebar.php top-nav.php /single-project bugs.php details.php discussion.php files.php milestones.php overview.php tasks.php You don’t need to add every file and every folder, just the ones that you want to override. For example, to override the sidebar.php file, you simply copy the wp-content/plugins/upstream/templates/global/sidebar.php file into wp-content/themes/YOURTHEME/upstream/global/sidebar.php and you can then edit this file as you please. Please note! Do not edit the files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost.

How to Customize the Editor Toolbar in UpStream

Because UpStream has some small text areas, we use a minimal version of the WordPress editor toolbar. In this guide, we’ll show you how to customize the editor toolbar and add more buttons. This guide shows you how to add a “Table” button to the toolbar. - Install and enable the TinyMCE Advanced plugin - Go to TinyMCE Advanced settings page, and disable the “Enable the editor menu” setting. Now we will update the UpStream code: - Go to the file /upstream/includes/up-general-functions.php, and replace the line 750 with the following code: $tinyMCE['buttons'] = 'strong,em,link,del,ul,ol,li,close,table'; - In the same file, replace the line 759 with: $tinyMCE['toolbar1'] = 'bold,italic,underline,strikethrough,bullist,numlist,link,table'; - Also in the same file, replace the line 784 with: 'wpview', 'table' - Go to /upstream/includes/admin/up-enqueues.php and add the following code to the bottom of the file: function upstream_load_tinymce_table_plugin() { echo '<script src="' . plugins_url('tinymce-advanced') . '/mce/table/plugin.min.js"></script>'; } add_action('after_wp_tiny_mce', 'upstream_load_tinymce_table_plugin'); - And that’s it! Now the Table button is available both on frontend and wp-admin editors image Please note: these changes will need to be re-applied after UpStream updates. We’re working on a more elegant solution for the future.

Understanding the UpStream Database Structure

This is a guide to understanding where data is stored by UpStream. First, take a look at a Project. In this example below, the name of the Project is “Blog Posts”. If I click on the title of this project, the URL of the project is /wp-admin/post.php?post=9&action=edit. This tells us that the ID of the project is 9. An UpStream project Go to your WordPress site’s database and look for the wp_posts table. - This WordPress.org page has an overview of the wp_posts table. You will see that every project is stored as a post. In the screenshot below, the ID of the project is 9 and the post_title is “Blog Posts”. wp_posts table with projects in the UpStream databasewp_posts table with projects in the UpStream database Now go to the wp_postmeta table. - This WordPress.org guide explains what Post Meta is in WordPress. - This WordPress.org page has an overview of the wp_postmeta table. In the wp_postmeta table, look for database rows that have the Post ID of 9. This shows you all the data attached to the “Blog Posts” project. In the screenshot below, you can see that this data includes: - _upstream_project_activity - _upstream_project_milestones - _upstream_project_tasks - _upstream_project_bugs - _upstream_project_discussion - _upstream_project_progress - _upstream_project_members Rows attached to project in the UpStream databaseRows attached to project in the UpStream database Click “edit” for one of these rows and you will see the data inside. In the screenshot below, you can see the Tasks attached to the “Blog Posts” project. This data is seralized. WPEngine has a useful introduction to serialized data. Tasks attached to project in the UpStream databaseTasks attached to project in the UpStream database

How to Customize UpStream Features With CSS

Almost every feature in UpStream can be hidden or modified using CSS. In the example code below, we show the CSS needed to target different parts of the UpStream frontend. Here are some examples of how to use these classes. Here’s a video showing how to customize your UpStream frontend: Please don’t modify the UpStream CSS files. You can place this CSS in your theme’s files and they will override the UpStream defaults. These CSS classes allow you to control the items inside the modals for each Project: body.upstream-front-end #modal-project .row.upstream-project-title {} body.upstream-front-end #modal-project .row.upstream-project-status {} body.upstream-front-end #modal-project .row.upstream-project-owner {} body.upstream-front-end #modal-project .row.upstream-project-client {} body.upstream-front-end #modal-project .row.upstream-project-client-users {} body.upstream-front-end #modal-project .row.upstream-project-start-date {} body.upstream-front-end #modal-project .row.upstream-project-end-date {} body.upstream-front-end #modal-project .row.upstream-project-description {} These CSS classes allow you to control the items inside the modals for each Task: body.upstream-front-end #modal-task .row.upstream-task-title {} body.upstream-front-end #modal-task .row.upstream-task-assigned-to {} body.upstream-front-end #modal-task .row.upstream-task-status {} body.upstream-front-end #modal-task .row.upstream-task-progress {} body.upstream-front-end #modal-task .row.upstream-task-milestone {} body.upstream-front-end #modal-task .row.upstream-task-start-date {} body.upstream-front-end #modal-task .row.upstream-task-end-date {} body.upstream-front-end #modal-task .row.upstream-task-notes {} These CSS classes allow you to control the items inside the modals for each Milestone: body.upstream-front-end #modal-milestone .row.upstream-milestone-milestone {} body.upstream-front-end #modal-milestone .row.upstream-milestone-assigned-to {} body.upstream-front-end #modal-milestone .row.upstream-milestone-start-date {} body.upstream-front-end #modal-milestone .row.upstream-milestone-end-date {} body.upstream-front-end #modal-milestone .row.upstream-milestone-notes {} These CSS classes allow you to control the items inside the modals for each File: body.upstream-front-end #modal-file .row.upstream-file-title {} body.upstream-front-end #modal-file .row.upstream-file-assigned-to {} body.upstream-front-end #modal-file .row.upstream-file-description {} body.upstream-front-end #modal-file .row.upstream-file-file {} These CSS classes allow you to control the items inside the modals for each Bug: body.upstream-front-end #modal-bug .row.upstream-bug-title {} body.upstream-front-end #modal-bug .row.upstream-bug-assigned-to {} body.upstream-front-end #modal-bug .row.upstream-bug-severity {} body.upstream-front-end #modal-bug .row.upstream-bug-status {} body.upstream-front-end #modal-bug .row.upstream-bug-due-date {} body.upstream-front-end #modal-bug .row.upstream-bug-description{} body.upstream-front-end #modal-bug .row.upstream-bug-file {} These CSS classes allow you to control the frontend tables for each Project: body.upstream-front-end table#projects th[data-column="title"], body.upstream-front-end table#projects td[data-column="title"] {} body.upstream-front-end table#projects th[data-column="members"], body.upstream-front-end table#projects td[data-column="members"] {} body.upstream-front-end table#projects th[data-column="client"], body.upstream-front-end table#projects td[data-column="client"] {} body.upstream-front-end table#projects th[data-column="client-users"], body.upstream-front-end table#projects td[data-column="client-users"] {} body.upstream-front-end table#projects th[data-column="progress"], body.upstream-front-end table#projects td[data-column="progress"] {} body.upstream-front-end table#projects th[data-column="status"], body.upstream-front-end table#projects td[data-column="status"] {} body.upstream-front-end table#projects th[data-column="categories"], body.upstream-front-end table#projects td[data-column="categories"] {} These CSS classes allow you to control the frontend tables for each Milestone: body.upstream-front-end table#milestones th[data-column="milestone"], body.upstream-front-end table#milestones td[data-column="milestone"] {} body.upstream-front-end table#milestones th[data-column="assigned_to"], body.upstream-front-end table#milestones td[data-column="assigned_to"] {} body.upstream-front-end table#milestones th[data-column="tasks"], body.upstream-front-end table#milestones td[data-column="tasks"] {} body.upstream-front-end table#milestones th[data-column="progress"], body.upstream-front-end table#milestones td[data-column="progress"] {} body.upstream-front-end table#milestones th[data-column="start_date"], body.upstream-front-end table#milestones td[data-column="start_date"] {} body.upstream-front-end table#milestones th[data-column="end_date"], body.upstream-front-end table#milestones td[data-column="end_date"] {} These CSS classes allow you to control the frontend tables for each Task: body.upstream-front-end table#tasks th[data-column="title"], body.upstream-front-end table#tasks td[data-column="title"] {} body.upstream-front-end table#tasks th[data-column="assigned_to"], body.upstream-front-end table#tasks td[data-column="assigned_to"] {} body.upstream-front-end table#tasks th[data-column="status"], body.upstream-front-end table#tasks td[data-column="status"] {} body.upstream-front-end table#tasks th[data-column="progress"], body.upstream-front-end table#tasks td[data-column="progress"] {} body.upstream-front-end table#tasks th[data-column="milestone"], body.upstream-front-end table#tasks td[data-column="milestone"] {} body.upstream-front-end table#tasks th[data-column="start_date"], body.upstream-front-end table#tasks td[data-column="start_date"] {} body.upstream-front-end table#tasks th[data-column="end_date"], body.upstream-front-end table#tasks td[data-column="end_date"] {} These CSS classes allow you to control the frontend tables for each Bug: body.upstream-front-end table#bugs th[data-column="title"], body.upstream-front-end table#bugs td[data-column="title"] {} body.upstream-front-end table#bugs th[data-column="assigned_to"], body.upstream-front-end table#bugs td[data-column="assigned_to"] {} body.upstream-front-end table#bugs th[data-column="severity"], body.upstream-front-end table#bugs td[data-column="severity"] {} body.upstream-front-end table#bugs th[data-column="status"], body.upstream-front-end table#bugs td[data-column="status"] {} body.upstream-front-end table#bugs th[data-column="due_date"], body.upstream-front-end table#bugs td[data-column="due_date"] {} body.upstream-front-end table#bugs th[data-column="file"], body.upstream-front-end table#bugs td[data-column="file"] {} These CSS classes allow you to control the frontend tables for each File: body.upstream-front-end table#files th[data-column="title"], body.upstream-front-end table#files td[data-column="title"] {} body.upstream-front-end table#files th[data-column="created_by"], body.upstream-front-end table#files td[data-column="created_by"] {} body.upstream-front-end table#files th[data-column="created_at"], body.upstream-front-end table#files td[data-column="created_at"] {} body.upstream-front-end table#files th[data-column="assigned_to"], body.upstream-front-end table#files td[data-column="assigned_to"] {} body.upstream-front-end table#files th[data-column="file"], body.upstream-front-end table#files td[data-column="file"] {}

How to Customize the UpStream Frontend With CSS

It is possible to change many of the colors used in the UpStream frontend. This article has a detailed guide to many of the UpStream classes. The Customizer extension has many different CSS choices built in. The image below shows an example of the Customizer settings: image The Customizer extension has a “Custom CSS” feature. Here you can add CSS for features not covered in the default settings. For example, one UpStream user wanted to change the color of the blue icons you can see below: image Go to UpStream > Customizer > Custom CSS and enter your CSS into this box. Here is the code we used: .x_title h2 .fa, .main_menu .fa { color: #FF0000; } image When you visit the front of your site, your icons will now be in red: image Another example is the calendar box for today’s date. The default box is purple as you can see in the image below: image I’ll show you how to change the color so that it’s much darker. Here’s the CSS we’ll use: .o-calendar .o-calendar-day.is-today .o-calendar-day__day { background-color: #223311; } image And here’s the end result of that CSS change: image

How Can I Translate UpStream?

The UpStream plugin is translated into many languages and can be translated into more. Is UpStream translated into your language? UpStream is 100% ready for translation. We have seen people use UpStream in Spanish, German, Chinese, and many other languages. Currently, UpStream only supports English in the default installation package. However, WordPress.org has translated strings for UpStream in several languages, including Spanish, German, and Korean. Click here to see the WordPress.org translations. If you are looking for UpStream in your language, feel free to email us to see if we have translation files. If UpStream isn’t available in your language, you are welcome to translate UpStream. We offer 1 free year of membership if you send us a translation file! Email us with your completed files. How to translate UpStream The language strings for UpStream are located in 3 places: 1. The main UpStream plugin 2. The UpStream extensions 3. The UpStream settings If you use UpStream with the extensions, you will need translations in all three of these areas. 1. Click here for instructions on translating the UpStream plugin. 2. Click here for instructions on translating the UpStream extensions. 3. UpStream allows you to change some strings from the settings. Look for language strings by going to UpStream > General, and finding these settings: image

What Languages Does UpStream Support?

UpStream is 100% ready for translation. We have seen people use UpStream in Spanish, German, Chinese, and many other languages. Currently, UpStream only supports English in the default installation package. WordPress.org has translated strings for UpStream in several languages, including Spanish, German, and Korean. Click here to see the WordPress.org translations. Extension Translations The UpStream extensions do need to be translated, in addition to the UpStream core. Click here for instructions. We have Spanish translations available for all extensions: Click here to download the Spanish files. There are also French translations for 5 extensions: Click here to download the French files. The Default UpStream Language Files Inside the UpStream files, you will find a /languages/ folder with these files inside for “Australian English” and “New Zealand English”. What Languages Does UpStream Support?What Languages Does UpStream Support? You can translate UpStream into any language you want. Click here for instructions on how to translate UpStream.

How to Translate the UpStream Extensions

The language strings for UpStream are located in 3 places: 1. The main UpStream plugin 2. The UpStream extensions 3. The UpStream settings In this guide, we’ll show you how to translate the UpStream extensions. UpStream extensions are packaged in the same way as normal WordPress plugins and use the default WordPress translation system. WordPress uses the .pot file format for translations. For example, you can translate the Project Timeline extension using the /languages/upstream-project-timeline.po file. If you’re looking for a tool to make translations easier, we recommend PoEdit. Find out more in this guide to translating the UpStream core. Extension Translations The UpStream extensions do need to be translated, in addition to the UpStream core. Click here for instructions. - We have Spanish translations available for all extensions: Click here to download the Spanish files. - There are also French translations for 5 extensions: Click here to download the French files. Even if you’re translating into another language, down those files for an example of how to organize your translations. Extension Language Details Here are the default language files for each extension: - Calendar View: /wp-content/plugins/upstream-calendar-view/languages/upstream-calendar-view.po - Copy Project: /wp-content/plugins/upstream-copy-project/languages/upstream-copy-project.po - Custom Fields: /wp-content/plugins/upstream-custom-fields/languages/upstream-custom-fields.po - Customizer: /wp-content/plugins/upstream-customizer/languages/upstream-customizer.po - Email Notifications: /wp-content/plugins/upstream-email-notifications/languages/upstream-email-notifications.po - Frontend Edit: /wp-content/plugins/upstream-frontend-edit/languages/upstream-frontend-edit.po - Project Timeline: /wp-content/plugins/upstream-project-timeline/languages/upstream-project-timeline.po Here is where we recommend you place the translations: - Calendar View: /wp-content/languages/plugins/upstream-calendar-view/upstream-calendar-view-fr_FR.mo - Copy Project: /wp-content/languages/plugins/upstream-copy-project/upstream-copy-project-fr_FR.mo - Custom Fields: /wp-content/languages/plugins/upstream-custom-fields/upstream-custom-fields-fr_FR.mo - Customizer: /wp-content/languages/plugins/upstream-customizer/upstream-customizer-fr_FR.mo - Email Notifications: /wp-content/languages/plugins/upstream-email-notifications/upstream-email-notifications-fr_FR.mo - Frontend Edit: /wp-content/languages/plugins/upstream-frontend-edit/upstream-frontend-edit-fr_FR.mo - Project Timeline: /wp-content/languages/plugins/upstream-project-timeline/upstream-project-timeline-fr_FR.mo There are at least two key things to note about the recommendations above: 1. We recommend placing your translations in the/wp-content/languages/plugins/ folder so they are not deleted by plugin or extension updates. 2. The name of the file is important. In the examples above, replace fr_FR with the two-letter code for your language. This list may help you find your code.

I Don’t See All the Language Strings for UpStream

Most of the language strings for UpStream are in the main language file in /wp-content/plugins/upstream/languages/upstream.po However, some strings are in different locations. In particular, make sure to check these three things: 1. UpStream uses some strings from the WordPress core. If you want UpStream to be in Spanish, make sure you have Spanish installed for the WordPress core. 2. Some strings are inside UpStream extensions. Look for the language strings inside UpStream extensions. 3. UpStream allows you to change some strings from the user interface. Look for language strings by going to UpStream > General, and finding these settings: Translate some UpStream strings

How to Change Language Strings in UpStream

In the UpStream documentation, we explain how to translate the whole of the UpStream plugin, and the extensions. But, what if you only want to change a few strings? This is most useful if you want to take a default UpStream language file and make only small modifications. In this situation, we recommend the Loco Translate plugin. In this example, we’ll show you how to change the “Severity” text used for Bugs. - Install the Loco Translate plugin. The Loco Translate plugin in WordPress - Go to Loco Translate, then “Plugins”. Loco Translate plugin menu This next part is trickiest. Decide which plugin has the text you want to chance. I would recommend starting with “UpStream” in most cases, so click “UpStream”. Loco Translate plugin showing your running plugins - Click “New language”. Creating a new language with the Loco Translate plugin - Choose “WordPress language”. - The “Choose a location” option is important. I recommend leaving it in the default “Custom” setting. This will mean your updated language strings will not be deleted when UpStream updates. New translations in the Loco Translate plugin - Search for the text you want to translate. Translating text in the Loco Translate plugin - The original text will in the “Source text” area. You enter your translation in the area below. - Click the “Save” button. New string translation in the Loco Translate plugin - Go to your UpStream projects and check that the text has been translated correctly. Translated WordPress text thanks to the Loco Translate plugin

How to Translate the UpStream Plugin

The language strings for UpStream are located in 3 places: 1. The main UpStream plugin 2. The UpStream extensions 3. The UpStream settings In this guide, we’ll show you how to translate the UpStream extensions. We recommend Poedit as a way to translate UpStream. Here’s how the translation process works: - Download Poedit from poedit.net image - Run the installation script for Poedit on your desktop. Click “Create New Translation”. image - Download UpStream to your desktop. - Select one of the existing .po files from the /languages/ folder. image - Choose the language for your translation: image You will see a list of all the English translations. On the right-hand side there’s a blank space waiting for your translation: image - At the bottom of the screen, you can enter your translation text into the “Translation” field: image - PoEdit is a particularly useful tool because it will automatically give you translation suggestions: image - When you’re finished, click “Save” in Poedit: image - Poedit will export both a .po and an .mo file for you. - Place these in the /wp-content/languages/upstream/ folder. Create this folder if it doesn’t exist. IMPORTANT: please note that this folder is not inside the main /upstream/ plugin folder. If you place your translation files there, they will be deleted when the UpStream plugin updates. - For the files, use the naming structure you can see below. You can find a list of locale identifiers here. image - If your site is running your language (in this case, Spanish), UpStream will automatically detect your new files and change to your language: image