To edit WordPress content:
Login to your WordPress site at: http://www.oldetownepetresort.com/wp-admin
Step 1) To update page content:
Once logged in you’ll be looking at the Dashboard. On the left hand side there will be a button that says “Pages”. Clicking on that will bring up a list of the pages currently on the website. Rolling over the page titles with your mouse will bring up four options: Edit | Quick Edit | Trash | View
Click on “Edit” for the page you would like to update.
You will now be viewing a window of page copy.
Once you are done editing the copy you can either press “Preview Changes” on the right hand of the screen, or if you’re happy with the changes you can press “Update” for them to take effect.
There are 2 tabs at the top right of the content editing window, “Visual” and “HTML“. Clicking on the “Visual” tab will display a WYSIWYG editor while selecting “HTML” will display the hypertext markup for the page. The WYSIWYG editor is a popular one for editing WordPress content, however, it’s not without it’s flaws. Most noticeable is spacing.
General rules that apply to spacing are as follows:
- Hitting “Enter” on the keyboard will create a paragraph break.
- Hitting “Shift + Enter” on the keyboard will create a line-break.
- On occasion you may need a larger space to separate content. If that is the case then you may need to hit “Enter” and then add a non-breaking space (indicated in the WYSIWYG editor as a Enter symbol that has been crossed out. Alternatively it’s HTML counterpart is “ “).
Step 2) To insert an image into the page content:
Follow Step 1 to get to the page content you would like to add the image to. Select where in the copy you would like the image to be place. Once you have the location, click on the first small button to the right of “Upload/Insert” which is located top left of the editing window, above the tool bar. If you hover your mouse over the button it will say “Add an Image”.
Clicking on the button will bring up a window that will allow you to choose the image you would like to add and from what source. Once you have selected the image, it will upload to your page and additional information will be presented. From here you can give the image a title, insert a caption that will appear under the image, choose whether or not the image links to a full size version, as well as its alignment and size. Once you have finished click the button that says “Insert into Post”. Do not click the button that says “Save all Changes”.
Once you have clicked “Insert into Post”, you will be taken back to the content editing screen. From here you can either preview changes or update the page as in Step 1.
Step 3) To insert a link into the page content:
Select what text you would like to convert to a link by highlighting it. In the WYSIWYG editor, click on the button that looks like a chain “Insert/edit link“. You will be presented with a window where you are prompted to type in the URL of the page you would like to link to. After doing so, click on the checkbox “Open link in a new window/tab” then click the “Add link” button.
Step 4) Heading tag styles:
Heading styles are provided below. For some reason the WYSIWYG editor does not assign a heading tag to only the text outlined but to a whole section of copy. Heading styles may need to be typed in using the “HTML” tab. The HTML heading styles are provided below as well as an example of what they look like. Some headings have specific spacing styles applied to them.
<h1>
Heading 1 tag style
</h1>
<h2>
Heading 2 tag style
</h2>
<h3>
Heading 3 tag style
</h3>
<h4>
Heading 4 tag style
</h4>
<h5>
Heading 5 tag style
</h5>
Step 5) Managing the Gallery
At the bottom left hand of the screen is where you can access the Gallery as well as its options. To add an image, click on “Add Gallery / Images”. You will be re-directed to an “Upload Images” screen. From here, press “Browse” and select the image you would like to add to the Gallery. Once that is complete, where it says “Choose gallery”, select either “1 – Springfield” or “2 – Dulles”. Once that is complete, press the “Upload Images” button.
To delete or change the titles of the images in the Gallery, press the “Manage Gallery” button. Once that is pressed you will be taken to a screen where you can choose which Gallery you would like to manage. Click on the Gallery that says either “OTPR – Springfield” or “OTPR – Dulles” located underneath “Title”.
To change the order of images in the Gallery, follow the above step to get to the “Manage Gallery” page and then press the button labeled “Sort gallery” located above the first thumbnail and to the left of “Save Changes”. You will be taken to a screen where you can drag and drop the images into the order you would like them to be displayed. Once you are happy with the order, press “Update Sort Order”. You can then go back to the Manage Gallery page or exit.
Step 6) Embedding videos from YouTube
Login to your YouTube account then select “Videos” from the “My Account” drop down. You will be taken to a page with all of your uploaded videos. Click on the name of the video you would like to embed in WordPress. Once the video page comes up, click on the “Share” button. A window with some more information will appear. Click on the button that says “Embed”. Another small window will open containing some code that looks like the following:
<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/kGaT5b_H_Yg” frameborder=”0″ allowfullscreen></iframe>
Copy this code by selecting it and pressing “Ctrl C” on your keyboard.
Once you have copied the code, follow Step 1 to update the page content. This time you’ll need to make sure your in HTML edit mode instead of Visual. Click the “HTML” tab that is located at the top right of the editing window. Locate within the copy where you would like the video to be place and paste “Ctrl V” the code. You can now press either the “Preview Changes” or “Update” button to complete the video embedding process. You may find that the video may be too large. If that’s the case, go back to the location where you pasted the code and change the <iframewidth=”*” height=”*”> parameters until satisfied.
Step 7) Updating the NEWS section
To update the NEWS section, login to WordPress and follow Step 1 to navigate to the NEWS page. Updating will be a simple cut and paste procedure. From within the “HTML” tab, select (highlight) the first entry on the NEWS page, example:
<h4>September 2011</h4>
<span style=”color: #4b2346;”><strong>September 21, 2011</strong></span>
<strong>Featured on Channel 7 News</strong>
Cathy Bennett considers her two goldendoodles, Leo and Harley, family. She brings “the boys” to the lap of luxury at Olde Towne Pet Resort in Springfield three times a week. They go for a dip in the pool, get massages, a grooming every Friday and play with other pooches in a pen filled with bacon flavored bubbles. <a title=”Channel 7 News” href=”http://www.wjla.com/articles/2011/09/dog-owners-spend-as-much-as-274k-for-lifespan-of-a-pure-breed-study-says-66853.html” target=”_blank”>read more</a>
<img src=”http://www.oldetownepetresort.com/wp-content/themes/otpr/images/separator.png” alt=”" />
Then copy the entry “Ctrl-C”. Paste “Ctrl-V” the copied entry above the first entry on the page thus creating a new NEWS entry. Change the sections indicated in red with the new information.
<h4>NEW MONTH</h4>
<span style=”color: #4b2346;”><strong>NEW DATE</strong></span>
<strong>NEWS ITEM HEADLINE</strong>
New news item intro paragraph or desired copy. <a title=”TITLE OF NEWS ITEM” href=”http://www.link-to-website-or-pdf” target=”_blank”>read more</a>
<img src=”http://www.oldetownepetresort.com/wp-content/themes/otpr/images/separator.png” alt=”" />
If a Press Release PDF is what would be linked to instead of a URL, click on the “Add Media” button at the top left of the editing window and to the right of “Upload/Insert”. Select from your computer the PDF file that you would like to upload. Once selected, the file will upload and you will be presented with a new page which will allow you to insert the link to the PDF into the page using the “Insert into Post” button.
Once you are done editing the copy you can either press “Preview Changes” on the right hand of the screen, or if you’re happy with the changes you can press “Update” for them to take effect.



