Lili Blog Plus

WordPress Theme Documentation


Basic introduction about Lili Blog Theme setup.

Theme Installation

From WordPress Dashboard

  1. Log in to the WordPress Administration Panels.
  2. Go to the Appearance > Themes
  3. Click Add New
  4. Upload the Zip file of Lili Blog Plus
  5. After Installing the theme Click Activate button

FTP Installation (alternate method)

  1. Use your FTP software to browse to wp-content/themes folder.
  2. Extract lili-blog-plus.zip and upload the folder.
  3. Once it’s uploaded, go to your WordPress Admin, browse to Appearance > Themes
  4. Click the Activate button.

Demo Import

After theme activation, For well-functioning of our theme, it recommends certain plugin to install. Click on Begin installing plugins, which will install all the necessary plugin automatically.

After installation of all the recommended plugins, Go to Appearance > Import Demo Data.

  1. Choose the demo you want to import.
  2. Click on import
  3. It may took few moments to complete the import process.

Setup Homepage and Blog page

After install demo content, you'll see a page Homepage. This page will be used as the homepage of the website. To set it as homepage, please go to Settings  >  Reading, under Front page displays, please chose A static page (select below) and select Homepage for Front page and Blog page for Posts page.

Adding Pages / Posts

Adding a new page is the same way as default WordPress installations, however, there are extra options that might need explaining. Usually each page have content and featured image. You can enable Excerpt Field too.

  1. Go to Admin Panel
  2. Go to Pages > Add New
  3. Give the title of the Page
  4. Write the content of the Page
  5. Scroll to down and see the right corner, you will find the Set Featured Image section
  6. Click Publish

This theme can fully customize from the Customize section. To customize theme, Go to Appearance > Customize. You will find the various options related to theme. You can add as many pages as you want.

Adding Content

Create or Edit a Menu

This theme supports Custom Menu. You can set it through the following steps.

  1. Go to Appearance > Menus
  2. Give your menu a name and build it up using little widgets on the left.
  3. You can add Pages, Posts, Custom Links and Categories
  4. On the right, feel free to drag and drop menu items to organize them
  5. You can order your menu position with drag and drop option as well.
  6. Now simply select the Display Location to Primary / Footer for your newly created menus using a widget on the left. Afterwards, click Save.

Categories

  1. Go to Administration Panels
  2. Go to Posts > Categories
  3. Give the Title of the category
  4. Click on Save
  5. The added category will appear on the Add Post Page.

Setup Widget Areas

Lili Blog theme has 3 widget areas (sidebars) by default:

Set Up Home Page

If you want to create Home Page similar to demo but without importing demo content, you can follow the following procedure.

1. Install Theme Lili Blog
  • Go to Admin Panel > Appearance > Themes > Add New and search theme Lili Blog
  • Click on Install and then Activate
2. Create Page for Home
  • Go to Admin panel > Pages > Add New
  • Give the title of the page (Example: Home Page)
  • In Page Attributes panel in right part, select Home as page template.
  • Click on Publish to publish the page.
3. Create Blog Page
  • Follow the same above page creation method.
  • In Page Attributes panel in right part, select Default template as page template.
  • Click on Publish to publish the page.
4. Set Homepage and Blog page

Please set home page and blog page with following procedure.

  • Go to Admin panel > Settings > Reading
  • Click on “A static page (select below)”
  • Set Front page: (Home Page recently created above)
  • Posts page:(Blog you recently created)

Customize

When you go to Admin Panel > Appearance > Customize , there you find various options available. Just try those options one by one you will able to understand how the theme works and can create any kinds of sites.

Site Identity

  • Go to Appearance > Customize > Site Identity
  • You will get the options to manage Site title, Tagline, and Logo
  • Use the available options to customize Logo, Site title, and Tagline.
  • If the preview is fine Click on Publish to save the changes.

Theme Options

When you go to Admin Panel > Appearance > Customize > Theme Options , there you find various options available. Check all the available options to manage your website as per your requirements.

  1. Layout
    • Go to Appearance > Customize > Theme Optons > Layout
    • You will get the options to change the Layout , Color, Skin of your site.
    • Use the available options to change Full width layout, Boxed layout, Dark Skin mode of your website.
    • If the preview is fine Click on Publish to save the changes.
  2. Header
    • Go to Appearance > Customize > Theme Optons > Header
    • You will get the options to change the Header layout, Enable /Disable ( Top Header).
    • If the preview is fine Click on Publish to save the changes.
  3. Menu
    • Go to Appearance > Customize > Theme Optons > Menu
    • You will get the options to Enable / Disable Sticky Menu, Search Icons and Off Canvas Menu.
    • If the preview is fine Click on Publish to save the changes.
  4. Slider
    • Go to Appearance > Customize > Theme Optons > Menu
    • You will get the option to Enable / Disable Banner Slider.
    • Choose preferred Banner Slider and check the settings for banner slider.
    • If the preview is fine Click on Publish to save the changes.
  5. Promo
    • Go to Appearance > Customize > Theme Optons > Promo
    • You will get the option to Enable / Disable Promo Section.
    • Choose preferred Promo Layout.
    • If the preview is fine Click on Publish to save the changes.
  6. Blog Page
    • Go to Appearance > Customize > Theme Optons > Blog Page
    • You will get the options for Sidebar Position, Blog layout, Image layout, Pagination Type and more.
    • Use the available options and check the changes.
    • If the preview is fine Click on Publish to save the changes.
  7. Single Page
    • Go to Appearance > Customize > Theme Optons > Single Page
    • You will get the options to Enable / Disable Feature Image, Comments, Related Post and more.
    • Use the available options and check the changes.
    • If the preview is fine Click on Publish to save the changes.
  8. Sidebar
    • Go to Appearance > Customize > Theme Optons > Sidebar
    • You will get the options to change the Sidebar Layout.
    • Use the available options and check the changes.
    • If the preview is fine Click on Publish to save the changes.
  9. Footer
    • Go to Appearance > Customize > Theme Optons > Footer
    • Enter shortcode of Instagram, Neweletter Text, Mailchimp Shortcode, Copyright Text.
    • If the preview is fine Click on Publish to save the changes.

Font Options

From Appearance > Customize > Font Options.

  • With this setting you can customize the typography of your website.
  • You can change the Font Family, Line-height of Heading and Body font.

Colors

From Appearance > Customize > Colors.

  • Change the Typography and Background Colors of different section of the website and per your choice.
  • Use the available options and check the changes.
  • If the preview is fine Click on Publish to save the changes.

Header Image

From Appearance > Customize > Header Image, you can change header background image in header seaction of your site.

Background Image

From Appearance > Customize > Background Image, you can change background image in body seaction of your site.

Menus

Menu options lets you choose and various pages in the menu located at different sections. It has the following options:

  • Primary Menu
    • Go to Appearance > Customize > Menus > Primary Menu
    • You can Create / Update Title and Locations for the main menu in header section.
    • Click on Save & Publish to save the changes.
  • Top Menu
    • Go to Appearance > Customize > Menus > Top Menu
    • You can update Title and Locations for the top part of the header.
    • Click on Save & Publish to save the changes.
  • Social Links
    • Go to Appearance > Customize > Menus > Social Links
    • You can update Title and Locations for the social menu.
    • Click on Save & Publish to save the changes.

Widget

Widgets let you add and update some extra feature on your site like pages, text, images etc. Go to Appearance > Customize > Widget , It includes the followings:

  • Sidebar
    • Go to Appearance > Customize > Widgets > Sidebar.
    • You can update widgets for sidebar.
    • Click on Publish to save the changes.
  • Left sidebar
    • Go to Appearance > Customize > Widgets > Left sidebar.
    • You can update widgets in the left sidebar.
    • Click on Publish to save the changes.
  • Footer One
    • Go to Appearance > Customize > Widgets > Footer One.
    • You can update widgets in the first column of the footer.
    • Click on Publish to save the changes.
  • Footer Two
    • Go to Appearance > Customize > Widgets > Footer Two.
    • You can update widgets in the second column of the footer.
    • Click on Publish to save the changes.
  • Footer Three
    • Go to Appearance > Customize > Widgets > Footer Three.
    • You can update widgets in the third column of the footer.
    • Click on Publish to save the changes.
  • Footer Four
    • Go to Appearance > Customize > Widgets > Footer Four.
    • You can update widgets in the forth column of the footer.
    • Click on Publish to save the changes.
  • Footer Four
    • Go to Appearance > Customize > Widgets > Offcanvas.
    • You can update widgets off canvas sidebar.
    • Click on Publish to save the changes.

Home Settings

Please set home page and blog page with following procedure.

  • Go to Admin panel > Settings > Reading
  • Click on “A static page (select below)”
  • Set Front page: (Home Page recently created above)
  • Posts page:(Blog you recently created)

Additional CSS

Go to Appearance > Customize > Additional CSS. Additional CSS lets you update the outlook of the site by adding more CSS to the theme.