Wordpress user guide

 
 
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




                                                            Scottish Borders Website Design / Wordpress user guide
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.




                                                            Scottish Borders Website Design / Wordpress user guide
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-overview-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-library/


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-started/


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: gallery-
sporting.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-wool-
crew-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: size-
cap-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 up-
to-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




                                                           Scottish Borders Website Design / Wordpress user guide
Next part ... Cancel