This version includes extensive rebuilding of the WooCommerce integration.
The latest version of our framework includes the Mosaic Image gallery, allowing text content to show on-hover over images. Individual images can be added using the single click button in the WordPress editor.
Some additional minor template adjustment settings have been added to the Seja Template settings section, along with some improvements to the site rendering.
This update brings the main navigation menu up to date. While the original menu worked quite well, it was six years old and lacked some of the CSS3 goodness, such as transitions.
We’ve also made some significant changes to the file structure, cleaned up some of the form elements, improved the custom title and added additional content to the Tips and Help pages.
A new sub-page in the Theme Settings has been added. While this is currently just a blank page, it’s purpose is to provide a home for custom template elements. We’re currently working on a couple of interesting client projects that will require some interesting customisations, which of course will be included in future versions.
Framework version 2.8 includes some additional SEO options and improved integration with WooCommerce.
The bullet-points are now using Font Awesome to render and can be colour configured in the Theme Settings section. We’ve also converted the WordPress and Seja Design logos in the footer to SVG images, which also allows for better colour control.
The Seja Framework supports accordion pages. These pages are great for displaying a large amount of content where sections can be hidden.
A great example of where this is useful is a Frequently Asked Questions list, where readers only want to see the content that is relevant to them.
- Demonstrating the Accordion
This tutorial also demonstrates the working accordion. It is not complicated to do but it is very important that the shortcodes are implemented correctly or your site structure will break.
- Usage - The Wrap-around
The accordion requires the use of wrap-around shortcode tags in a minimum of two blocks. For each additional accordion section, an extra shortcode block is required.
It is important that the first and last blocks are marked as such to allow the correct formatting. We’ll demonstrate using this page’s markup as an example.
What is ‘wrap-around’ shortcode?
Most shortcode included in the framework is basic. You include the shortcode call and perhaps a few variables and it displays in the page as required. Other shortcode is a little more complex, requiring the shortcode to wrap around the content that it is displaying. An example of this is as follows
[some_shortcode] The content is included after the shortcode, which is then wrapped using a closing tag (similar to a html closing tag). [/some_shortcode]
It is the content between the tags that is hidden from view until the top section is clicked.
- Usage - The Shortcode
At bare-minimum you will need two accordion sections that will need to be marked as ‘first’ and ‘last’. For space and ease of reading, the wrapped content has been removed in all examples
[accordion title="Demonstrating the Accordion" class="first"] content [/accordion] [accordion title="Not Working?" class="last"] content [/accordion]
title: The text that sits in the top section
class: default is ‘block’ however it’s important to use ‘first’ for the first block and ‘last’ for the final block. The back-end code that powers this feature requires these two classes to correctly render the html.
Each additional accordion section that sits between these two tags do not require any additional code, and you can generate as many accordion blocks as you require. The accordion shortcode on this page looks like this
[accordion title=\"Demonstrating the Accordion\" class=\"first\"] content [/accordion] [accordion title="Usage - The Wrap-around"] content [/accordion] [accordion title="Usage - The Shortcode"] content [/accordion] [accordion title="Understanding the HTML"] content [/accordion] [accordion title="Not Working?" class="last"] content [/accordion]
An optional ‘titleclass‘ exists if you require custom formatting. This is added to the <dt> tag.
[accordion title="Demonstrating the Accordion" class="first"] content [/accordion] [accordion title="Usage - The Wrap-around"] content [/accordion] [accordion title="Usage - The Shortcode"] content [/accordion] [accordion title="Understanding the HTML"] content [/accordion] [accordion title="Not Working?" class="last" titleclass="example-class"] content [/accordion]
- Understanding the HTML
While it it not necessary for you to understand the HTML, we have included the markup for your reference. Based on the shortcode from the previous section the outputted HTML would appear as follows;
<dl class="accordion" id="accordion"> <dt><span>Demonstrating the Accordion</span></dt> <dd class="first">Content</dd> <dt><span>Usage - The Wrap-around</span></dt> <dd class="block">Content</dd> <dt><span>Usage - The Shortcode</span></dt> <dd class="block">Content</dd> <dt><span>Understanding the HTML</span></dt> <dd class="block">Content</dd> <dt class="example-class"><span>Not Working?</span></dt> <dd class="last">Content</dd> </dl>
The accordion feature uses jQuery to change the state of the object on the page.
- Not Working?
Make sure you have correctly implemented the shortcode and enabled the accordion in Seja Template > Theme Settings > Theme Content
Our base framework is now at version 2.7 and will be used for all sites created after 26 November 2015.
Improvements include –
- Better organised ‘Formats’ drop-down in editor
- Font-Awesome for a richer user experience
- WYSIWYG editors for the Top Content and Sidebar text
- Visual improvements to the editor
Backend work includes –
- Improved code structure and separation
- New bootstrap CSS and individual theme styles
- Bug fixes
Read First > Creating a simple product
Simple Products are the easiest way to add items to your WooCommerce site, but if you have products that come in different colours or sizes it would become overwhelming to create individual pages for each and this is where variations come in.
A variable product is similar to the simple product that we demonstrated in the previous article but allows you to add in the variations.
While variations seem complicated at first they are essentially just a duplication of the price, product image and SKU (if required).
Start by changing the Product Type from Simple product to Variable product
Most options are hidden when you first open them. Hovering the mouse over the title area of the block you wish to edit will reveal an arrow and clicking anywhere within a title block will extend the hidden information
You may have multiple sizes or colours for your product and each one of these is a variation, however before you can start adding in the different options you first need to establish your products attributes. There is no limit to the number of attributes you can have however too many options will become confusing for your customers.
In the example we’re using there will just be a single Colour attribute.
To create a new attribute click on the blue “Add” button and give it a name. Once that is done you need to create the various options which are separated with a pipe ( Shift + backslash | )
Once we have created our attributes we need to set our pricing, custom images and SKU’s
If your variations have a common setting, such as price you can use the “Choose a field to bulk edit…” option at the start of the variations section.
To get variations working correctly it’s important to add all the elements
- Select the attribute variation from the dropdown menu (#611- Lavender) Leaving this blank will cause image rotation to fail
- Click on the Image Block to choose a variation image. This will allow the photo to change as your customers choose the product variation
- Add an SKU (optional). It is important that each SKU is different or WooCommerce will remove them when you publish or update the product.
- Set your Regular Price. You can also set a Sale price if the item is on special.
Repeat for each option.
Coming Soon > Stock Control
While WordPress is a very user-friendly platform, any shopping cart system adds a degree of complexity. This article is designed to cover the basics of adding simple products to WooCommerce.
A ‘Simple Product’ is an individual item with no variations, it is the entry-level product type within the WooCommerce plugin.
When you enter the product editor you will see it is essentially the same as the standard WordPress editor, with a few additional items. All are generally self explanatory, however the positioning of the descriptions are slightly different as they do not follow a top-to-bottom approach that normally happens in a WordPress post, as the following images demonstrate…
Appears at the top of the page and is also the text on the Product Category page.
SEO – This is also part of the pages <title> tag
Appears to the left of the Product Title and is also the display image for the product on the Product Category page.
Appears below the Product Title and also on the Product Category page
This is the main text that appears at the top of the page by the price, however in the editor it is below the price field.
The product or part number. This must be a unique number if it is included.
Sets the Product Category that the product is included in. Multiple categories can be selected and new categories can be created within the editor.
Product Categories are managed within the Dashboard via Products > Categories
While this appears at the top of the page within the editor, this is not the text that appears with the price but the content that appears within the Description tab.
Next Article > Variable products
The amount of work needed to build even a basic website theme in WordPress is quite large, but as most sites require similar things they all start in much the same way.
A framework is essentially all the basics of the theme prior to the customisation. It allows the WordPress developer to output a custom site a lot faster and for less cost.
We’re adding articles soon