How To Edit Your Website - The Training Floor

The Training Floor’s
Webmaster’s
Bible
Host ............................................................................................................................................................... 4  Login for WordPress .................................................................................................................................... 4  Making Mistakes ......................................................................................................................................... 4  Email ............................................................................................................................................................. 4  Retrieving Email .................................................................................................................................... 5  Setting up Email on phones or computer ............................................................................................. 5  Editing Pages ................................................................................................................................................ 5  Creating Email Links – Linking email addresses ................................................................................ 6  Photos ....................................................................................................................................................... 7  How to add photos to pages and posts .................................................................................................. 7  Sidebars ........................................................................................................................................................ 8  Using Postie ............................................................................................. Error! Bookmark not defined.  How email gets posted ....................................................................... Error! Bookmark not defined.  Finishing up the Posts: ...................................................................... Error! Bookmark not defined.  Editing Content in Tables ...................................................................... Error! Bookmark not defined.  Edit Links ..................................................................................................................................................... 9  Events ...................................................................................................... Error! Bookmark not defined.  Questions ............................................................................................. Error! Bookmark not defined.  Waitlist Events ................................................................................... Error! Bookmark not defined.  Using uDesign Ads .................................................................................. Error! Bookmark not defined.  Membership ............................................................................................ Error! Bookmark not defined.  Spam Accounts ................................................................................... Error! Bookmark not defined.  After someone joins or renews online ............................................. Error! Bookmark not defined.  After someone renews by CHECK .................................................... Error! Bookmark not defined.  To add a new user who joins by CHECK .......................................... Error! Bookmark not defined.  Renewing Online ................................................................................. Error! Bookmark not defined.  Posting Membership Directory online ................................................. Error! Bookmark not defined.  Editing WordPress Websites
TechCare, LLC
2|Page
How to Manage Backups - BlogVault ...................................................................................................... 10 В How to Manage the Store - Ecwid ......................................................... Error! Bookmark not defined. В Plugins installed: ....................................................................................................................................... 13 В Custom.css: ................................................................................................................................................. 13 В Custom.css sheet: ...................................................................................................................................... 13 В Editing WordPress Websites
TechCare, LLC
3|Page
WordPress
Host
Our host is BlueHost. We pay Annually $71.40 ($5.95/month). Our hosting will expire on Date
here
To change/update billing info, go to http://www.bluehost.com and click login.
Bluehost login: thetrainingfloor.org/
Login for WordPress
URL: www.thetrainingfloor.org/wp-admin
id: ptttfadmin
password: Trainer1@
Once you log in, it is a good idea to right click on the title of your website next to the W at the top
of the screen and choose open in a new tab. This will give you a view of the website so when you
make changes in the editor, or WordPress, you can refresh the other tab to see if the changes you
made are active.
Making Mistakes
As soon as you make changes and click update, the changes are live. If you look at the page and
things are messed up, don’t panic. Go back to the page you were editing and at the bottom of the
page you will see “Revisions”. You can restore to a previous version by the options below. If you
don’t see this, click screen options at the top of any page and tick off Revisions.
Email
All email is set up in the BlueHost Control Panel. Log in (instructions at top of document) go to
Mail. You can set up new email accounts under Mail
Forwards: you can set up email addresses that just forward to other email addresses. You can
add new forwards or delete forwards under forwards
Editing WordPress Websites
TechCare, LLC
4|Page
Retrieving Email
There are 3 ways to get mail – Employees can do ALL THREE or just one:
1) Log into webmail at mail.thetrainingfloor.org
2) Set it up in Outlook or Outlook Express or Mail
3) Set it up on your phone
Setting up Email on phones or computer
Emplyees should use IMAP if possible! This will keep their inbox and the one on the server all
synched up together. POP will leave a copy of all messages on the server, which can build up into
the thousands. Employees can set up email on their phone in addition to in their Outlook, etc.
Give each employee his or her address (multiple people can check one account – they should work
it.
Mail Server Username: xxxxx@thetrainingfloor.org
Mail Server Password: password
Incoming Mail Server: mail.thetrainingfloor.org IMAP: port 143, POP: port 110
Outgoing Mail Server: mail.thetrainingfloor.org(server requires authentication) port 26
Supported Incoming Mail Protocols: POP3, POP3S (SSL/TLS), IMAP, IMAPS
(SSL/TLS)
Supported Outgoing Mail Protocols: SMTP, SMTPS (SSL/TLS)
Editing Pages
•
•
•
•
•
•
•
•
To edit text on an existing page, login to WORDPRESS (instructions above)
EITHER
Browse to that page using your browser
Click Edit Page at the top of the page in the dark menu bar
- OR Click on Pages on the upper left menu
Click on the name of the page you wish to edit.
Make sure you are on the Visual Tab, Not HTML You can edit on either one. The visual
tab is usually easier to read because the HTML tab has more coding. I suggest you always
use the Visual Tab unless there is something messed up.
Make changes to the text. ***Note: The font here will not show the font that is shown on
the website.
Above the text box, you will see an icon at the very end and when you mouseover it, you
will see the tool tip “kitchen sink”. If you click on that you will have all your text editing
options.
Editing WordPress Websites
TechCare, LLC
5|Page
•
•
Remember, shortcodes are in brackets. You can add new shortcodes for columns, lists,
boxes, etc by clicking the blue Woo Shortcodes button above the box where you type in
text
When you have made your text changes, click the Update button (blue) over in the right
hand column
Creating Email Links – Linking email addresses
•
To make an email link in the text, highlight the email address and right click copy. While
it is stil highlighted, go up above the text box and click the LINK button. In the Link URL
type mailto: and then the email address. So it will look like
mailto:ray.boyd@thetrainingfloor.org
Add a link to a pdf file for download
•
•
•
•
•
•
•
•
•
•
•
Open the page or post you would like to add the download to
Click where you would like the download link to appear
Next to Upload/Insert above the text box, click icon to the very right (Add media)
Choose Select Files and find the PDF on your computer and choose open
Under the Title, enter the words of the link that you would like to be linked to the PDF
No Caption or Description needed
Click Insert into Post
Now, you need to make sure it opens in a new window. Click anywhere in the middle of
the blue underlined text (the link)
Click the LINK button at the top of the editor box – looks like a chain link
Make sure there is a check next to Open link in a new window/tab, or put one there if
there is not and then click Update
Update the page
Adding Boxed Content – Woo Themes
•
•
•
•
•
•
•
•
•
•
To add a box, open the page or post you would like to add content to
Click in where you would like the box to appear.
On the toolbar, choose the blue Woo button to the right
Choose Info Box
Type what you would like to appear in the Content area
Under Type, choose the type of box you would like
Keep size as medium
Style: rounded corders? It is up to you
Border – either top and bottom or full
Click the blue Insert button at the top
Editing WordPress Websites
TechCare, LLC
6|Page
Adding/Editing Tabbed Content – Woo Themes
•
•
•
•
•
•
•
To add tabbed content, open the page or post you would like to add content to
Click in where you would like the tabs to appear.
On the toolbar, choose the blue Woo button to the right
Choose Tab Layout
Choose the number of tabs
Choose the default style or another
Click the blue Insert button at the top
To edit content in tabs:
•
•
Make sure you type the text or insert images between the correct [tab title=”xxxxx”] and
[/tab] If you do not put the content between these tags, it will appear on the page ALL of
the time
Click the blue Update button to update the post or page
Change the Images on the Home Page
Background:
•
•
Login
Plesae contact TechCare LLC
Photos on Pages (single)
It is a good idea to crop the photos you are using to the correct size first using Photoshop or
another graphics editor. All images for the web should be 72dpi.
Sometimes in cropping software if you hold down the shift key when you go to draw the cropping
area it will make a perfect square for you if you would like a square photo.
How to add photos to pages and posts
•
•
•
•
•
•
Browse to the page you would like to add the photos to after logging in (see instructions
above)
Make sure you are on the Visual Tab, Not HTML. You can edit on either one. The visual
tab is usually easier to read because the HTML tab has more coding. I suggest you always
use the Visual Tab unless there is something messed up.
To change the photo, have the photo ready and cropped on your computer. Just
underneath the title of the page, you will see Upload/Insert and then an icon of a camera
and music. Click on that icon.
Up will pop a window. Choose Select Files
Find the file and click Open
Click Upload Files
Editing WordPress Websites
TechCare, LLC
7|Page
•
•
•
•
•
•
Next rewrite the title with SEO keywords and also add this to the Alternate Text field
Click None for Link URL
Under Alignment choose None, Left, Center or Right
Most of the time you will want to choose full size but you can size down or add just a
thumbnail if you want
Finally choose Insert into post
Click the Update button (blue) over in the right hand column
Change/Edit Photos on home page carousel
To add new photos to the roster slider on the home page (the little circle icons with the names of
the workouts)
• Create the icon in Photoshop
• Edit the page that should have the icon
• Upload the icon to the page under Upload/Insert
• When you are uploading the image, copy the File URL for this image
• Do not insert the image, simply save
• At the bottom below the edit box, put a check next to “Add this post/page to:” and then
choose homepage slider
• Under Custom Thumbnail Image, paste the File URL of ths icon
• Update the page
To change the order of the slides:
• Click Roster Slider on the left navigation
• Click Homepage slider
• You can remove slides from the top list and move slides around in the bottom list
Sidebars
Sidebars are any of the info on the left or right side of the pages. They can contain menus, ads,
upcoming events, text, links, etc.
Each page either has content that you edit under Pages, or Sidebars. The content in the sidebars
is located under Appearance > Widgets Some pages have sidebars and some don’t.
It is literally just drop and drag. When you go to appearance > widgets you will see the current
sidebars that we are using in the way right column. If you open one up you can see the widgets
that are being displayed in a sidebar. You can change the order by dropping and dragging. You
can add more by dragging over a widget from the available Widgets to a particular sidebar. Each
widget has it’s own setting you set in the widget.
•
•
Appearance
Widgets
Editing WordPress Websites
TechCare, LLC
8|Page
•
•
•
On the right side, find the page that needs the change
Open up and make the changes
You can drag items on or off the sidebar as you need them
Edit Quotes – IQ Testimonials
•
•
•
•
•
•
To edit quotes that appear on the pages, login
Click on IQ Testimonials on the left side
Fill in the Name, Testimonial and status and click submit
To approve a testimonial that has come in, scroll to the bottom of the list and find the
testimonial in yellow
Put a check next to that testimonial and at the bottom choose Public and click Set Status
You can also delete testimonials the same way
Edit Quotes that appears on home page
•
•
•
•
•
•
To edit quotes that appear on the homepage, login
Click on IQ Testimonials on the left side
Find the testimonial that you want to feature on the home page and note the id number
Edit the home page
At the bottom under [iq-testimonials-page id=’20’] change the number to the id you want
to appear here.
Update the page
Edit Links
To edit/change/update the links do the following:
•
•
•
•
•
•
Log into the website
Click on Links on the menu on the left
Find the link that needs to be changed (you can search by using the box on the top right)
Click on the link and change the title, web address, or tick off a new category.
Under target always should be BLANK! So it opens a new page and does not replace our
website!
Click Update Link
Editing WordPress Websites
TechCare, LLC
9|Page
Add Video – TubePress or Youtube Brackets
To Add ONE video to a page:
•
•
•
•
To add a new video, find the video on youtube
Copy the URL of the video i.e http://www.youtube.com/watch?v=szwCxG8uQJo
Edit the page where the video should appear
Type [youtube= and then paste the video link and then end with a closing square bracket ]
[youtube=http://www.youtube.com/watch?v=szwCxG8uQJo]
To add a playlist to a page:
•
•
•
•
•
Find the playlist on youtube
Copy the ID of the playlist from youtube (i.e. PLCC9C712D37BBD352)
Edit the page where the playlist should appear
Type [tubepress mode=”playlist” playlistValue=”PLCC9C712D37BBD352”]
Update the page
All-in-One Calendar
For our event management system, we use a plugin called Events Made Easy. To edit, remove
or add a new event, follow the instructions below:
•
•
•
•
•
•
•
•
•
Log into the website
Click on Events on the left navigation
To add a new even, click Add New
Add a title like Spin/Cycle
You can put a description if you want to
Under the Event Details, put the start date and time – end date should be the same but
change the end time
Put a check next to repeat and then tell it to repeat every week until when it should
end
On the left side under Event Categories, choose the event category
Click Update
Editing a Form – FS Contact Form
•
•
•
•
Login
Choose FS Contact Form Options under Plugins
To edit the Contact Us page form, choose Form 1. To create a new form, click Form 2 or
Form: 3 (whichever is empty)
Edit or enter the fields as specified below:
Editing WordPress Websites
TechCare, LLC
10 | P a g e
•
•
•
•
•
•
•
•
•
•
•
Form X label: Just the name of the form
Form: (form x) Welcome introduction: Here you can put the paragraph that will appear
above the form
Email to: put the email addresses that should receive this form here separated by commas
Autoresponder: you can enable this if you would like an automatic message to go out to
the person who fills out the form. You can set your options for subject, from address,
message, etc here.
Captcha is the Spam protection letters/numbers that a visitor must fill out to submit the
form
Extra Fields: you can enter the field name and then the type. If you have choices, put the
label followed by a comma, put the choices after the semicolon and separate choices with a
semicolon. I.e. Type of Workout:,TRX;Kettlebell;Cardio Boxing;Other
You can add more fields by changing Number of available extra fields: to a higher number,
click Update options, and then you will have more extra fields
Redirect: if you would like visitors to go to a certain page after filling out the form.
Data Export: there is another plugin and configuration needed to save the entries in a
database. Contact TechCare if you would like to do this.
Style: will change the width, colors, etc of the form.
Always click Update Options after you make changes
How to Manage Backups - BlogVault
Our site is currently being backed up by blogvault.net. The backup files and database are
copied by using a plug-in that is installed on our site. The database and files are copied to
blogvault’s servers for safe keeping. They will keep 30 days of backups. You can restore any
backup from the last 30 days by using the click of a button
To log into blogvault.net to see what backups are present use the following:
http://blogvault.net/home/signin
id: webmaster@reddingneighborsandnewcomers.org
password: redding06896
We are paying $9/month for this service.
If you have any questions, please contact Akshat Choudhary at akshatc@gmail.com
Editing WordPress Websites
TechCare, LLC
11 | P a g e
How to Manage Backups - BackUpWordpress
Our site is currently being backed up by a plugin called backupwordpress. The backup files
and database are copied once a day by using a plug-in that is installed on our site. The
database and files are copied to a folder on for safe keeping. They will keep 30 days of
backups. You can download any backup from the last 30 days
If you would like to have the backups emailed to you (the file is around 73MB so you may not
be able to receive that big of a file), follow the instructions below
To see the backups, go to Tools > Backups
Click Settings at the top to manage
Click Backup Now to create a backup manually
Editing WordPress Websites
TechCare, LLC
12 | P a g e
Theme Information
Canvas – Woo Theme
Plugins installed:
•
•
•
•
•
•
•
•
•
•
•
•
BlogVault
All-in-One Calendar by Then.ly
Comprehensive Google Map Plugin
Constant Contact API
Constant Contact API: Form Designer (Alpha)
Display Posts Shortcode
Fast Secure Contact Form
Google Analytics
IQ Testimonials
Roster Slider
TubePress
Youtube Brackets
Custom.css:
Style.css sheet in Child theme:
/*
Theme Name: Canvas Child
Description: Child theme for the canvas theme
Author: TechCareLLC
Template: canvas
*/
@import url("../canvas/style.css");
.shortcode-tabs.vertical .tab {
margin-left: 0px !important; }
.shortcode-tabs.vertical ul.tab_titles {padding-right: 25px; padding-bottom: 5px; }
.shortcode-tabs.vertical ul.tab_titles li {border-left: 0px !important; border-right: 0px
!important;}
Editing WordPress Websites
TechCare, LLC
13 | P a g e
.shortcode-tabs.vertical ul.tab_titles { background-color: #016a86 !important; color: #ffffff
!important; padding-left: 20px;}
.shortcode-tabs.vertical ul.tab_titles li a:link { color: #ffffff; }
.hometabs {border: 8px solid #a0a0a0; height: 150px !important; }
#top-nav {float: right; }
#top select{display:none !important;}
#top ul.nav li a {
font-size: 1.5em !important; padding-left: 0px;
padding-top:0px !important;
padding-bottom:0px !important;
}
#top ul.nav li a:hover {
background:black !important;
}
.nav-toggle {z-index: 99; }
.listing-item {
list-style-type:none !important;
}
#wrapper { padding: 0 0 40px; }
#header, #content { background-color:white; }
#header { padding:0px !important; }
#navigation {margin-bottom: 0em; }
#navigation .nav li.parent > a {
padding-right: .5em !important;
}
#navigation .nav li.parent > a:after {display: none !important; }
ul.nav li.current_page_item a, ul.nav li.current_page_parent a, ul.nav li.current-menu-ancestor a,
ul.nav li.current-cat a, ul.nav li.current-menu-item a {color: #0b986e; }
ul.nav ul li.current_page_item a, ul.nav ul li.current_page_parent a, ul.nav ul li.current-menuancestor a, ul.nav ul li.current-cat a, ul.nav ul li.current-menu-item a {color: #0b986e
!important;}
.nav .sf-sub-indicator{
display:none !important;
}
#menu-item-3003, #menu-item-3001 {
margin-top:-10px !important;
}
Editing WordPress Websites
TechCare, LLC
14 | P a g e
.page-id-10 #content { margin-top: 300px; }
.page-id-10 .page .title {display: none;}
ul.nav li a{
padding-top:.5em !important;
padding-bottom:.5em !important;
}
#content {padding: 20px 20px 40px; }
.widget h3 { background: #016a86; text-align: center; padding-top: 5px; padding-bottom: 0px; }
.iq-testimonial-wrap {
border-top: 1px solid #016A86;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top: 15px;
}
.entry img {background: none; }
#classbox { background-color: #000; height: 220px; float: right; width: 150px; padding: 20px;
margin: 20px; }
#classbox li {font-color: #ffffff; }
#footer a:link { color: #ffffff; }
@media only screen and (max-width: 900px) {
.twocol-one, .fourcol-one {
display: block;
clear: both;
width:100% !important;
}
}
Editing WordPress Websites
TechCare, LLC
15 | P a g e