03 adding content

19
The Furniture Store WordPress Theme = recommended tip = how to FAQs = = customize or special notes Adding Content I have taken a „per page“ approach starting with the front page and going deeper in an efford to make this easy to follow. Each section is introduced with a screenshot followed by my comments on sections that need clarification, some how-to-FAQs and some customization notes. Right, let's begin! If the screenshot above is not legible please open the one I provided in the Documentation folder here: Documentation > help > images Product Categories Use the Uncategorized category you have - rename it to serve as one of your shop's main categories. In my case I renamed it to "Main Category One".

Upload: felixmt

Post on 10-Nov-2015

221 views

Category:

Documents


0 download

DESCRIPTION

03 Adding Content

TRANSCRIPT

  • The Furniture Store WordPress Theme

    = recommended tip = how to FAQs = = customize or special notes

    Adding ContentI have taken a per page approach starting with the front page and going deeper in an efford to make this easy to follow. Each section is introduced with a screenshot followed by my comments on sections that need clarification, some how-to-FAQs and some customization notes. Right, let's begin!

    If the screenshot above is not legible please open the one I provided in the Documentation folderhere: Documentation > help > images

    Product Categories

    Use the Uncategorized category you have - rename it to serve as one of your shop's main categories.

    In my case I renamed it to "Main Category One".

  • The Furniture Store WordPress Theme

    The point is here to use it to represent one of your main categories. You can create as many main categories and subcategories as you want.

    How do I create categories? http://codex.wordpress.org/Manage_Categories_SubPanel

    Main Navigation and Logo

    Please don't neglect to review your options under eCommerce > Theme Options > Design > Navigation

    How do I replace the logo? Open the psd folder provided and use the logo.psd file you'll find. Make your adjustments and

    save it as logo.png Place it inside the child theme's images folder to replace the original one.The font I used is called Napoleodoni and you can download it here:http://www.dafont.com/napoleodoni.font

    Granted your logo graphic may have different dimmensions to mine. If yours is larger then you will need to adjust the css so open style.css of the activated child theme and find the following:

    /*logo*/#branding {font-size:2.0em;margin-bottom:0;width:290px;height:50px;text-indent:-9999em;background:url(images/logo.png) no-repeat top left;}#branding a {float:left;display:block;width:290px;height:50px;}and adjust the width and height to match yours.

    The Featured Area:

    The Featured Area on the Front Page was created to display: main shop categories with a category specific image specific categories with a category specific image, or individual products with a Featured Image using the custom field: featured_img

    You can set the option you like from your Theme Options > General - Your Front Page Featured Section

    How do I create category specific images?

    Open the psd folder I provided for you and find the Category Specific Images folder. Use the psd template provided

    Create your images and save each image using the corresponding category slug as the file name and finaly, place them inside the folder: uploads/cat_imgs( see installing.pdf)

    How do I find the slug? http://codex.wordpress.org/Manage_Categories_SubPanel#Add_Category

  • The Furniture Store WordPress Theme

    How about if I want to feature individual products. Is there anything I need to watch out for?Make sure your image is large enough. It will be a good idea to use the psd template I provided

    for the Category Specific Images. Then upload your image on your server. I used the WordPress media uploader. Copy it's path and enter it as the value of the custom field: featured_img

    There's one more thing you need to do and that is to make the product Sticky

    Right, and how do I do that?As you are viewing your Posts

    Overview Table click on Quick Edit your Product Post and to the right you'll see the option to make it sticky. That's all you have to do to feature individual Product posts. Easy right?

    I don't mind the custom font you are using in the sidebar but I want to use something different. How do I customize that? Or my target language contains special characters (eg. , ,)

    See the using_cufon.pdf document

    How about the widgets at the bottom of the page and in the Sidebar? How do I use those?See the NWS_custom_widgets.pdf and page 7 in this document!

    I want to change the background colour. How do I do that? Can I also have an image for the background?

    You'll do this in the css. Open your style.css and find the following line:

    body {background:#fdfdfd;font-family:Arial, sans-serif;color:#666;}The property you will want to change is the background.

    If you don't know how, there's plenty of resources in the internet that can help you learn some basic css. A simple google search will take you there.

    If you do not want to concern yourself with coding then please consider hiring someone to do it for you.

  • The Furniture Store WordPress Theme

    How categories display on Category Pages:If the screenshot below is not legible please open the one I provided in the Documentation folderhere: Documentation > help > images

    Choose the number of columns (3 or 4), place your sidebar to the left or to the right and customize the order your categories appear as you want. See the Theme Options for these

    settings.

    Please note the Category Specific Image at the top. Follow the instructions on page 2 for creating it.

    How about the Category description that shows up on hover? How do I get my description there?

    Simply type in some text in the Description Textarea as you create each category

  • The Furniture Store WordPress Theme

    Category Pages that display Products

    If the screenshot above is not legible please open the one I provided in the Documentation folderhere: Documentation > help > images

    Same comments as the previous page. Again please check your theme settings for your options here (columns, sorting etc)

    How about the little teaser I see below? Can I remove it? Or I don't see it with my setup.It's a setting you need to check. It displays the Title, Price and an Optional Remark-see

    07_product_customFields.pdf

  • The Furniture Store WordPress Theme

    Tag and Custom Taxonomy Pages

    If the screenshot above is not legible please open the one I provided in the Documentation folderhere: Documentation > help > images

    As with the Category pages, you have the option to choose from 1 to 4 columns. Please see the Theme Options for these settings.

    Please note the Term/Tag Specific Image at the top. You create them much the same way you have created the Category Specific Images. Please read on to see how.

    I don't see any of these pages. Where are they in my copy of the theme?You will only access the tag or custom taxonomy pages if you use the Shop by... custom built

    widgets.

    Hold on; Taxo.. what?Custom taxonomies; just an intelligent way to label your product posts -use them as you use

    tags. [FYI Post-Tags is just another taxonomy only a default one] If you are new to tags please see here: http://codex.wordpress.org/Posts_Tags_SubPanel

  • The Furniture Store WordPress Theme

    I don't understand the point of the Shop by... widgets. What are these widgets and how do I use them?

    Ok, so you have categorized your products nicely but you are looking for an attractive way to bring out your product collection closer to your customers; promoting this way other opportunities for people to stay on longer and perhaps buy more.

    This was the idea behind the creation of the "Shop by ..." widgets.

    So how do you use them? Simply said, like you have been using regular tags. That's right.

    All you have to do is fill in a tag term in the appropriate Meta Box (appears to the right when you Edit a post -if of course the desired Shop by... widgets have been activated from the theme options)

    Tags may appear in a select drop down. Useful when

    having many tags! Or as Images

    Whatever you choose from the Widget's settings

    Ok the drop down is clear. How do I create my tag specific images for the

    sidebar or for the main content page?

    The same way you created your category specific images. You will save them after the corresponding tag slug.

    Open the psd folder I provided for you and find the Tag Specific Images folder. Open the tag_imgs.psd you'll find inside and use it as a template to create your own tag specific images.

    Save each after the tag term slug. So for a tag called "Some Brand" the image should be saved as "some-brand.jpg/gif/png" (the file type is selected from the theme options)

    and place them inside the appropriate folder as shown below:

  • The Furniture Store WordPress Theme

    For All Purpose tag images uploads/tag-imgs folder For Outfit tag images uploads/outfit-imgs folder For Size tag images uploads/size-imgs folder For Fit tag images uploads/fit-imgs folder For Colour tag images uploads/colour-imgs folder For Brand tag images uploads/brand-imgs folder For Selection tag images uploads/selection-imgs folder For Style tag images uploads/style-imgs folder For Price tag images uploads/price-imgs folder

    And how do I activate my Shop by... widgets?

    Simply drag the widget you need where you'd like it to appear (in which sidebar).

    What about the options I see?

    Please see 05_NWS_custom_widgets.pdf

    This is all nice but when I changed my thumb width there was no change in the images on my website's frontend. What's happening?

    When images are resized they are also cached in their appropriate folders for better performance. If you had a different setting originaly and later on changed your mind and decided to adjust the width option inside the widget and have not seen any difference simply using an ftp program go inside the folder where the tag images are saved and delete what has been cached. Refresh your frontend and see the new images appear. Use the guide below to get to the right folders

    For All Purpose tag thumb images uploads/tag-imgs folder/tag-imgs-thumbs/ For Outfit tag thumb images uploads/outfit-imgs folder/outfit-imgs-thumbs/ For Size tag thumb images uploads/size-imgs folder/size-imgs-thumbs/ For Fit tag thumb images uploads/fit-imgs folder/fit-imgs-thumbs/ For Brand tag thumb images uploads/brand-imgs folder/brand-imgs-thumbs/ For Selection tag thumb images uploads/selection-imgs folder/selection-imgs-

    thumbs/ For Style tag thumb images uploads/style-imgs folder/style-imgs-thumbs/ For Price tag thumb images uploads/price-imgs folder/price-imgs-thumbs/

    Adding ProductsFor bulk uploads (csv): Until we develop and release our own solution you may find one of these plugins useful:

    http://wordpress.org/extend/plugins/csvpig-mass-import-plugin/http://wordpress.org/extend/plugins/csv-importer/

    If no image attachments are found the product image will be pulled from the image_thumb custom field - see product_customFields.pdf

  • The Furniture Store WordPress Theme

    Products

    If the screenshot above is not legible please open the one I provided in the Documentation folderhere: Documentation > help > images

    To create a product go to Posts > Add New.Type a title and a description and add your images. For the demo I have disabled comments but you can enable them if you want to (they are already styled with Trackbacks separated!)

    Very Important! From your Settings > Miscellaneous set "Store uploads in this folder" wp-content/uploads and do NOT "Organize my uploads into month- and year-based folders".

    You have also the option: to use different Image effects on the Product's Single Page. Supports jQzoom and FancyBox

    as alternative options to Magic Zoom. As well as no effect at all! to display an image thumbnail instead of the default numbered tab and finally to embed a video with simple custom shortcodes. see- 10_embedding_videos.pdf

    The images below are from The Clothes Shop but the functionality is the same!

  • The Furniture Store WordPress ThemeOk, how do I add images?

    Click on the Add an image icon and a modal window will appear.

    Select all the product images you need. When Wordpress finishes uploading them you get the following:

    Click on the Save all changes button. This will bring you to the following (next screenshot):

  • The Furniture Store WordPress Theme

    DO NOT Insert gallery! Finished :)

    The image you ordered as "1" will appear first on your single product description and will also appear when the product is displayed on multible product post pages (category pages, tag and custom taxonomy pages, search etc.)Also worth mentioning here is that the second product image (as ordered in the media uploader) will appear behind the main (1st) product image when hovered (on multible product post pages)Categorize and add your Tags.

    If you decide later to add an image simply follow the same steps as above. WordPress will know what to do with it ;)

    If you on the other hand like to delete one from the gallery set, open the Add an image lighbox click on Gallery to get to the current images associated with your product click on Show and at the bottom you'll have the option to delete the image you do not need anymore.

    Ok got it. How about the price and all the other product related information?

    Right, we will use custom fields for that.There's 3 basic custom fields that need to be present as all times. These are:

  • The Furniture Store WordPress Theme

    !Case sensitive! ID_item -must be unique!Please do NOT use # or empty spaces!

    price - in the format 0.00 DO NOT use any currency symbols here or price formatting! This is done from the theme settings!

    image_thumb - the full path to the image file you have uploaded in the product -post description eg http//:yourwebsite/wp-content/uploads/yourImage.jpg

    Here's how it will look like:

    And how do I find the image file path?

    Scroll up to the post editor and click on Add an image then Gallery and you'll see all the images you have previously uploaded.Click on the Show link next to the image you have ordered first as you see below

    Copy it and paste it in the Value field for the image_thumb custom field.

  • The Furniture Store WordPress Theme

    What about adding select drop down options like Size and Colour etc?

    We'll use custom fields again.There's 2 types of select drop downs.

    Regular attributes Price affecting attributes

    What 's the difference?

    Regular attributes are selectable options that have no effect on the price. See example here:http://theclothesshop.sarah-neuber.de/women/womens-tops/womens-tees-tanks-sweatshirts/womens-top-2

    Price affecting attributes are, as the name suggests, selectable options that affect the product's final price. See example here:http://theclothesshop.sarah-neuber.de/women/womens-tops/womens-tees-tanks-sweatshirts/women-top-1

    Is there a limit to how many I can create?

    Only the limits of your imagination :)

    How do I add them?

    Adding Regular attributes: To activate you must use the custom field with the nameadd_attributes and with the value: 1

    Then simply add your attributes using the following format: item_attr_yourAttribute (size/colour etc) Choose a ONE WORD name for the type of attribute you need.

    Note the value: each option MUST be divided by a | NO EMPTY SPACES!

    Adding Price affecting attributes: To activate you must use the custom field with the nameadd_attributes and with the value: 2

    Then as above add your attributes using the following format: item_attr_yourAttribute (size/colour etc) Choose a ONE WORD name for the type of attribute you need.

    Note the difference in the way the value is entered: each option MUST be divided by a | then a followed by the price amount the option will add to the basic price NO EMPTY SPACES!If one of your options does not add a price whereas other options do you still have to add a price only as 0.00

    Please remember that you cannot mix regular attributes with price affecting ones in the same product post!Following are 2 screenshots; the first with Regular attributes and the second with Price affecting attributes for your reference.

  • The Furniture Store WordPress Theme

    What about when a product is on sale?

  • The Furniture Store WordPress Theme

    When a product is on Sale then you'll add a new custom field: new_price with the sales price as it's value in the 0.00 format. Again no currency symbols please.Keep the old price don't delete!

    You may like to create an additional Sales or Clearance category (or both) for sale or clearance products. Please create these last!

    In case you are using the weight shipping calculation method (see Theme Options) you'll need to add one more custom field item _weight and the value in gramms!! (eg.300)

    If you are using the theme to sell digital products; these products need only one extra custom field apart the basic ones (ID_item, image_thumb, price).

    This is the item_file custom field with the value the file name that your customers will download after purchase.

    The file name you use should not contain any spaces!! So, something like this: some download.zip is wrong. It should be saved as some_download.zip

    The moment a product has this custom field it is identified as a digital/downloadable product.For more details on how to store your digital files please see digital_products.pdf

    I have created an extra pdf: product_customFields.pdf for quick reference to all the custom fields needed.

    I see an item_remarks custom field there in the previous screenshot. What's that about?

    Right, if you go to your theme options eCommerce >Theme Options for multible product pages and scroll all the way down to the end you'll see the option to display a teaser.

    Checking this option will only affect products on multible product pages like category pages and you'll have something like the screenshot to the right

    As you can see, the Product's title now appears, it's price and a remark.

    You may on occation like to have a remark appear on some products eg when these are on Sale or the products are New.

    This is how you may use the optional item_remarks custom field

  • The Furniture Store WordPress Theme

    Product PersonalizationHow does this work?If you have products that customers can personalize before adding them to their shopping cart

    then you will possibly like to have textareas and / or text input fields appear in the product single page.

    For this to work you need to use the following custom fields:

    item_pers_single (for a single line of text = input type text)item_pers_multi (for multiple lines of text = textarea).

    For the value enter the label text you'd like to have appear next to the field.

    Ok this is great, but I need several text inputs and also want to mix and match textareas with them. Can I do that?

    Yes you can!If you need several text inputs then each unique like so: item_pers_single_1, item_pers_single_2, item_pers_single_3 etc.

    Do the same if using more than one textareas like so: item_pers_multi_1, item_pers_multi_2, item_pers_multi_3 etc.

    You can mix and match as many as you want :)

    Pages:The following pages (or their equivalents as created by you) will need to use the following custom templates:

    Customer Service and it's subpages 'Customer Service'Search 'My Search'Login 'Account Login'Register 'Account Register'Customer Area/ My Account 'Account Customer Area'Recover Password 'Recover Password'

    They need to be 1st level pages so do not set them as subpages!

  • The Furniture Store WordPress ThemeCustomer Service

    If the screenshot above is not legible please open the one I provided in the Documentation folderhere: Documentation > help > images

    The Customer Service custom template is designed to pull the 2nd and 3rd level subpages of your Customer Service page and display them as you see in the image above. All you have to do is create your subpages (2nd and 3rd level) and fill in their content.

    The first level page (Customer Service) also has it's own widget ready area below the main content as you see on the demo here: http://thefurniturestore.sarah-neuber.de/customer-service

    Direct child pages (2nd level) then appear as you see here: http://thefurniturestore.sarah-neuber.de/customer-service/using-the-website

    P.S If you only have 2nd level subpages then your customer service page will also appear as the above link shows. In other words you will not get the previous screenshot layout.

    As you can see I took care to make sure users have easy access to other content in the current section so related pages are displayed in the sidebar. Useful for orientation purposes and good for usability.

    Customer AreaYour customers have the opportunity create an account that enables them to create and save a Wishlist, save their information for a faster checkout etc. This area is new to our ecommerce system and not fully completed with all the featues we had in mind for it. One reason is, we did not want to delay the release any further and also wanted to have your feedback as to what you expect from a membership area.

    We hope you may communicate your thoughts with us on this :)

  • The Furniture Store WordPress Theme

    Adding a Blog to your Shop All you need to do is create a Blog category, you may also create subcategories under it for better organization. Make sure you look through and set your theme settings accordingly for the Blog to appear as it should.

    A word on Tagging. Since WordPress Tags are not (at the point of creating this theme) hierarchical you can only use them either for your Shop Product Posts or your Blog Posts not both! Please make sure you check your theme options for this.

    A word on Search. Due to styling issues I had to decide between searching either Products or Blog Posts. As the theme is meant to be a Shop I decided for the Product Posts. This means you need to exclude the Blog Category and all Blog SubCategories from being searched and there's a theme option where you can set this.Also I am working on a solution to allow searching through the custom fields so that customers may enter a product Item ID or a product price and get results. Stay tuned!

    A word on Comments. I have created a custom Avatar for people that do not have one so you may like to adjust the image to match your custom colour scheme. Simply create your image and save it as noAvatar.jpg inside the activated child theme's image folder. This way it will overwrite the one that came with the theme.

    A Note on SEO Optimization

    The theme is SEO Optimized so that plugins such as the All in One SEO Pack are really not needed.

    I have used the excellent The Ultimate Guide to WordPress Theme Search Engine Optiomization article series by Nathan Rice (which I highly recommend you to read through) as the basis for optimizing the following:

    SEO Optimized Indexing to avoid Duplicate Content SEO Optimized:

    Header Titles Heading Tags (proper use of H1, H2, etc) Meta Descriptions Meta Keywords

    What you must pay attention to

    1. Fill in the appropriate Theme Settings dealing with SEO Optimization

    2. On category pages and other multiple product post pages such as custom taxonomy pagesthe Meta Description is taken from the descriptionyou can enter when editing a particular term whether this is a category, tag or custom taxonomy. By entering some appropriate text in the field shown on the right you have more control over what the search engine results page displays as the description on these pages.

  • The Furniture Store WordPress Theme

    Only remember that what you enter there can also optionaly appear for your visitors on the actual category, tag and custom taxonomy pages! (See Theme Options)

    That's fine but what about on my Home (Front page) and other pages?

    Ok so if we are on the homepage, then the Meta Description is put together for you from the blogs tagline. Found under Settings > General in your admin backend.

    How about on my single product pages? If on a single product post page or static page, then the Meta Description is taken from what you enter in the Excerpt field (see image below)

    So if you want to exercise even more control over what gets displayed by the Search engines for content, then you need to be filling this section out. If its blank, your post description will just be the first 55 words in your post.

    This concludes the Adding Content part of the help file.

    For setting up the shop please see shop_settings.pdf

    For instructions on translating or on correcting/adjusting the english words and expressions in the theme and emails send by the shop see translations.pdf

    Check out the product_customFields.pdf for a quick overview of all the custom fields you will need when setting up your products.

    NWS_custom_widgets.pdf goes through each of the 18 custom widgets so look into that if you need help on using them and plugins_to_use.pdf takes you through the recomended plugins for the theme

    If you sell digital goods please review the information in digital_products.pdf

    Please make sure your review the intro_and_support.pdf before you request any support!

    And finally for error troubleshooting please see the common_errors_troubleshooting.pdf