Welcome to this short overview of common content management tasks on TakeControlPhilly.com (TCP), allowing you to edit text, and change image and video content to keep your site current:
Accessing the admin suite
First, log in to the admin suite via https://takecontrolphilly.org/wp-admin using the credentials provided:
Editing content
You will land on the WordPress Admin Dashboard:
You will see a menu along the left column and several items on the right. The items presented on the right are simply informative and have nothing to do with the editing of the site, so they can be ignored. In the menu on the left, you will see several items. First is a link to the Media Library (red arrow). This is where you would upload images or videos to be used on the site. Generally speaking, however, you will access the Media Library via other pages in the Admin Suite, more on that later. Next is a set of links to edit sections of the site (green box and arrow). Each of these correlates to a different section of the site and clicking them will bring up the editing options for that section. A link to your profile appears next (blue arrow). This allows the current user to update personal information such as their email address and password. The final item simply minimizes or maximizes the menu.
When you click on any of the section edit links (red arrow), you will be presented with a link to the specific page editor (green arrow):
When you hover over the page editor link, you will see a submenu:
You can either click on the page title link, or on the ‘Edit’ button (red arrow) to access the page editor.
In the page editor, you will see a box correlating to each portion of the page. Click the expand button (red arrow) to access this information.
Here we see three different types of input fields. The first is a single-line text input (red arrow). Next is an image input (green arrows). The third is a multiline (orange arrow).
Media library
When you click the ‘Select image’ button, the Media Selector will open. In the upper left corner, you will see two tabs, “Upload files” (red arrow) and “Media Library” (green arrow). If you want to use a new item, use the “Upload files” tab. You will see a “Select Files” button which will allow you to upload the item and select it for use.
The “Media Library” will display all of the available media items currently in the system:
To change the current image, click the image (red box), a blue checkbox will appear in the upper right corner of that image. Once you select the image, click the ‘Select’ button.
The fourth type of input field is the rich text editor that will allow you to submit formatted copy into the page. The rich text editor has several formatting options above the text field (orange box). This allows you to apply the formatting required to the text that is currently selected in the txt field. Using the “Add Media” button allows you to insert images or videos inline. There are two tabs, the “Visual” tab (green arrow) and the “Text” tab. You will most likely want to stay in the “Visual” tab, as the “Text” tab will display HTML tags and other markup items that, if changed improperly, will break the page, or in some cases, the entire site.
In the upper right of each section editor screen, you will see two boxes (orange box). These are opened in the same manner as the content boxes, by clicking the expand button.
In the “Publish” box, you see an “Update” button (red arrow). When you click this button, all changes will be saved to the live site. In the “Page Attributes” box, the only item you need to be aware of is the “Template” dropbox (green arrow). By default, the correct template will be selected, however, if the section is displaying incorrectly, you can check that the name of the current template matches the name of the current page. If not select the correct template and click “Update” in the “Publish” box.
Form Input
Forms present a unique set of issues in that there are complicated calculations taking place behind the scene once the form is submitted. In order to avoid front-end issues, a very simplified schema has been set up, but there are still somethings to remember when editing forms.
Each form input field is expecting one field per line and that field definition needs to be in a particular format. The format consists of two or three elements, the label, then the field type, followed by options for that field in the case of a ‘radio’ selector with a colon separating the two or three and ended with a ‘pipe’ character as follows:
label:type[:option 1, option 2, option 3]|
The ‘pipe character’ is the uppercase location of the key directly above the ‘enter’ or ‘return’ key on a standard US keyboard (red arrow):
The label can be any regular text or number combination. The label can be more than one word separated by a space, but care should be taken to keep the label as brief as possible. You should only enter ‘regular’ characters, that is, no punctuation marks or special characters should be entered.
Accepted field types are as follows:
Non-input fields:
- ‘title’ – a larger bold form header
- ‘subtitle’ – a slightly larger than regular text bold section header
- ‘copy’ – regular sized explanatory text in paragraph form
Input fields:
- ‘text’ – expected input is a single line of text
- ‘address’ – text field expected to be in address form
- ‘phone’ – expected input is a phone number
- ’email’ – expected input is a complete email address
- ‘yesno’ – question with expected yes or no answer
- ‘number’ – field which allows only numeric input, adds number stepper arrows
- ‘radio’ – user selects from a list of options, only one can be chosen
- entry should follow this format: “question:radio:option 1, option 2, option 3|” – where the question is listed followed by a colon ( : ), followed by the type, in this case ‘radio’, followed by a colon ( : ) followed by the possible choicesseparated by a comma ( , ), ended with the required pipe character
- ‘date’ – expected input is a date – selected with the date selector tool drawn into the field
- ‘textarea’ – expected input is longer text as in a paragraph
- ‘submit’ – button to submit and process the form
Location Map
The location map that appears on the home page has its own menu item. The location map requires the upload of an excel file in a VERY specific format. Uploaded excel files MUST match this format EXACTLY.
The format consists of 7 columns in this exact order:
- Location name
- The location’s phone number
- The hours of operation for that location
- The street number of the location’s address
- The street of the location
- The zip code of the location
- The coded location type – for locations that are more than one type, list the numeric code followed by a comma
- Condom distribution site
- STD testing site
- COVID-19 testing site
- COVID-19 vaccination site
- PDPH Health center
To upload the excel file, click the “Location Map” link in the left menu. You will see the “Location Map” editor:
Click the “Location Map” item in the box on the right and the upload interface will appear:
Click the “Select text” button to upload the new .xlsx file which will replace ALL of the current entries on the location map:
Become a Condom Site form – PDF version upload
To upload the PDF version of the “Become a Condom Site” form, open the “Condom Site Form” menu item on the left menu of the admin suite, then click the “Become a condom site” item in the right side list:
Click the “PDF Uploader” section header:
then use the “Select text” button to upload the new PDF form.
