Documentation for Loge – Legacy

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

TIP: More info on how to download and install a theme here.

Installing WooCommerce

To enable eCommerce functionality for your website you need to install and activate the WooCommerce plugin by WooThemes. You can download the plugin free of charge from the WordPress Plugin Repository.

Go to Plugins > Add New and search for WooCommerce. Once the results come back, click the Install Now button.

Once the installation is finished, click the Activate button to activate the plugin.

For detailed installation and usage instructions please refer to the plugin’s documentation.

Once you have installed and activated the WooCommerce plugin please install its pages by clicking on the button that WooCommerce provides on its banner. This will likely create a duplicate of some pages along with the pages install by the sample content but its a needed step. You can delete the old pages that came with the sample content or use them instead by going to WooCommerce > Settings > Pages and assign them anew.

Image Sizes

The minimum recommended image sizes for Loge are:

• Post thumbnail: 750x500px
• Entry Item thumbnail (used on widgets): 555x750px
• Item thumbnail :530x350px
• Single Item: 460px and unlimited in height
• Full Width single image: 1140px and unlimited in height
• Full Width image: 1140x600px
• Slider  image: 1920x850px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

• Loge Specific plugin: You will be asked to auto install this plugin when installing the theme. You can find this plugin in  your theme /plugins/ folder.
• WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
• WP Instagram Widget: Use the latest version of this plugin to help you display your Instagram feed in any of the theme’s sidebars.
• MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
• One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

1. Visit ‘Plugins > Add New’,
2. Search for ‘One Click Demo Import’ and install the plugin,
3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

1. Download ‘One Click Demo Import’.
2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Adding a new post

To add new posts to your blog, go to Posts > add new and proceed to:

1. add a title to your post,
2. enter the content in the editor,
3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
4. add a category and/or tag to the post,
5. once finished click the Publish button to publish the post.

Creating a page for your posts

To setup your blog page you can go to Pages > Add New and create a page named Blog. Then navigate to Settings > Reading and set that page as your posts page.

Now you can add that page to your menu to give your visitors easy access to all your posts.

Adding Products

Earlier we saw how we can install WooCommerce. Let’s take a brief look at creating products. Start by going to Products > Add Product.

1. First we need to fill in the product title,
2. next we will add the product’s description,
3. click Set Product Image to add the product’s featured image and Add product gallery images to upload additional photos for the product,
4. add categories and tags to your product to make filtering easier,
5. in the Product Data metabox you will fill all the required product info, such as price, inventory, tax and shipping information and more,
6. fill in a short product description and finally
7. Publish the product.

This is a brief overview of adding products to your site, the product post type is a complex one, if you haven’t worked with it before please consider reading the official documentation on how to add and manage products here.

Setup the shop page

Once you install and activate WooCommerce all the default pages will be created, including the shop listing page. To make sure this was properly configured go to WooCommerce > Settings > Products > Display and check if the Shop page is selected in the Shop Page drop down.

If the drop down is empty, locate the Shop page and select it.  If you can’t find a page named Shop, just go to Pages > Add New create one and then set it as your shop page. Add this page to your menu to give your visitors access to the product listing.

Theme Pages

Let’s start by adding the first few basic pages you are going to need. Go to Pages > Add New and create the following pages:

Frontpage Page

To set up the homepage create a page named Home and set to it the Front page Template from the Page Attributes drop down on the right. To add content to your front page go to Customize > Widgets or Appearance > Widgets and use the theme’s widgets to help you display your content. You will notice that in your Frontpage template page under the WordPress text Editor you have a Frontpage Options section.
.

Hero Section

This the basic section before the contents of your page and you can :

1. Add A Page title.
2. Add a Page subtitle.

Also you can style your Hero with a background image / video or color :

1. Align the Title.
2. Hide the Page title.
3. Add a Background Color or an Overlay color in case you have a background image with the same color of your Hero title or subtitle.
4. Add a background Video.
5. Add a background image and change its position  and screen coverage.

In the Slider Tab  you can also select a MaxSlider Slideshow to appear instead of a hero image or choose not to have a slideshow at all.

Replicate our demo Homepage

First we need to create a new slider from Max Slider >Add New. Then, add three slides selecting your title and subtitle alignment

and select the dots navigation under the Settings section.

MaxSlider is a versatile plugin with many options for you to explore. Have a look at the plugins documentation here first.  Don’t forget to actually select your slider in your Frontpage (Pages > All Pages)  from the drop down menu under the Frontpage Options  Slider tab as mentioned above.

Continuing with the content under the slider, the frontpage is a widget ready area in which you can add any widget you need from Appearance >Customize >Widgets >Frontpage. To recreate our original frontpage you will need to add 6 widgets. These are:

• Theme (Home) – Post Types Items,
• Theme (Home) – Hero Callout,
• Theme (Home) – Latest Post Type,
• Theme (Home) – Post Types Items,
• Theme (Home) – Brands,
• Theme (Home) – Post Types Items,
• Theme (Home) – Hero Callout,

Post Types and Latest Post type widgets will automatically get the content and the featured image from Posts / Custom Post Types.

Theme has 4 footer widget areas also. In Customize > Widgets > Footer – 1st column our online demo has

• text widget

In Customize > Widgets >Footer – 2nd column we have a

• Theme – Buttons

In Customize > Widgets >Footer – 3nd column we have a

• Theme – Contact Module

In Customize > Widgets >Footer – 4nd column we have a

• Theme – Callout Module

Blog

this will be your posts page. Just create and publish a blank default page named “Blog” (or whatever you wish to name it) without adding any content, no further action needed for now. You cannot control the background image from the Layout Section of this page since it is registered by WordPress.

Full Width Page

In this page you can add any content you wish without displaying the sidebar.

Narrow Width Page

In this page you can add any content you wish without displaying the sidebar but the container size is smaller.

Default Template

In this page you can add any content you wish as you would do in a normal page. The default template gives you the option to select a Featured image layout under the Featured Image Section.

Page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

That’s it. You can now start building your page using a page builder of your choice. On the theme’s demo we have used extensively the Elementor page builder plugin.

Customizing Your Theme

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

Header

Header Options are split into three sections.

In the Header style section  you can set the layout style your wish your header to have and make it fullwidth.

Under the Top menu bar you can add some custom text to it like your email or phone number. as well as select whether you need to show or not Search module or your social Icons.

In the Primary menu bar  you can select if you wish to have a sticky menu and change various display settings like the vertical padding of the menu and its text size.

Site Identity

Here you can  change the logo and favicon as well as the title and description. Use the appropriate fields to add your information, show or hide your site title and subtitle and upload your logo and site icon images.

Colors

This tab allows you to customize the colors and background images for the entire site, the header, hero section, sidebars and the footer.

Blog Settings

This tab allows you to customize your blog and post options.

In Post Options you can select which elements you wish your single blog posts to have. This includes showing or hiding the date, the featured image, the author and author box etc. Or even enabling/disabling the Lightbox option for your galleries.

In Archive options you have customize the default archive pages like category, tag and date archive pages.

1. Change the Layout by selecting in how many columns you need your content to appear.
2. Enable Masonry effect in case you have articles with different content and featured image height.
3. Select the article excerpt length.
4. Select a pagination method.

Finally, in the Featured articles section you can add a tag which if your articles have they will  appear on top of you blog listing. Only one article that includes this tag will be displayed. The selected tag will be automatically hidden from tag lists.

Typography

Through this tab you can control the font size of key theme elements, such as headings, body and widgets. If you want to change the default Theme fonts have a look here.

Menus

Here you can create and assign menus to the theme. To learn more about menu creation check out the Codex’s menu user guide here.

Titles

In this tab you can change the titles for various theme pages, like the blog, search and 404.

Social Networks

In this section You can add your Social Network URLs. These icons will be displayed in the Theme-Social Icons Widget automatically.

Footer

Here you can modify the credits text and your Footer Column Layout.

Additional CSS

In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs.

Other

Here you can download your sample content files.

Widgets

Through this tab you can add widgets to the theme’s sidebars. The theme features eight Sidebar Areas in order to provide the best option to display your content.

Static Front Page

Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you.

Woocommerce

In this tab you can change the number of products on shop listing page and control your Woocommerce Settings.

1. You can change the Shop layout.
2. Change the product columns.
3. Change the Products per page.
4. Show by default the product information.

Widgets

We have handcrafted some custom widgets to help you better display your content. You will find them under Appearance > Customize > Widgets or Appearance > Widgets

Theme-Contact

Using this widget you can create a contact box including a title a map and various complementary elements with icons that will help you add more information like telephone etc about your business.

1. Add a title for your Contact widget.
2. Add a map code (iframe).
3. Add a contact title
4. Create new complementary elements.
5. Add an icon code  (from fontawesome.io) and some text along.

Theme-Schedule

This widget allows you to create a small Schedule table with extra contextual information.

1. Add a title for your widget
2. Add some complementary text. You can use HTML tags also if you wish.
3. Add a new day/time widget.
4. Add your day and time information for each item.

Theme(home)-Instagram

This will allow you to display your Instagram Account in your Front Page or Pre-Footer sidebar. The WP Instagram Widget must be installed and activated in order this Widget to appear

1. Add a title for your Instagram Widget.
2. Add your Instagram Account.
3. Add a number of photos you wish to display.
4. Select whether you need your images to open in the current window or open in a new tab.
5. Change the link text.

Theme-Latest Post Type

This widget is built to help you display your latest posts  in any widget area you wish.

1. Add a title.
2. Select the post type you want to get the latest items.
3. Check if you need random posts instead.
4. Add the number of posts.

Theme(home)-Post Type Items

This widget is built to help you display any post you wish  in your Homepage Widget  area.

1. Add a title.
2. Select the post type.
3. Select the output columns.
4. Add the Item you wish to output.
5. Select the Item from the dropdown menu.

Theme(home)-Latest Post Type

This widget is built to help you display your latest posts  in your Homepage Widget  area.

1. Add a title.
2. Add a subtitle.
3. Select the post type you want to get the latest items.
4. Check if you need random posts instead.
5. Add the number of posts.
6. Select the output columns.

Theme(home)-Product Category

This widget will help you display a Product Category in your Homepage

1. Add a title.
2. Select a number of products to show.
3. Select a product category.
4. Change the output columns.
5. Order by a filter.
6. Change the Order.

Shortcodes

Shortcodes in WordPress are small  code like functions that allow you to do various things with little effort.

The main reason to use them is to execute code inside WordPress posts, pages, and widgets without writing any code directly. They can be used in Elementor ‘s (or any other page builder) shortcode module.

Loge theme has shortcodes you can use with various attributes:

[cart-info]

Will display your cart information if you have Woocommerce Installed

[latest-post-type post_type="post" random="false" count="3" columns="3"]

• Post type: “post” by default. Can be one of: post, pages.
• Random: false by default. Set to “true” to enable.
• Count: 3 by default. Use only integers larger than 0.
• Columns: 3 by default. Use only integers larger than 0.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub