Skip to content

eStar Documentation

Thank you for using eStar theme for your website. We hope you like it! In this documentation, we will show you how to install and setup the basic demo for your website. This takes you only 5 minutes to have the website ready!

#Installation

Installing eStar is straight-forward and is the same as all normal WordPress theme. We have written a very detailed guide on how to download and install a WordPress theme, please follow the instruction in that article.

#Recommended Plugins

After installing the theme, you'll see a notification box in your admin asking to install some plugins. These plugins are optional and are recommended by the theme to add more features.

eStar recommends the following plugins:

  • eRocket: a custom plugin written by us to add custom widgets and social sharing buttons for posts.
  • Meta Box: a custom plugin written by us to add options for pages and posts such as layout or header.

You can ignore these plugins if you want, but we highly recommend them to make the customization easier. These plugins are well-coded, work perfectly with the theme and don't slow down your website.

#Demo Content

In case you want to quickly start with the theme, you can import the demo content.

First, please download the demo content, unzip it. Then go to Tools → Import to start importing the content.

#Setup

#Header

Custom Logo:

You can add a custom logo by going to Customize → Header and uploading your own logo image. There is an option for you to hide the site title and tagline if you want.

Navigation:

The main navigation appears at the top right of every page of your website. On tablet and mobile devices, it will be hidden behind a toggle button. To set it up, simply create a new menu via Customize → Menus and assign it to the Header location.

Search Button:

In Customizer → Header, there's an option to show the search button in the header. You can use this option to toggle the search button if needed.

Cart Icon:

The cart icon is automatically added to the header if you install WooCommerce on the website. It's a must-have element so there is no options to hide it.

Sticky Header:

By default, the header is sticky, which means it stays on the top of the screen when you scroll down. If you don't want that, you can disable it in Customize → Header.

#Homepage

Creating a Static Homepage

When you first activate eStar, your homepage will display posts in a traditional blog format. To set up your homepage, follow these steps:

  1. Create a page. Make sure to set the page template to Wide.
  2. Go to Customize → Homepage Settings and set Your homepage displays to A static page.
  3. Select the page you created in step one as the Homepage, and, if you plan to have a blog as well, choose another page as the Posts page to display your blog posts.

Homepage Content

The homepage in the demo is built with Gutenberg. eStar is optimized for Gutenberg and you can use all blocks to build your content easily and quickly.

These are the blocks used on the homepage:

  • Cover block: for the hero area. Remember to set the cover blog aligned full.
  • Media text block: for the features with images area
  • Paragraph block
  • Columns block: for the features grid, testimonials and clients area
  • Gallery block
  • Recent posts block

We recommend importing our demo content to have these blocks setup as the demo. Then you can modifying them to suit your needs. You can also try and play with Gutenberg blocks yourself.

#Footer

Footer Widgets

The theme has a widget area in the footer. Go to Customize → Widgets and add your widgets to the Footer sidebar.

In the demo, we use the following widgets:

  • Contact info: from eRocket plugin
  • Custom menu
  • Gallery
  • Recent posts: from eRocket plugin

Footer Copyright Text

To change the footer copyright text, please go to Customize → Footer and enter your custom text.

Go To Top Button

eStar has a Go to top button. If you don't want it, you can disable it in Customize → Footer.

#Layout

eStar comes with several options for you to customize the layout for archive pages, single posts and single pages.

#Archive

Please go to Customize → Archive and you'll see the following options:

  • Layout: the sidebar position. You can display sidebar on the left, right or don't show it at all.
  • Content Layout: how to display posts on your archive pages. These are the options:
    • List (horizontal): posts are displayed as a list with image on the left, text on the right
    • List (vertical): posts are displayed as a list with image on the top, text on the bottom
    • Grid: posts are displayed in a grid (like the demo)
    • Grid (card): posts are displayed in a grid but each posts is styled as a card
  • Content Display: whether you want to display full post content (truncated by the more tag) or only post excerpt
  • Excerpt Length and Continue Reading Text are self-explained.

#Posts and Pages

Please go to Customize → Post (or Page) and you'll see the following options:

  • Layout: the sidebar position. You can display sidebar on the left, right or don't show it at all.
  • Thumbnail Position: how and where to show post thumbnail. These are the options:
    • As Post Header Background: display post thumbnail full-width as a background and show post title, post details on the top of it.
    • Before Post Header: display post thumbnail before the post header (like the demo).
    • After Post Header: display post thumbnail after the post header
    • Do Not Display: don't show post thumbnail on single posts
  • Header Alignment: the alignment for the post title and post details text
  • Header Height: if you want to customize the height of the post header when the post thumbnail is displayed as a background, you can enter a number (px) here.

#Fonts

eStar allows you to customize fonts for almost necessary elements such as body text, headings and site title. You can customize font family (the theme supports all Google Fonts), font size, line height and so on.

Please go to Customize → Fonts to select the options for each options.

#Colors

eStar allows you to customize colors in the theme. To make the changes are consistent everywhere, we offer options for some colors only. They'll be outputted on the front end using CSS variables and the changes will be applied site-wide.

#Page Builders

eStar works pretty well with the most popular page builders: Elementor and Beaver Builder (both free and pro versions).

Using these page builders, you're able to customize the layout for pages, including header and footer. eStar makes it easy for you to do that without any extra actions from your side.

#Page Templates

The theme provides 4 page templates for pages and posts:

  • Blank Canvas: which outputs only page/post content. It doesn't output the header and footer. This page template is useful if you want to build a special page for your website.
  • Full Width: which outputs header, footer and the post content. The post content will have 100% width of the screen. This page template is useful if you want to build a landing page from scratch with Gutenberg or page builders.
  • Wide Content: similar to the full width template. The only difference is that the content area will have 100% width of the container, instead of the screen. This page template is useful if you want to create a landing page with Gutenberg or page builders.
  • Narrow Content: similar to the wide content template, but the width of the content area is narrow as normal pages.

All page templates don't output page title and are useful for creating landing pages or special pages for your website.

#Page/Post Settings

If you install the recommended Meta Box plugin, you'll see extra settings for each single post or page:

eStar - single post, page settings

Single post, page settings

The settings here will override the settings that you set for posts or pages in the Customizer → Post or Customizer → Page.

  • Layout: the sidebar position. You can display sidebar on the left, right or don't show it at all.
  • Content Width: you can set the content to has 100% screen width (full width), or 100% container width (wide) or as normal (narrow).
  • Sticky Header: whether to make the header sticky.
  • Thumbnail Position: how and where to show post thumbnail. These are the options:
    • As Post Header Background: display post thumbnail full-width as a background and show post title, post details on the top of it.
    • Before Post Header: display post thumbnail before the post header (like the demo).
    • After Post Header: display post thumbnail after the post header
    • Do Not Display: don't show post thumbnail on single posts
  • Header Alignment: the alignment for the post title and post details text
  • Header Height: if you want to customize the height of the post header when the post thumbnail is displayed as a background, you can enter a number (px) here.
  • Transparent Header: whether to make the header transparent. It's useful if you want to make the header as an overlay of the hero banner.

#Theme Hooks

For developers, who want to customize the theme, we build a lot of hooks in eStar that you can use to output custom content.

Action Description
General
estar_header_before Fires before the header
estar_header_after Fires after the header
estar_footer_before Fires before the footer
estar_footer_after Fires after the footer
estar_sidebar_top Fires at the top of the sidebar
estar_sidebar_bottom Fires at the bottom of the sidebar
Archive Pages
estar_entry_before Fires before each post on the archive page
estar_entry_after Fires after each post on the archive page
Singular Pages
estar_entry_before Fires before the post
estar_entry_header_before Fires before the post header
estar_entry_header_after Fires after the post header
estar_entry_content_before Fires before the post content
estar_entry_content_after Fires after the post content
estar_entry_footer_before Fires before the post footer
estar_entry_footer_after Fires after the post footer
estar_entry_after Fires after the post
estar_comments_before Fires before the comments area
estar_comments_after Fires after the comments area

This is a sample code that you can use to output an ads before post content of all posts:

add_action( 'estar_entry_content_before', function() {
    echo 'YOUR ADS CODE HERE';
} );

You need to add custom code into a functionality plugin, or use the Code Snippets plugin to add custom code into your site, or use a child theme and add the code into the functions.php file.

#Plugin Compatibility

eStar works well with popular plugins for WordPress. Here are the list of plugins that we officially support in the theme:

  • WooCommerce
  • Meta Box
  • Slim SEO
  • The Events Calendar
  • Elementor
  • Beaver Builder
  • Oxygen Builder
  • Jetpack

Although other plugins are not listed, they should work well with the theme. If you notice any incompatibility problem, please let us know.

#Customization

We recommend using a child theme to customize the theme. Here is the guide how to do that.

We've built a child-theme ready to use. Download here

In addition, you can customize the theme CSS by going to Customize → Additional CSS.

We hope you live Memory. If you have any question, please send us a support ticket. Happy blogging!

Table Of Content

Scroll To Top