Setting up your theme

WooCommerce

This theme has the WooCommerce plugin pre-installed for you. If it is deactivated, you can go under Plugins > WooCommerce and activate it. Also go under WooCommerce > Settings and in the Products tab set the image sizes that best fit your shop under the Product Image Sizes section, in case you need different values than the theme sets by default.

1) Creating theme pages

Start by adding the pages you are going to need. Go to Pages > Add New and create the following pages:

  1. Home. This will be your homepage. Assign to it the Homepage Template from the Page attributes panel.
  2. Blog. This will be your posts page.
  3. Contact. (optional) Here you can place your contact form that you’ll create using the Contact Form 7 plugin.
  4. Inspiration Listing. This page displays your inspiration items. Apply the Inspiration listing template from the Page attributes panel and then from the Listing Page Details panel that will appear, select how many columns you want on your layout.
  5. Portfolio Listing. This page will display your portfolio items. Apply the Portfolio listing (Grid) template from the Page attributes panel. Then from the Listing Page Details panel that will appear, select how many columns you want on your layout. The number of columns on the portfolio listing page can be controlled under CSSIgniter Settings > Display Options > Portfolio Columns

(TIP: All page titles serve as examples, you can name your pages according to your needs.)

Once the pages are created, navigate to Settings > Reading. Set the “Home” page to be your static frontpage and the “Blog” page to be your posts page, as demonstrated in the image below:

reading-settings

2) Populating your blog

To add new posts to your blog, go to Posts > Add new. Title your post, enter the content in the editor, upload a featured image by clicking Set featured image on the Featured Image panel and add a category and/or tag to the post from the respective panels. Publish the post.

add-new-post

3) Adding portfolio items

To add a new portfolio item go to Portfolio > Add New. Set a featured image from the panel on the right, fill in the text you have for the portfolio item and move to the Portfolio Settings panel below. If your portfolio item is a video item place the video’s URL in the Video URL box and select whether you want it to play on a lightbox or not. If you don’t have a video and want to use photographs instead, upload them via the Gallery Settings (have a look at the end of this document for more information on gallery creation). Finally you have to fill in Project Information. Click the Add Field button to create a new field, you can enter client name, date of creation, suggested price, etc. Finally add an external URL if available, to demonstrate your product.

corner-portfolio-settings

4) Adding inspiration items

Create inspiration items exactly like portfolio items. Follow the instructions above to help you create an inspiration item.

corner-inspiration-settings

5) Adding products

Add your products by following the instructions given by this detailed guide here.

6) Creating your menu

Go to Appearance > Menus, check the pages you want on your menu and add them. Give your menu a name and save it. Set your menu as Main menu. This can be done either by checking the Main menu box in Menu Settings just below your menu items in Menu Structure or by going to the Manage Locations tab and selecting the menu you just created.

corner-menu

(TIP: for more info on creating and managing menus, please read the WordPress Menu User Guide here)

7) Setting up your homepage

The homepage on Corner consists of two widget areas. The Main Sidebar that appears on static pages as well and the Front Page Widget Area that appears only on the homepage. You can add widgets to these two sidebars, under Appearance > Widgets and built your homepage.
(TIP: the homepage also can display any content added in its text editor. The content will appear above the widget area.)

Duplicating the demo’s layout

The homepage on the demo features a text widget and the Socials Ignited widget in the Main Sidebar, a text widget, a CI Item Slideshow showing 3 portfolio items and a CI Recent Items Grid showing two inspiration items in the Front Page Widget Area.

8) Override Colors

Under CSSIgniter settings > Color Options you will find the Override Colors panel. This will help you apply custom colors to your website.

corner-color-options

9) Custom Widgets

The theme features eight custom widgets. They are displayed below:

corner-widget
All widgets can be accessed from Appearance > Widgets. Below each widget you will find a small description explaining their function.

More info on the main theme’s widgets

CI Item Slideshow

The CI Item Slideshow widget allows you to display a slider. On any widget area you want you can create two types of sliders.

  1. If we setup the widget like this:
    corner-ci-item-slideshow
    will create a slider displaying two portfolio items (the most recent ones).
  2. If we set it up like this:
    corner-ci-item-slideshow-portfolio
    will create a slideshow consisting of three gallery items uploaded in the “Dolor Sit Amet” portfolio item.
CI Recent Items Grid

This widget allows the user to display a chosen number of recent items from any post type available (including pages). It also gives you control over the number of columns on which the items will appear. For example, this configuration:
corner-ci-recent-items-grid
will result in a three column, two row layout, displaying six inspiration items in total.

The CSSIgniter settings panel

Last but not least, under Appearance > CSSIgniter settings, you can find the settings panel. From here you can modify multiple aspects of your theme, including changing your logo, setting a custom background, changing color scheme and applying custom styles via the custom CSS tab. All options feature a description so that you know their provided function.

Additional Information

Creating Galleries

To create a gallery using the gallery management system follow these steps:

  1. On the Gallery Information panel click the Add Images button.
    gallery-settings-add-images
  2. To upload your images, drag & drop them in the Edit Gallery window that will pop-up, or select Add to Gallery in order to select already uploaded images. Once you are done, click the Update Gallery button on the lower right side.
    gallery-settings-update-gallery
  3. Your Gallery Information panel will look like this
    gallery-settings-gallery
  4. You can re-arrange the order of images by drag & drop.
    gallery-settings-rearrange
  5. If you wish to remove an image from the gallery, hover your mouse over it and click the X as shown below.
    gallery-settings-remove
  6. By checking the Randomize order box your gallery images will appear in a random order that will change on every page refresh.
  7. When you are done, publish the gallery item.

If you need to add images after the gallery’s creation just follow the same procedure.

Useful Plugins

  • CSSIgniter Shortcodes You can use this shortcode plugin to create a variety of layouts and elements on your website. Instructions can be found here.
  • Socials Ignited Use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks. A guide can be found here.
  • Contact Form 7 Use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.

Image Sizes

The recommended image sizes for the Corner theme are:

  • Blog Thumbnail: 785px in width, not limited in height.
  • Fullwidth Thumbnail: 945x500px
  • Fixed Thumbnail: 750x560px (used as a thumbnail for portfolio & inspiration items)
  • Shop thumbnail: Images need to be at least 140x105px.
  • Shop Catalog Image: Images need to be at least 750x560px.
  • Single Product Featured Image: Images need to be at least 560px wide with no particular height.