Wordpress user guide

Wordpress user guide

Wordpress user guide

Scottish Borders Website Design / Wordpress user guide Wordpress user guide The following guide and video links should help you to understand the admin area of your website. The site uses the Wordpress platform (software that forms the core site structure) combined with specific plugins (additional third-party functionality), WooCommerce shop software and the Divi Page Builder (a tool designed to provide a comprehensive range of drag and drop layouts and content elements). A note of caution. Your new website features a combination of carefully structured and tested software, plugins, code and content.

Whilst this software has been engineered to allow you to take control of your website, human error can lead to problems, formatting issues and inappropriate content accidentally being published. If you are unsure of what you are doing please get in touch to discuss the changes that you wish to make. As Wordpress and the Divi Page Builder are constantly being upgraded this general guide is a work in progress. If you spot any dead links, out-of-date instructions or feel that additional areas of explanation would be helpful, your feedback would be much appreciated.

Logging in Pre launch login: http://176.74.20.8/~campbeauly/wp-admin/ Post launch login: https://www.campbellsofbeauly.com/wp-admin/ Username: NicolaSugden Password: P4b)r@@@RAw^v!*FF&4)ph^r Role: Administrator

Wordpress user guide

Scottish Borders Website Design / Wordpress user guide Admin menu The left-hand menu within the admin area of the site contains a lot of useful links, however, there are a number of options which are not relevant to the site, and some are best left untouched. The following is a basic breakdown; General pages, Content controlled via Divi, Content controlled via WooCommerce, Settings best left for Scottish Borders Website Design, Functionality to be ignored: Dashboard - opening welcome screen featuring a summary of details (which can be opened/closed, or dragged around to suit).

Jetpack - provides some additional functionality for free, can be ignored. Posts - for adding to and editing the blog posts using the Divi content management software. Media - for uploading and managing media files. Pages - for manually adding and editing pages using the Divi content management software. Comments - turned off (even with custom plugins it is next to impossible to stop automated spam and abuse of the comments feature). Projects - not used within the site functionality. WooCommerce - this is the central area for all WooCommerce settings, orders and accounts. Products - a comprehensive list of all products and related details.

Appearance - additional Wordpress styling, only for use by Scottish Borders Website Design. Plugins - additional software configuration, only for use by Scottish Borders Website Design. Users - a comprehensive list of all site users (including admin and registered customers), can be ignored. Tools - Wordpress tools, only for use by Scottish Borders Website Design.

Settings - additional Wordpress and plugin settings, only for use by Scottish Borders Website Design. Optimisation.io - streamlined WooCommrce optimisation, only for use by Scottish Borders Website Design. WP Mail Log - tests and logs outbound site messages, only for use by Scottish Borders Website Design. Backup Buddy - backup software, only for use by Scottish Borders Website Design. Term order - additional taxonomy options, only for use by Scottish Borders Website Design. Security - site security settings, only for use by Scottish Borders Website Design. Maintenance - can activate the maintenance holding page and temporarily stop shoppers from browsing.

Divi - theme, CMS and WooCommerce customisation, only for use by Scottish Borders Website Design.

Wordpress user guide

Scottish Borders Website Design / Wordpress user guide Understanding the Divi Page Builder To understand how the Divi Page Builder works please watch the basic overview video below. In some places it is a little slow and may cover subjects that do not relate to your specific website, however, it is worth watching in full as it covers all the basic elements relating to editing page content and changing the layout, styling and content types. Basic overview https://www.elegantthemes.com/plugins/divi-builder/documentation/builder-ov erview-new/ For more in-depth guidance please watch the following videos: Sections https://www.elegantthemes.com/plugins/divi-builder/documentation/sections/ Rows https://www.elegantthemes.com/plugins/divi-builder/documentation/rows/ The Divi Library (drag and drop content and functionality) https://www.elegantthemes.com/plugins/divi-builder/documentation/divi-libra ry/ The Divi Library contains a huge amount of drag and drop content and functionality, from simple text modules to full screen videos and countdown timers.

The following page provides links to documentation and a video guide describing each and every library item that can be used.

https://www.elegantthemes.com/plugins/divi-builder/documentation/ The combination of Wordpress and the Divi Page Builder allow for a huge array of functionally, however, some Library elements may require additional styling when added to the page, or may not appear quite as desired.

Scottish Borders Website Design / Wordpress user guide Editing existing pages 1. In the left hand column click on 'Pages', from the list of pages click on the page that you would like to edit. 2. The page will already have been set up and formatted using the Divi Page Builder - please watch the overview video above and review the documentation on the Divi Library modules for more information on how to edit existing sections, rows and modules, or how to add new sections, rows and modules.

3. If your page has been set up with global modules (sections of content that are repeated throughout the entire site) these will be shown in bright green. Please note that if green global modules are edited the changes will affect all pages on the website, however, a global item can be deleted if it is no longer wanted on a specific page (and this will not affect other pages). As a rule, global modules should only be edited by Scottish Borders Website Design.

4. Once you have made your changes click 'Preview Changes'. If you are happy with your amendments then click 'Update' and the changes will be published. Adding new pages 1. In the left hand column place the cursor over the word 'Pages' and click on 'Add new' from the sub menu. 2. On the following new page add a title - this will also become the file name and help with search engine placement, so it should be short, interesting and relate to your content. 3. Click on the purple 'Use The Divi Builder' button and you can build your page using sections, rows and modules from the Divi Library detailed above.

4. At any time you can use the 'Save Draft' button to save changes. People will not be able to browse a draft page on the web, but if you want to keep the page private you can amend the settings below the 'Save Draft' button. 5. If you would like the new page to appear in a subsection (i.e. a new page about 'Plumbing' could be added to the 'Services' section) you will need to assign the page with a Parent in the right hand column. Select the parent page that you want to assign the new page to.

6. Once you have finished building the new page and you have used the 'Preview' button to check that the content looks right, press the 'Publish' button.

At this point the page will be visible on the web, however no-one will be able to see it as no other pages or websites link to the new page - move onto the next step. Adding new pages to a site menu 1. In the left hand column menu place the cursor over 'Appearance' then select 'Menus'. The page that you have created will be listed in the area defined as 'Pages'. Tick the box next to the newly created page and it will appear at the foot of the 'Menu Structure' to the right.

Scottish Borders Website Design / Wordpress user guide 2. The menu structure mirrors your main website menu, including drop downs. If the new page belongs in the main menu as a top level item simply drag the box containing the new page to where you want it to appear in the menu structure (i.e. just below the home page if it's important, or just above the contact page if it's not so important), then press the 'Save Menu' button. 3. If the new page was created to sit within an subsection of the site then you will have assigned it a parent (detailed above). To add the new page as a drop down option to that parent page, simply drag the new page directly below the parent page, but instead of dropping the page in line with the parent, drop it below and to the right of the parent.

The menu structure should show the new page as being slightly offset to the right of other pages (this represents subsection that will show on the main site as a drop down). If this does not happen and the menu pages are all in line, drag the new page further to the right, drop it, and it should stay in place (offset from other top level pages).

4. Once complete press the 'Save Menu' button and your new page will be visible to site users as a dropdown option. Editing blog posts 1. Click on the 'Posts' link in the left hand column menu and on the subsequent page click on the post that you would like to edit. 2. Posts can make use of the Divi Page Builder, however, standard posts usually just contain text and possibly a featured image. Text can simply be edited using the standard Wordpress post editor, and the featured image is defined in the right hand column of the posts page under 'Featured Image'. It is standard practice for the right hand column of every published post to show links to other posts and categories - if you would like to change this please get in touch.

3. If you wish, details such as the publish date, visibility, chosen category and selected tags can be changed in the right hand column. 4. As with page editing, it is best to 'Preview Changes' before publishing amendments using the 'Update' button. Adding blog posts 1. Highlight the 'Posts' link in the left hand column menu and click 'Add New'. 2. On the following post page add a title - this will also become the file name and help with search engine placement, so it should be short, interesting and relate to your content.

3. Posts can make use of the Divi Page Builder (using the video guidance above), however, standard posts usually just contain text and possibly a featured image.

Text can simply be added and edited using the standard Wordpress post editor, and the featured image is defined in the right hand column of the posts page under 'Featured Image'. It is standard practice for the right hand column of every published post to show links to other posts and categories - if you would like to change this please get in touch.

Scottish Borders Website Design / Wordpress user guide 4. If you wish, details such as the publish date, visibility, category and tags (related keywords) and other settings can be edited in the right hand column. Two or three keywords that summarise the bulk of the post should be added to the tags field, and each new post should be assigned to a related category (and new categories can be added if required). 5. As with post editing, it is best to 'Preview Changes' before publishing amendments using the 'Update' button.

6. Unlike adding a new page to the site, there is no need to add a new post to a menu - the post will automatically appear at the top of the posts page as well as in the related category page and archive pages (arranged by date).

Scottish Borders Website Design / Wordpress user guide Understanding WooCommerce WooCommerce has been installed and configured to allow the website to sell and process orders and payments. WooCommerce operates differently to Wordpress pages and blog posts (mentioned above) as these can be edited using the Divi Page Builder. Instead, WooCommerce is purely data driven and the shop category pages and product pages are all created and controlled via the 'WooCommerce' and 'Products' menus (for instance, when you add a new product the page is automatically created for you).

As with other Wordpress software, WooCommerce is constantly being upgraded to provide enhanced functionality, features and security.

To get a better understanding of WooCommerce it is therefore recommended that you read through the guides detailed below. Each one features a helpful video and step by step walkthrough. Getting started with WooCommerce https://docs.WooCommerce.com/documentation/plugins/WooCommerce/getting-star ted/ Managing Product Categories, Tags and Attributes https://docs.WooCommerce.com/document/managing-product-taxonomies/ Adding and Managing Products https://docs.WooCommerce.com/document/managing-products/ Managing Orders https://docs.WooCommerce.com/document/managing-orders/ Product management - WooCommerce basics Due to the fact that Wordpress and WooCommerce are regularly updated (with new features and layouts being added) it is best to read the walkthrough and watch the video using the link below, then read the notes on customised functionality and features specific to your site (detailed on the next few pages): https://docs.woocommerce.com/document/managing-products/

Scottish Borders Website Design / Wordpress user guide Product management - Customised functionality Following on from the guide to the addition and editing of simple and variable products detailed above, there are several specific types of functionality unique to your website. 1. When adding a new product please ensure that on the 'Edit product' page that in the purple 'Divi Product Settings' field that the page layout is set to fullwidth (this removes a default sidebar from the product page): 2. When adding a size chart to a product page first output the size chart using the pre-styled sizing chart spreadsheet (if it doesn't already exist).

On the product page click on 'Add media' (below the product title), upload the new chart to the media library and select it. The chart will appear in the text area where care and washing instructions can also be entered (as below):

Scottish Borders Website Design / Wordpress user guide 3. When adding attributes to a variable product only the 'Used for variations' tick box should be selected - 'Visible on the product page' should not be selected (this replaces the default WooCommerce dropdown menu on the product page with the custom styled WooSwatches functionality. 4. When adding a new product (simple or variable) tags need to be added that define the product colours, which in turn allows search refinement to work (whereby customers can view products by selecting a specific colour). When adding a new product please ensure that each prominent colour and/or pattern is typed into the 'Tag' field - when you begin typing related terms will pop into place and can be clicked on.

Please note, this is not for official colour terminology, this is used to define general colours. These include:

Scottish Borders Website Design / Wordpress user guide Colours White, Cream, Beige, Yellow, Orange, Brown, Red, Pink, Purple, Navy, Blue, Green, Multicoloured*, Grey, Black Patterns Stripe, Check, Herringbone, Dogtooth, Cableknit, Fairisle *Please note that the tag 'Multicoloured' is only for use for products that feature a multitude of different colours (such as the dog collars or fly fishing brooches), and it should not be used to define variable products with a range of different colour attributes (for example, a jumper available in blue, red or cream), or a product that contains two or three different colours.

A jumper available in three separate colours, such as blue, red or cream would require the tags Blue, Red, Cream. If one product features several colours, such as a blue jumper with a white and red stripe, this would be defined with the tags Blue, White, Red. If a product features a colour not specifically defined by those listed above (such as "Midday Sea" or "Chestnut Mushroom") the shop manager needs to assign the closest tag (in this instance, Blue or Beige respectively).

If additional patterns are required please get in touch so an icon can be created.

Scottish Borders Website Design / Wordpress user guide 5. The default product gallery is only used for products with photos that require different views, not for those with different colours. For example, a main product image can be added which will be used to represent that product in the shop and checkout pages. The product gallery would only be used to showcase different views, for example, a front on view of a coat would be added as the main product image, but a reverse view, a photo of the internal fabric, a shot of the item folded up, or a photo featuring a model could be added to the default gallery.

Photos of different colour variables (i.e. blue jumper, green jumper and yellow jumper) should not be added to the product gallery, instead please follow the instructions below.

Scottish Borders Website Design / Wordpress user guide 6. To add photos that represent different product colour variables click on the 'WooSwatches' tab in the 'Product data' area on the 'Edit product' page, then click on the round grey 'Colour' rectangle to review extra features (as below): Enable one attribute swatches On shop/archive pages should be ticked Select atrribute for shop swatches should be 'pa_colour' Display type should be set as 'Custom colour or Image swatches' Display size should be 'Big (60px * 60px) - Square' Show attribute name should be set to 'No'

Scottish Borders Website Design / Wordpress user guide To define a photo for each colour click on the colour row to expand its options, as shown below: The display type should be 'Image' and the photo that represents that product colour should be selected as the Swatch Image and Hover Image.

Please note that for variable products with different size attributes there is no need to add any settings to the 'WooSwatches' tab, WooSwatches is purely used to define a product photo that relates to each colour.

7. Other default settings relating to products are as follows: Tax status is always set to 'Taxable' Tax class is always set to 'Standard' (20%, as defined in WooCommerce - Settings). Only a weight needs to be added to the shipping field - no classes or dimensions are used as the Royal Mail Shipping plugin calculates shipping based purely on weight, postage type and shipping address. If you are in any doubt when adding a new product, open a similar existing product (either simple, variable

Scottish Borders Website Design / Wordpress user guide with sizes, variable with colours or variable with sizes and colours) and cross reference settings for consistency.

Locating products To quickly locate the product that you wish to edit visit the 'Products' page and use the dropdown menus at the top of the page to show products by category (for example Women - Accessories - Bags), by product type (simple or variable), by stock status, or even searching by product name. Quick product edits It is possible to quickly edit many attributes for simple products without loading the product page. On the 'Products' page place the cursor over a product and links will appear. Click on 'Quick edit' and additional options (such as price, stock level, weight, tax status etc) will appear.

Changes can be easily made before pressing the 'Update' button.

Some variable product attributes can also be edited using the quick edit tool, but please be aware that altering the price, weight, tax status or stock level of a variable product via the quick edit function will update all product variables (making every size/colour the same).

Scottish Borders Website Design / Wordpress user guide Image dimensions Slider image - 1600 pixels x 600 pixels, 72dpi, 60% quality .jpg Gallery image - 1000 pixels x 667 pixels, 72dpi, 60% quality .jpg Blog feature image - 1000 pixels x 667 pixels, 72dpi, 60% quality .jpg Product photos - 800 pixels x 800 pixels, 72dpi, 60% quality .jpg Size charts - Size/style defined by size chart spreadsheet, saved as .gif or .jpg Image names The consistent use of file names for charts, graphics and product photos will help with the quick location of imagery within the image gallery.

Slider images - file names start with "banner" followed by the related page name. For example: banner-about.jpg is the slider image for the About us page. Gallery images - file names start with "gallery" followed by the related page name. For example: gallerysporting.jpg is a gallery image on the Sporting Style page. Blog images - file names start with "blog" followed by descriptive terms, for example: blog-royal-warrant.jpg. Product photos - file names include all key terms relating to each specific product. For example: shetland-woolcrew-neck-jumper-denim.jpg identifies the product as a Shetland wool jumper with a crew neck in denim Size charts - file names start with "size" followed by each key product name they represent, for example: sizecap-beauly-conon-sherlocks.gif relates to the size chart for the Beauly, Conon and Sherlock caps.

Locating images in the media gallery There are a lot of files in the media gallery. To quickly locate a size chart, blog image or product photo you can enter a mix of terms into the search field on the media gallery page that relate to the above naming structure. Searching for "size jumper" or "size cap" will show size charts that relate to jumpers and caps respectively. A search for "jumper crew" will show all jumpers with a crew neck, and so on.

Scottish Borders Website Design / Wordpress user guide Search Engine Optimisation All pages and posts feature SEO software that sits under the Divi Page Builder or post editor. If you would like a new page or post to show up in search results for a specific term, you can add that term to the 'Focus Keyword' field and the software will provide a comprehensive 'Content Analysis'. The analysis will provide step-by-step guidance that will help improve the optimisation of your page. If improved online performance, search rank and traffic is desired, Scottish Borders Website Design can provide a quote for more detailed ongoing marketing work.

Software updates Your Wordpress site has been installed with a Firewall and software to keep various files, settings and plugins upto-date. However, Wordpress is constantly being improved and some major updates will require a manual update. If you should see a message advising that you contact your administrator about an update, please do get in touch (all software updates are covered by the annual hosting agreement).

Site updates In the event that you would prefer Scottish Borders Website Design to update your site content and structure on your behalf please get in touch. Errors Wordpress, plugins and Divi Page Builder are all regularly updated to help improve functionality and maintain security standards. As mentioned above, the bulk of these updates will occur automatically. However, some updates between different third party plugin provides can cause unexpected errors. The website also makes use of caching software to help pages load faster for users, but the software can also lead to what look like errors (caused by your browser displaying a mix of new and cached code, styling and images).

When reviewing the website after making a change it is always best to clear your browser cache (or better still, view the site in a private or incognito window/tab), refresh the page that you are looking at, or test it independently by entering the URL into http://www.locabrowswer.com (this will avoid any cached files in your browser and will display the website as other people see it).

In the unlikely event that you experience a problem when using the admin area (or if something suddenly doesn't look right on the website itself and you have cleared your browser cache, refreshed the page and checked the page in http://www.locabrowser.com), please get in touch so that Scottish Borders Website Design can run a diagnostic check and identify and fix the problem (usually by deactivating all plugins then manually reinstalling the latest versions).

Scottish Borders Website Design / Wordpress user guide Getting in touch To request assistance or a manual update please contact: Jonathan Nicholson Creative Director telephone: 01361 884 145 email: jcn@scottishborderswebsitedesign.co.uk web: www.scottishborderswebsitedesign.co.uk