ONEFUSION INSTRUCTION MANUAL HELPING YOU MANAGE YOUR OWN SITE

Transcription

1 11/6/2013 ONEFUSION INSTRUCTION MANUAL HELPING YOU MANAGE YOUR OWN SITE Wordpress 2013 One Fusion

2 Table of Contents Welcome and Login... 1 Dashboard... 2 Dashboard Menu... 4 Toolbar... 6 Pages... 7 Add Site Content... 9 Edit Existing Content Media Library Vewing Files Adding Files Editing the File Properties Editing an Image Deleting media Adding and Managing Products Product Data Adding Product Images Shipping Managing Orders P a g e

3 Welcome It might be easier to say what this guide isn t, rather than what it is. It isn t an in depth look at every single function available within the WordPress dashboard. Nor is it a guide to help you develop or modify WordPress themes. My aim is to create a simple WordPress guide that will help you to get an overall understanding of how you use the various features within the WordPress Dashboard to keep your site. Login Before you can make any changes to your site, you will need to log in. The login for your site is typically found at the following URL - Obviously, replace your-site.com with your actual domain name. Once here use the provided user name and password provided by Onefusion to log in and let s get started. 2 P a g e

4 Dashboard Once you ve logged in, the WordPress Dashboard appears. This is your main administration homepage. At the very top of your Dashboard (and across every page) you will see the name of your site in the header area. In the example screenshot below (and throughout this documentation) the site name is My Site. This is also hyperlinked to your site's homepage. You will also see the name of the person who is currently logged in (e.g. Joe Blogg). Move your cursor over your name to reveal the Log Out link as well as a link to edit your Profile. When new or updated features are introduced into WordPress, you ll be shown a New Feature Pointer. This is simply to bring to your attention some feature within the Dashboard that s been added or updated. In the following Dashboard image, the New Feature Pointer is highlighting the updated Toolbar. Click Dismiss to hide the pointer. 3 P a g e

5 Dashboard Menu Options Down the left hand side of the Dashboard and on every page you will see your main admin navigation menu. This is where you ll find all the options to update and configure your site. Hovering your cursor over each of the main menu options will display a fly-out menu with the various choices for that particular menu option. Once you click each of the main menu options, that particular menu will expand to show all the available options within that section (if there are any). The main menu options and their usage are: Dashboard This will display your main Dashboard homepage. In the top left of your Dashboard you ll see some brief stats on the number of Posts, Pages, Categories and Tags contained within your site, as well as the total number of comments and approved comments. There s also a summary of how many Spam Comments you currently have. Posts This is where you can create a new Blog Post. You can also update your Categories and Post Tags. Media This is where all your uploaded images, documents or files are stored. You can browse through your Media library, as well as edit and update the files. 4 P a g e

6 Links You can add links here to be displayed on your site. The links added in here are usually displayed using one of the WordPress Widgets (as opposed to links that you simply create within a Post or Page). Links can also be divided into Categories. Pages This is where you create and maintain all your Pages. Comments You can manage all your Comments within this section, including replying to comments or marking them as Spam. Profile This screen lists all the existing users for your site. Depending on your Role, you can also add new users as well as manage their Roles. Tools This section gives you access to various convenient tools. You can also Import data to your WordPress site or Export all your WordPress data to a file. 5 P a g e

7 Toolbar The WordPress Toolbar is a way of easily accessing some of the most common WordPress features. When you are logged into your WordPress dashboard and you visit your website, you will see the Toolbar running across the top of your site. This bar only appears if you are currently logged into your WordPress site, which means that it won t be visible to your everyday site visitors. If you are not logged in, the Toolbar won t be displayed. The Toolbar allows you to quickly access the following commonly used features. Display your site Dashboard and other commonly used menu options that allow you to update your site View or Edit your blog comments Add a new Post, Media, Link, Page or User Perform a site Search View or Edit your Profile and logout from the WordPress Dashboard 6 P a g e

8 Pages After clicking on the Pages menu option you'll be shown a list of Pages that your site contains. Among the information displayed is the Page title, the Author, No. of Comments and either the Date Published or the Date the Page was Last Modified. The Pages screen will look similar to screen below. 7 P a g e

9 At the top of the page you can view how many Pages in total you have in your site and how many are Published or in Draft. When hovering your cursor over each row, a few links will appear beneath the Page title. Edit Will allow you to edit your Page. This is the same as clicking on the Page title Quick Edit Allows you to edit basic Page information such as Title, Slug, Date plus a few other options Trash Will send the Page to the Trash. Once the Trash is emptied, the page is deleted View Displays the Page 8 P a g e

10 Adding your Site Content Adding content to your site is an easy process no matter whether you re creating a Post or a Page. The procedure for both is almost identical. Apart from how they display on your site. Adding a New Page To add a new Page, hover your cursor over the Pages menu option in the left hand navigation menu and in the fly-out menu, click the Add New link. Alternatively, click the Pages menu option and then click the Add New link underneath, or the Add New button at the top of the page. You will be presented with a page similar to the image below. 9 P a g e

11 Editing Existing Content To edit an existing page, simply click on the relevant Page/Post title, when viewing your list of Pages or Posts. Alternatively, click on the Edit link that appears beneath the title when hovering your cursor over each row. The screen that appears will be exactly the same as the Add New Page/Add New Post screen, only with the existing content displayed. When you ve finished editing your Page/Post, click the Update button. 10 P a g e

12 Media Library The Media Library is where you can find all the files that you ve uploaded. The most recent uploads are listed first. The list of files contains a small thumbnail version of the image or file, the file name and the type of file (jpg, txt, etc.), the name of the Author who uploaded the file, the Page or Post which the image was uploaded on, the number of comments and the date the file was uploaded. When hovering your cursor over each row, a few links will appear beneath the file name. Edit Allows you to edit the file properties such as Title, Alt Text, Caption and Description. You can also perform some basic image manipulation Delete Permanently Deletes the file permanently from the Media Library View Will take you to the display page for that file 11 P a g e

13 Viewing a File in the Media Library To view a file, hover the cursor over the particular row that contains the file name and click the View link. If the file is an image, you'll see a larger version of the image. If the file was another type of file such as a text file or PDF for example, you'll simply see a link to that file. Click the link to view the file. Adding a File to the Media Library To add a new file to the Media Library, click on the Add New link in the left hand navigation menu or the Add New button at the top of the page. You will be presented with a page similar to the popup window that is displayed when uploading a new image in your Post or Page. If you re using one of the more modern browsers such as Firefox, Safari or Chrome, it will default to using HTML5 for the uploader (rather than Flash). If you re using another browser, it will fallback to using either Adobe Flash, Silverlight or HTML4. The benefit of using a browser like Firefox, Safari or Chrome is that you are now able to drag and drop files from your desktop, straight into the media uploader. To upload a new file to the Media Library, simply drag your images from wherever they are on your computer, into the area marked Drop files here. Your file(s) will be automatically uploaded. Alternatively, click the Select Files button and then select the files that you d like to upload, using the dialog window that is displayed. 12 P a g e

14 Once your image is uploaded, all its properties are displayed, including Title and URL. If you wish, at this point you can also add Alternate Text, a Caption and a Description. Title is displayed as a tooltip when the mouse cursor hovers over the image in the browser Alternate Text is displayed when the browser can t render the image. It s also used by screen readers for visually impaired users so it s important to fill out this field with a description of the image. To a small degree, it also plays a part in your website Search Engine Optimisation (SEO). Since search engines can t read images they rely on the Alt Text Caption is displayed underneath the image as a short description. How this displays will be dependent on the WordPress theme in use at the time. As of WordPress 3.4, you can now also include basic HTML in your captions Description The description is not prominent by default; however, some themes may display it 13 P a g e

15 Once the file is uploaded, simply click the Save all changes button. 14 P a g e

16 Editing the File Properties To edit the properties of an existing file, hover the cursor over the particular row that contains the file name and click the Edit link. Alternatively, you can also click the file name or the thumbnail image. Update the Title, Alternate Text, Caption and Description as necessary. Title is displayed as a tooltip when the mouse cursor hovers over the image in the browser Alternate Text is displayed when the browser can t render the image. It s also used by screen readers for visually impaired users Caption is displayed underneath the image as a short description. How this displays will be dependent on the WordPress theme in use at the time. As of WordPress 3.4, you can now also include basic HTML in your captions Description A description of the image used within WordPress Once the file properties are updated click the Update Media button to save your changes. 15 P a g e

17 Editing an Image WordPress has a basic image editing tool that allows you to perform some simple manipulation with your uploaded images. You re able to rotate and flip your images as well as scale them and crop them to different sizes. When editing the properties of an image (as opposed to other file types like documents or PDFs), click the Edit Image button just below the thumbnail to show the image editing tools. Just above the image you ll find the following image editing buttons: Crop Click on the image and drag the selection box to size that you d like the image cropped. Click the Crop button to crop the image to the new size Rotate counter-clockwise Rotate the image 90 counter-clockwise Rotate clockwise Rotate the image 90 clockwise Flip vertically Flip the image vertically Flip horizontally Flip the image horizontally Undo Undo the last change Redo Redo the last change 16 P a g e

18 Click the Scale Image link to resize the image proportionally. For best results, scaling should be done before performing any other operations like cropping, rotating, etc.. To scale your image to a new size, simply enter the width and height dimensions in the two fields (w x h) and click the Scale button. The original image dimensions are displayed just above the input fields, for your reference. There are several ways to crop your image. The easiest is to simply click on the image and drag the selection box to the appropriate size. If you d like your image cropped to a specific ratio, enter the values in the Aspect Ratio input fields (e.g. 1:1 17 P a g e

19 (square), 4:3, 16:9 etc.). You can then hold down the shift key and drag your selection to enlarge or reduce the size, while keeping this aspect ratio locked. If there is already a selection made, specifying the aspect ratio will automatically change the selection to match it. Whenever the selection box is adjusted, the dimensions are displayed in the Selection input fields. You can also manually enter the dimensions of the selection box (in pixels) by entering values into these two fields. Once your selection box is adjusted, simply click the Crop button just above the image to crop the image to this new size. By selecting one of the options in the Thumbnail Settings panel, you have the option to apply your changes to All image sizes, just the Thumbnail image or All sizes except Thumbnail. Click the Save button to save your changes. Click the Update Media button to return to the main Media Library page. If you d like to revert back to your original image, click the Edit Image button again to return to the image editor. A new Restore Original Image link is displayed just below the Scale Image link. Click the Restore Original Image link and then click the Restore image button to discard your changes and restore your original image. 18 P a g e

20 Deleting a File from the Media Library To delete a file from the Media Library, click on the Delete Permanently link that appears beneath the file name when hovering your cursor over each row. You will be prompted with the following message; You are about to permanently delete the selected items. 'Cancel' to stop, 'OK' to delete. Click the OK button to delete the file or click the Cancel button to return to the Media Library. 19 P a g e

21 Adding and managing products Now for the fun stuff, adding your products! But before diving into your first product you should familiarise yourself with how product categories, tags and attributes work. Adding a simple product Adding a simple product is a straight forward process and not too dissimilar from authoring a standard WordPress post. In the Products menu click Add Product; you will be presented with a familiar interface, and should immediately see where to type the product title and full description. A familiar interface for adding product information Under the main dialog box is the Product Type panel. Here you define the product type (as outlined above) and whether it is a downloadable (digital), or virtual (service) product 20 P a g e

22 Product data Next is the Product Data tab set. This is where the majority of the product data is input. Product data is added from this panel General tab SKU stock keep unit, used to track products. Must be unique, and should be named so it does not clash with post ID s. Price: Regular Price The item s main price. Sale Price The item s sale price. Tax: Tax Status The items tax status. Tax Class Which tax class the product belongs to. You can set up tax classes in WooCommerce > Settings > Tax. Inventory tab The inventory tab allows you to manage stock for the product individually and define whether to allow back orders. If stock management is disabled from the settings page, only the stock status option will be visible. 21 P a g e

23 Shipping tab Weight Weight of the item. Dimensions Length, width, and height for the item. Shipping Class - Shipping classes are used by certain shipping methods to group similar products. Linked Products tab Using up-sells and cross-sells you can cross promote your products with one another. They can be added by searching for a particular product and selecting the product from the drop down list: After adding them, they will be listed in the input field: Up-sells are displayed on the product details page. These are products which you may wish to encourage users to upgrade to, baste on the product they are currently 22 P a g e

24 viewing. For example if the user is viewing the coffee product listing page, you may want to display the tea kettles on that same page as an up-sell. Cross-sells are products which are displayed at the cart and related to the users cart contents. As an example if the user adds a Nintendo DS to their cart, when the arrive at the cart page you may want to suggest that they also purchase spare Styluses. Grouping Set this option to make this product part of a grouped product. Advanced tab Purchase note - Enter an optional note to send the customer after purchase. Menu order - Custom ordering position for this item. Enable Reviews Enable/Disable customers reviews for this item Excerpt Finally you can add an excerpt which should be a short description of the product. Typically this will appear next to the product imagery on the listing page whilst the long description will appear within the Product Description tab. Taxonomies On the right hand side of the Add New Product panel you will see your product categories in which you can place your product, just like a standard WordPress post. You can also assign the product tags in the same manner. 23 P a g e

25 Adding product images and galleries The featured image The featured post image is the main image for your product. It is the image which will be displayed within your product loops (IE on product categories, up sells, related products etc) and the initial focus of the image gallery on your product details page. Adding product galleries Product galleries simply display all images attached to a product, with the Featured Image being the primary image.you can create a product gallery using the same method as adding a featured image. 24 P a g e

26 Re-order and removing images from product galleries Images in the product gallery can be re-ordered easily via drag and drop. Simply reorder your images by moving them around. To remove an image from the product gallery, hover over the image and click on the red x. 25 P a g e

27 Shipping Local Pickup Local pickup is a simple method which allows the customer to pick up their order themselves. You can enable & configure Local pickup from WP Dashboard -> WooCommerce - > Settings -> Shipping -> Local Pickup Local Delivery Local delivery is a simple shipping method for delivering orders locally. The fee can be specified based on a percentage of the cart total, a flat fee, or it can be free.you can enable & configure Local delivery from WP Dashboard -> WooCommerce - > Settings -> Shipping -> Local Delivery 26 P a g e

28 Flat Rate Shipping Flat rates is a bundled shipping method which allows you define a standard rate per item, per shipping class or per order. You will find the settings page in WooCommerce > Settings> Shipping > Flat Rates. 27 P a g e

29 Configuration Enable/Disable Check the box to enable Flat Rates. Method Title Give the method a title this is what the customer will see when selecting a shipping method. Method availability - Define All allowed countries or specific countries to limit where Flat Rates is offered. Tax Status - Define whether tax is applied to the shipping amount or not. Cost per order Define a flat shipping cost applied to the cart as a whole. Additional Rates The additional rates field lets you apply a few extra rates on top of the base flat rate. Define each additional rate on its own line in the format: Option Name Additional Cost Per-cost type (order, class or item) Option name will be used instead of the main flat rate method title. Additional cost will be added to the cost per order and any other costs defined in flat rate shipping. Per-cost type can be set to order, class or item and controls how the additional cost is applied. e.g. with an additional cost of 9.99, order would apply 9.99, class would apply 9.99 multiplied by the number of shipping classes present in the cart, and item would apply 9.99 multiplied by the quantity of items in the cart. As an example, with flat rate shipping being $10, and the following additional rates: Priority 5 order Express 10 order The following rates would be selectable by customers: Flat rate $10 Priority $15 Express $20 28 P a g e

30 Additional Costs At the bottom of the flat rates screen there is a table for defining additional costs. These are added to all flat rates. Costs Added defines how your additional costs are applied; either per order, multiplied by the number of shipping classes, or multiplied by the number of items. Costs is a table where you define your actual costs, per shipping class: The Shipping class column refers to the shipping class of items in the cart. The any class row will apply unless you define a cost for a products shipping class. The Cost column must be a numeric cost, exclusive of tax. The Handling Fee column can be numeric or a percentage (e.g. 5%) which would be applied to the value of the items in that shipping class. Minimum Handling Fee can also be set to ensure this minimum is charged when applying fees. This is useful when using percentage based fees. Please note: You should not have any blank rows at the bottom of the extra costs section, this will cause the sky to fall down. 29 P a g e

31 Managing Orders Introduction Orders are created when a customer completes the checkout process and are visible by Admin and Shop Manager users only. Each order is given a unique Order ID. An order also has a status. The order statuses let you know how far along the order is, starting from pending and ending with complete. The following order statuses are used: Pending Order received (unpaid) Failed Payment failed or was declined (unpaid) Processing Payment received and stock has been reduced- the order is awaiting fulfilment Completed Order fulfilled and complete requires no further action On-Hold Awaiting payment stock is reduced, but you need to confirm payment Cancelled Cancelled by an admin or the customer no further action required Refunded Refunded by an admin - no further action required 30 P a g e

32 Viewing orders When you start taking orders the order management page will begin to fill up. You can view these orders by going to WooCommerce > Orders in the left hand admin menu. Each order row displays useful details such as the customers address, their , telephone number, and the order status. You can click on the orders number or the view order button to see the single order page (this is also where you can edit the order details and update the status). You can filter the list of displayed orders by date, status and customer by using the form at the top of the screen: Order rows also have some handy shortcut buttons for marking orders complete and processing, should you want to do so quickly: 31 P a g e

33 Editing/viewing single orders From the single order page not only can you view all order data, you can edit and update it. You can: Change the order status Edit order items modify the product, prices, and taxes Stock Reduce and restore stock for an order Order Actions Resend order s to the customer using the drop down menu above the Save Order button. Send New Order, Processing Order, Completed Order or Customer Invoice s very handy if manually creating an order for your customers Modify product Meta to edit product variations by removing and adding meta. Order Data The order data panel lets you modify the order status, view (or change) the customer s order note, and change which user the order is assigned to. Here you ll also find the customers billing and shipping addresses. To edit the addresses click edit and a form will be revealed. Once saved, the new address will be displayed, in a localised format. 32 P a g e

34 Order Items The next panel on the order page is the order items panel. This panel lists items which are in the order, as well as quantities and prices. The editable parts of line items include: Tax Class Tax class for the line. This may be adjusted if, for example, the customer is tax exempt. Quantity The quantity of the item the user is purchasing Line Subtotal Line price and line tax before pre-tax discounts Line Total - Line price and line tax after pre-tax discounts Add Meta Add and remove meta to change product variable options. Here you can also add additional fees for items. Click Add fee and fill out the fee name, tax status and amount: 33 P a g e

35 Order Totals The order totals panel stores totals and tax for the order. You can enter these values yourself or have them part calculated for you using the calc totals button. The totals comprise of the following: Cart Discount pre-tax discounts. Can be auto-calculated. Order Discount post-tax discounts. Need to be input manually. Shipping cost cost excluding tax. Shipping method name of the method. Cart tax cart tax total. Shipping tax shipping tax total. Order total Payment method name of the payment method used. There are two buttons available on this panel calc taxes and calc totals. Calculating taxes will use your prices, and calculate the tax based on the customers shipping address. If the customer s address has not been input, it will default to the stores base location. 34 P a g e

36 There is also a section called tax rows. This is where you can define (and name) multiple tax rows. This is useful if, for example, you take multiple taxes or use compound taxes. These values are displayed on the customer invoice. Tax rows are useful for naming and showing multiple taxes Adding an order manually Add an order using the Add New link at the top of the orders page. Once added you can input the customer details, add line items, and calculate the totals. You should set a relevant status for the new order if it needs to be paid use pending. 35 P a g e

37 After saving, you can use the Order Actions dropdown to the Customer Invoice with payment instructions. To send, be sure to select Save Order. Use Order Actions to Resend Order s 36 P a g e

38 Order/Customer Notes The Order Notes panel displays notes attached to the order. These are used for storing event details, such as payment results or reducing stock levels, and for adding notes to the order for customers to view. Some payment gateways also add notes for debugging. The notes panel for internal use, or notifying customers The notes feature can be a very powerful tool for communicating with customers. Need to add a tracking number for shipping? Some stock is delayed? Add a customer note and they will be automatically notified. When added, customer notes are highlighted in purple. Customers receive notes via , but can view them by viewing an order, or using the WooCommerce order tracking page. 37 P a g e