<h1>Daneswood Website User Guide</h1> ##Site Information **Site URL**: https://daneswood.co.uk **Login URL**: https://daneswood.co.uk/wp-admin **Username**: example **Password**: *emailed separately* **CMS**: WordPress **CMS Version**: 3.9.1 **Date**: 12/02/2014 ### Support If you've got any queries or would like any changes made to the site, you can email us via [help@daneswood.co.uk](mailto:help@daneswood.co.uk). ### WordPress WordPress is an open source CMS (content management system), we use it because it's free, secure and highly expandable (note: i'll be referring to WordPress as WP throughout the user guide). All of the support documents we've provided are correct for the current as of <!-- Date --> (WordPress version 3.9.1). [Read more about WordPress here](http://wordpress.org/) ### Your Security Regular backups are taken by the host and we've taken steps to ensure your website is as secure as possible at launch. One of the biggest security vulnerabilities in any content management system are the user accounts. It's important that you keep your password secure and private. If you change your password at any point we recomment using a password generator (e.g. [Strong Password Generator](https://strongpasswordgenerator.com/)). The WP system and any plugins should be kept up to date. If you notice that there is a significant amount of updates to do please let us know and we will make a special backup before hand. Just in case the update breaks or changes any functionality of the website. ## The Dashboard & Admin Area <a data-toggle='tooltip' data-placement='right' title='' data-original-title='Open in new tab' target='_blank' class='component-url' href='https://daneswood.co.uk/wp/wp-admin/index.php'><i class='fa fa-external-link'></i></a> The WP dashboard what you'll be presented when you login. It provides you with the ability to edit exising, add new or delete old content. This can sometimes be referred to as the "backend" of the site whereas the part the general public sees would be the "frontend". <img src="content/default/img/the-dashboard/Dashboard%20%E2%80%B9%20Example%20Website%20%E2%80%94%20WordPress.png"> ### Responsive The admin area is responsive so you should be able to use it on tablets and mobiles. We recommend using it with a desktop for full functionality. ### Fundamentals All of the links to modify the site are presented along the left hand side. <img src="content/default/img/the-dashboard/Dashboard%20%E2%80%B9%20Example%20Website%20%E2%80%94%20WordPress%20%28menu%29.png"> Hovering over a menu item will present its subpages (if applicable). Some pages within the admin area will allow you to edit the way it's presented. This is usually done through the 'Screen Options' tab. <img src="content/default/img/the-dashboard/Dashboard%20%E2%80%B9%20Example%20Website%20%E2%80%94%20WordPress%20%28screen-options%29.png"> ### Saving Changes On many screens within the backend you will need to publish the changes you've made. To do this look out for a button, usually in the top right section of the page named either "Save" or "Update". Without doing this, any changes will be lost. <img src="content/default/img/the-dashboard/Edit%20Post%20%E2%80%B9%20Example%20Website%20%E2%80%94%20WordPress.png"> ## The Content Editor The content editor is where you'll be editing the majority of the content areas present on the front end of the website. It provides basic functionality to change the formatting of the text or images present on the page or content area. <img src="content/default/img/the-editor/Edit%20Post%20%E2%80%B9%20Example%20Website%20%E2%80%94%20WordPress.png"> ### Copying and Pasting When copying content into the content editor it's recommended that you first paste it into a plain text editor like Notepad. When using a word processor (e.g. Microsoft Word) it can sometimes copy invisible formatting code which WP may try to use, if this is the case your content will appear different on the front end to how it should. Pasting it into a plain text editor first will strip any formatting from the content, you can also do this using online tools like [StripHTML](http://www.striphtml.com/). ### Visual & Text Modes WP offers two options when viewing the content within the editor: "Visual" and "Text". You can switch between the two above the main content editor. <img src="content/default/img/the-editor/Edit%20Post%20%E2%80%B9%20Example%20Website%20%E2%80%94%20WordPress%20%28visual-text-mode%29.png"> - **Visual** - this provides a graphical user interface for manipulating the content. - **Text** - this will strip any of the visual formatting from the text/media and display the content in code format. This should rarely need to be used but if you feel comfortable using it it can help to highlight any issues with formatting. ### Toolbar The toolbar is similar to what you would see in a word processor and works in a similar way. First select the text you wish to change and click the corresponding button. Hovering over the button will give you an explanation as to what it does. <img src="content/default/img/the-editor/Edit%20Post%20%E2%80%B9%20Example%20Website%20%E2%80%94%20WordPress%20%28toolbar%29.png"> #### Links The toolbar gives you the ability to easily add links to your content. To do so click the anchor icon after selecting the text you wish to represent the link. <img src="content/default/img/the-editor/Edit%20Post%20%E2%80%B9%20Example%20Website%20%E2%80%94%20WordPress%20%28links%29.png"> Afterwards, type a website URL into the URL field or select a page on the site using the "Or link to existing content" option. Using the "Or link to existing content" will mean that the link is kept up to date should any of your pages change name or URL. ### Adding Media To add media to your posts click the "Add Media" button above the content editor. This will bring up the media library where you can select and image and click "Insert Into Page". You can search for images using the search box. <img src="content/default/img/the-editor/Edit%20Post%20%E2%80%B9%20Example%20Website%20%E2%80%94%20WordPress%20%28inserting-images%29.png"> You can also upload images by dragging and dropping the file onto the window or selecting the "Upload Files" tab. ### Shortcodes Shortcodes are a simplified form of code that are needed when options cannot be given using a graphical user interface. [example shortcode]Sample content within shortcode tags[/shortcode] ## Pages <a data-toggle='tooltip' data-placement='right' title='' data-original-title='Open in new tab' target='_blank' class='component-url' href='https://daneswood.co.uk/wp/wp-admin/edit.php?post_type=page'><i class='fa fa-external-link'></i></a> Alot of your website's content is stored in what WP refers to as "Pages". To access the pages on your website click the "Pages" link in the sidebar. ### Adding a New Page To add a new page click the "Add New" button above the list of pages or in the sidebar. <!-- <img src="content/default/img/"> --> When you're done editing the page (see below) click "Publish" to make the page visible to the public or "Save Draft" to store for later. ### Deleting a Page You can send a page to the "Trash" by clicking the "Trash" button when hovering over the page. Alternatively, you can click the "Move to Trash" link within the "Publish" box on the Page Edit screen. <!-- <img src="content/default/img/"> --> ### Editing A Page After clicking on a page title from within the Page List screen you'll be presented with the Page Edit screen. #### Publish (Page Status) The "Publish" box refers to the current status of the page, it also gives you the option to publish the page or hide it from non-logged in users. <!-- <img src="content/default/img/"> --> #### Page Attributes The "Page Attributes" section should not need to be edited however it gives you the ability to change its template and order within the system. <!-- <img src="content/default/img/"> --> #### Page Slugs WP uses 'slugs' to refer to pages within links and their URLs, these need to be unique and are automatically generated. If they need to be changed for whatever reason they can be found below the content's title. <!-- Screenshot --> ## Media <a data-toggle='tooltip' data-placement='right' title='' data-original-title='Open in new tab' target='_blank' class='component-url' href='https://daneswood.co.uk/wp/wp-admin/upload.php'><i class='fa fa-external-link'></i></a> Your WP site can store and present a variety of different media types. Here's a list of all currently accepted media types: **Images** - .jpg - .jpeg - .png - .gif **Documents** - .pdf (Portable Document Format; Adobe Acrobat) - .doc, .docx (Microsoft Word Document) - .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation) - .odt (OpenDocument Text Document) - .xls, .xlsx (Microsoft Excel Document) **Audio** - .mp3 - .m4a - .ogg - .wav **Video** - .mp4, .m4v (MPEG-4) - .mov (QuickTime) - .wmv (Windows Media Video) - .avi - .mpg - .ogv (Ogg) - .3gp (3GPP) - .3g2 (3GPP2) Some of the file types will provide just a link on the frontend, for instance .doc files. Images will usually display a preview when inserted using the content editor. ### Media Library All media is stored within the 'Media Library'. You can access this via the 'Media' link on the left hand side. <!-- <img src="content/default/img/"> --> Just click on an item to modify it or view its details. #### Adding New Media To add a new picture you can either click the "Add New" link within the "Media" section of the sidebar or click "Add New" next to the media title heading. <!-- <img src="content/default/img/"> --> You're able to drag and drop your media from your hard drive on to the designated area or click the "Select Files" button. Alternative, if you're having trouble with this method you can use the old method by clicking "Try the browser uploader instead". <!-- <img src="content/default/img/"> --> Once you've uploaded the media you will be presented with a link to the media edit screen. It's worth noting that you're not able to change the filename of the media item in any simple way after it's been updloaded. So, we recommend making sure that any files have appropriate and relevant file names. This will make it easier to manage your files in the future and also search engines can use this as a means to determine the relevancy of your content. <!-- <img src="content/default/img/"> --> #### Editing Media From the media edit screen you're able to change the name of your media item as well as specify any custom captions, alt tags and descriptions for your media. You will usually have the option to add these in to the content from the content editor too. <!-- <img src="content/default/img/"> --> When you're done editing the media item remember to click "Update". <!-- <img src="content/default/img/"> --> #### Deleting Media To delete a file you can click the "Delete Permanantly" link by hovering over the item in the Media Library. <!-- <img src="content/default/img/"> --> Alternatively, you're able to click the "Delete Permanantly" link to the left of the "Update" button in the Media Edit screen. ## Menus <a data-toggle='tooltip' data-placement='right' title='' data-original-title='Open in new tab' target='_blank' class='component-url' href='https://daneswood.co.uk/wp/wp-admin/nav-menus.php'><i class='fa fa-external-link'></i></a> You have the ability to edit the links within navigation areas of the website. These will be presented in predefined areas of the website - please contact us if you wish to edit it's layout or style. ### Menu Locations You currently have 1 on the Daneswood Website website. ### Editing The Menu To edit the menu click on the "Menus" link within the "Appearance" section of the admin area. <!-- <img src="content/default/img/"> --> #### Adding New Menu Items To add a new link to the menu tick the page from the selection to the left and click "Add to Menu". <!-- <img src="content/default/img/"> --> This will place your link at the end of the list. #### Reording Menu Items Changing the order of the menu items can be done using drag and drop. Just drag the menu item up or down the list to change its order. Dragging the menu item to the right will make it a child item and move it into a dropdown menu of the item above. Dragging the menu item to the left will remove it from the subpage list and make it appear on the top level. <!-- <img src="content/default/img/"> --> #### Deleting Menu Items To delete a menu item click on arrow on the right hand side of the item. Then click "Remove". #### Saving Changes Made to the Menu Make sure to click "Save Menu" (top right) in order to publish any changes you have made. <!-- <img src="content/default/img/"> --> ## Forms <a data-toggle='tooltip' data-placement='right' title='' data-original-title='Open in new tab' target='_blank' class='component-url' href='https://daneswood.co.uk/wp/wp-admin/admin.php?page=gf_edit_forms'><i class='fa fa-external-link'></i></a> Forms allow your users to interact with the website and submit information. Currently on the Daneswood Website website there are 1 forms. We use Gravity Forms in order to facilitate the form functionality on your website. It's a premium WP plugin that's kept up to date and secure and provides a large range of options. It also stores a backup of your submissions on the website, this is useful if a submission gets lost in your email inbox. To access the forms on the website click the "Forms" link in the sidebar. <!-- <img src="content/default/img/"> --> Here you'll find a list of all forms currently on the site. Note, they may not all be active and visible. ### Disabling Forms To disable a form click the green toggle switch to the left of the item. <!-- <img src="content/default/img/"> --> ### Editing Forms Clicking the form name or "Edit" when hovering over it will present you with the Form Edit screen. After any changes have been made remember to click the "Update Form" button to publish any changes. #### Adding New Fields To add a new field, click the field type you wish to add on the right. This will add it to the end of the list. #### Reording Forms Fields You can drag and drop the form fields to reorder them. Hover over the dark blue band in order to drag and drop. <!-- <img src="content/default/img/"> --> #### Editing Form Fields Clicking the small triangle in the blue band will present a list of options. <!-- <img src="content/default/img/"> --> Here you can change the name of the field and the description (this will be displayed along side the field name). Depending on the field type you will have various other options. #### Duplicating Form Fields To save time you can duplicate form fields by clicking the 'Duplicate' icon in the blue band. <!-- <img src="content/default/img/"> --> #### Deleting Form Fields Click the cross in the blue band to delete a form field. <!-- <img src="content/default/img/"> --> ### Viewing Submissions You can view all of the user submissions for a form by going to the "Entries" page. Use the drop down (top right) to choose which form's submissions you are viewing. <!-- <img src="content/default/img/"> --> ### Adding a Form to a Page Clicking the "Add Form" button above the content editor will give you the option to choose a form and insert it. <!-- <img src="content/default/img/"> --> Select the form you wish to insert and tick the appropriate boxes below. Enabling ajax will allow the form to be submitted without requiring the page to refresh. After the "Insert Form" button has been clicked it will insert something along the lines of [gravityform id="1" name="Contact Form"] ## Useful Links & Further Reading We've tried to cover as much as possible in this guide, going over the basics and the areas we've customised for your website. ### Security - [Strong Password Generator](https://strongpasswordgenerator.com/) ### WordPress Support & Help - [Official WP Support](http://codex.wordpress.org/Main_Page) ### Tools - [StripHTML](http://www.striphtml.com/) - strip out unnecassary formatting from your text before pasting into the WP content editor. ## Google Analytics Guide <a data-toggle='tooltip' data-placement='right' title='' data-original-title='Open in new tab' target='_blank' class='component-url' href='http://google.com/analytics/'><i class='fa fa-external-link'></i></a> ### Simple Glossary These are some definitions for the most commonly used terms throughout analytics. - **Session** - an instance of someone visiting the website) - **User** - a unique visitor - **Pageview** - the number of times a page was viewed regardless of who by - **Pages per session** - how many pages a user visits per session - **Session duration** - how long a user stays on the website in one given session - **Bounce rate** - the percentage of visits where the user only views one page of the site. E.g. if 5 out of 10 people only view 1 page you'll have a 50% bounce rate. - **Dimension** - "A dimension is a descriptive attribute or characteristic of an object that can be given different values." (source: Google) - **Metric** - "Metrics are individual elements of a dimension which can be measured as a sum or a ratio." (source: Google) - **Goal** - an action that the user performs in conjunction with the website. e.g. Completing the "contact us" form. - **Conversion** - When a goal is completed. - **Landing Page** - This is the page that a user first visits when they come to your website. ### The Basics #### How to login Visit [http://www.google.com/analytics/](http://www.google.com/analytics/) and enter your email and password. #### Home This provides access to all of the properties your account has access to. #### Reporting The reporting tab provides all of the information about your traffic. This is where you will spend the majority of your time. #### Admin > You need at least one Analytics account, so that you can have access to Analytics that help you identify the properties that you want to track. How you manage the relationship between accounts and properties is up to you. This refers to the login account that you have - even though when I login through the Daneswood account we have access to the same views the 'Account' will be different. > In Google Analytics, a property is a website, mobile application or blog etc. that is associated with a unique tracking ID. A Google Analytics account can contain one or more properties. Learn more about Google Analytics properties. *Source: Google Analytics* In our case this would refer to your website. > A view is a set of specifications for tracking traffic on a single domain. You can think of a view as a single set of rules for Analytics to use in processing the traffic on a domain. Analytics shows reports for one view at a time. *Source: Google Analytics* This functionality isn't being used in our case but it could possibly be used in the future for sub domains for example. ### Dashboards Dashboards give you the ability to pick and choose what pieces of information you want to see at the same time. ### Real Time Tracking The real time tracking section of the Google Analytics website, as the name suggests, provides tracking data in real time. You can see how many people are on the website at any given moment. There are various different options in the realtime section where you can view and check different dimensions. For example, you could look at where your visitors are landing on your site from geographically in real time. Or, where your users originated from in terms of traffic source channel. ### Acquisition In order to check the performance of the site in terms of where your visitors are coming from we'll need to head to the "Acquisitions" area. #### Overview & Channels The "Overview" area within "Acquisition" provides a very top level breakdown of where your traffic is coming from. The sources listed may change over time. "Channels" provides more granular data, you'll find that many of the links in the "Overview" page send you to the "Channels" page. #### All Referrals A referral is a website or service that's linking to you. Usually this won't include Social Networks and Search Engines however these can occasionally slip through the net. If you've had a sudden surge in traffic as a result of someone linking to you, you can usually pin point what website this was from including the direct URL here. #### Keywords To see what keywords your visitors are using to find you simply click the "Keywords" link. You can then choose whether you want to view it for for Organic or Paid. You will see at the top of the list in Organic the term "(not provided)", this refers to those searchers whose keyword data Google have not been able to collect. Whenever a user searches on a secure version of Google this will happen, unfortunately there is nothing we're able to do about it, the data is hidden. It's important to note that for many people it's not a conscious decision to use a secure version of Google, it will be used automatically if they're logged in to any Google product, e.g. Gmail, Google Analytics, Webmaster Tools etc... ### Behaviour The "Behaviour" tab displays information on how your users are interacting with the website. #### Behaviour Flow The "Behaviour Flow" tool is a means to look at the general path your user takes when finding content throughout the site. It can highlight areas of the website that aren't performing and give you an insight in which are. #### Site Content The "Site Content" area gives us detailed information on how the pages of your website are performing in terms of how the user is 'using' them. You can see for instance which pages have a high bounce rate or what pages your users are exiting the site from - this we would typically hope would be a 'Goal' (e.g. a thank you page after a contact form). ### Useful Google Analytics Resources - [Google's Analytics Help Center](https://support.google.com/analytics/?hl=en#topic=3544906) - [Recent Changes to Google's terminology](http://www.seroundtable.com/google-analytics-sessions-users-18424.html) (valid as of 4th June 2014) - [Handy Preconfigured Dashboards](http://www.onlinemediamasters.com/google-analytics-examples-using-custom-dashboards/)