The Training Floor s. Webmaster s. Bible

Transcription

1 The Training Floor s Webmaster s Bible

2 Host... 4 Login for WordPress... 4 Making Mistakes Retrieving Setting up on phones or computer... 5 Editing Pages... 5 Creating Links Linking addresses... 6 Photos... 7 How to add photos to pages and posts... 7 Sidebars... 8 Using Postie... Error! Bookmark not defined. How 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 P age

3 How to Manage Backups - BlogVault How to Manage the Store - Ecwid... Error! Bookmark not defined. Plugins installed: Custom.css: Custom.css sheet: Editing WordPress Websites TechCare, LLC 3 P age

4 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 and click login. Bluehost login: thetrainingfloor.org/ Login for WordPress URL: id: ptttfadmin password: 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. All is set up in the BlueHost Control Panel. Log in (instructions at top of document) go to Mail. You can set up new accounts under Mail Forwards: you can set up addresses that just forward to other addresses. You can add new forwards or delete forwards under forwards Editing WordPress Websites TechCare, LLC 4 P age

5 Retrieving 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 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 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 P age

6 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 Links Linking addresses To make an link in the text, highlight the 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 address. So it will look like 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 P age

7 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 P age

8 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 P age

9 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 P age

10 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 Edit the page where the video should appear Type [youtube= and then paste the video link and then end with a closing square bracket ] To add a playlist to a page: [youtube= 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 age

11 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 to: put the 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: 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 age

12 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 ed 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 age

13 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 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 age

14 .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: px; #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 age

15 .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: only screen and (max-width: 900px) {.twocol-one,.fourcol-one { display: block; clear: both; width:100%!important; Editing WordPress Websites TechCare, LLC 15 P age