If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:
- PHP version 7.4 or greater.
- MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
- HTTPS support.
This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin
Then upload it through your Dashboard → Plugins → Add new and Activate it.
It really doesn’t matter if you install the theme or the plugin first. Just make sure to install it in order to get the whole functionality.
GutenBee is a collection of elegant WordPress blocks enhancing your editing experience in the block editor and vastly extending the potential of the new editor experience.
If you want to replicate our demo website you need to install it. Simply visit Plugins → Add new and search for “GutenBee”. Click on Install Now and then Activate it.
In order to have Breadcrumb functionality you will need to use any of these plugins:
- Breadcrumb NavXT. This plugin will provide breadcrumb trails for your WordPress powered blog or website.
- Yoast SEO. Check this guide to enable them.
Installing the theme is a very simple process. Go to your WordPress dashboard → Appearance → Themes → Add new and upload the zip file. Once uploaded just click on the Activate button. That’s it! You can now start creating pages. You can check our guide here for a more detailed guide.
How to import the sample content
If you like what you see in our demo website you can simply import the sample content. This means that an exact replica of our demo website will be imported in your WordPress installation. Now all you have to do is simply replace the content of these pages with your content.
Here’s how to do it:
- In your WordPress dashboard visit Appearance → Theme Options → Sample Content.
- Click Install and then Activate for each of the required plugins.
- Click the Get Started button and in the next screen the Import Demo Data button.
Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:
- Main post thumbnail: 998x665px
- Item: 670x446px
- Large Item: 1340x894px
- Article Media: 510x510px
- Mini-cart items: 160x160px
Setting up the global sections of your website
It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the header and the footer.
As you can see in our demo website all pages have five main components.
1. Top Bar
3. Custom HTML ad section
4. Main Menu
5. News Ticker
In your WordPress dashboard click on Appearance → Customize → Top Bar. Here you have 3 content areas available for simple text or shortcodes. Please refer to the shortcodes section below for information regarding the shortcodes available.
Public Opinion’s top bar has the left content area filled with some custom HTML, while the right content area has a set of shortcodes. Middle one stays blank in our demo, but you can use it as you wish.
In Left content area we have:
[ignition-date] [ignition-current-weather] [ignition-custom-menu name="Top Menu"]
shortcodes while on the Right content area we have:
[ignition-custom-menu name="Social Menu"][ignition-site-search]
In the same location you can edit your Top bar colors.
The recommended maximum width of your logo is 265px (or double if you want a retina ready logo) while you can use any height you want. To upload your logo visit the Customizer through your WordPress dashboard → Appearance → Customize → Site Identity. As you can see you can upload 2 logos. In this case we need to use the Alternative Logo upload field because we are currently using a Transparent header as set in the Customizer → Header → Layout → Header Type option.
Custom HTML ad section
Next to the logo, we have reserved a content area for some custom HTML or shortcode. This can be mainly used as a custom ad section. To recreate this navigate to Appearance→Customize→Header→Content, and set your HTML or shortcode you wish.
In your WordPress dashboard click on Appearance → Menus. In the Menu structure section enter a Menu name (It can be anything you like) and click on the Create Menu button. From the Add menu items section on the left select the pages that you want to add in your menu and click on the Add to Menu button. Now all you have to do is assign this menu to a Display location. In the Menu Settings section click on the Main Menu checkbox. Your navigation menu should be now visible on your website.
Custom button in the menu
You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance→Menus for the item you want. First enable this section from Screen Options.
Before you start working with your menus check this article.
Public Opinion has a versatile news ticker you can enable/disable and configure from Appearance→Customize→Utilities→News Ticker
Make sure you have set the ticker active, by checking the Enable the news ticker box. Then select the component title (1), the post category that will serve as the source of the content(2) and a limit for your items(3). Leaving the Source category blank will result in fetching latest articles from all categories.
General Site Options
You can change your general site options globally from Appearance→Customize→Site Options. Under Layout section you can control your Site and blog layout, as well as the main width of your content and the ratio between sidebar and content. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select from a full list of Google Fonts for each element in mobile mobile/desktop views, or you can just disable Google Fonts altogether.
The footer area is a standard 4-column widgetized area that can be populated with widgets through Appearance → Widgets. You can also remove the credits at the very bottom of this area by visiting Appearance → Customize → Footer → Content. You can also adjust the colors by setting a background color & image and also modify the border, title and text colors.
Under the Content (Customize→Footer) area you can add your copyright information and use any of the shortcodes included in the ignition framework.
Setting Featured Articles
Here you can control the featured post tags that will mark which post will be featured in each category. This tag will not show in the tag list when a visitor lands on a featured post. This tag by default is called featured but you can actually change it from Appearance→Customize→Featured articles. Add this tag to any post you want to appear as featured.
You can select to disable the default theme Lightbox from Appearance→Utilities→Lightbox
Block editor Dark Mode
When you have a dark background it’s quite hard to read text when editing the block editor. Under Appearance→Utilities→Block Editor you can enable this feature to help you edit your content better.
You can choose to have the weather appear using the weather shortcode anywhere inside your installation. First you will need to setup the weather from Utilities→Weather. You will need to create an API key first here
Featured posts tag
Here you can control the featured post tags that will mark which post will be featured in each category. This tag will not show in the tag list when a visitor lands on a featured post.
Creating a Post
Public Opinion is a News theme, so you will need to create posts with your content. Creating one is quite simple, and Public Opinion provides several tools to extend them with additional functionality. Create a new post from Posts→Add New.
After adding your main Title and Content, you can set some categories and tags to organize your articles. Also quite important is the use of the featured image, so you will need to add them in all your posts.
You can set a special featured tag (or you can name it as you want from Appearance→Customize→Featured Items) that will mark this post to be displayed in the top hero section of your frontpage and post categories.
When creating a new post, it is important to set a custom excerpt (1) which will appear in all theme blocks and widgets after the title. If the excerpt is not present the first few lines of your content will appear instead. You can change the length of the excerpt from Customize→Blog→Archives. In each post you can also toggle the appearance of comments (2), if you want to disable them globally you can do it from Settings→Discussion. Under Post Attributes (3) we provide several templates for your blog:
- Default template
- Content / Sidebar
- Sidebar / Content
- Full width
- Full width boxed
- Full width narrow
Finally, under Page settings you can add some extra padding before and after your main content, and hide the featured image in the Single view of the post.
You can create a custom pagination inside your posts. Larger articles can be split in smaller ones. Use the Page break block to split your content as many times you want. Public Opinion will create the pagination for you automatically.
Creating a Posts Category
Categories will help your to organize and group your posts. These and tags are the only way to know which articles are related to each other, either by keywords or subject. Add a new category from Categories→Add New, immediately you can see a set of options like:
Here, you can set your category name (1), slug(2), parent category(3) if any and description (4). Also you can set an accent color (5) which will appear in all theme articles as a background to the article category and news ticker. If a category has featured articles, you can set their appearance (6) and select to hide them from the main listing (7) if you wish.
Create a new page from Pages→Add New. Set the Breadcrumbs not to appear and check the Remove top/bottom content padding from Page Settings. We are using the Default page template under Page attributes, because we need the Page sidebar active.
Setting up the slider/featured content
The landing featured/slider content in the frontpage is a Global section, to recreate it create a new Global Section from Global Section→Add New. Then add a GutenBee post types block with the 1 Left / 4 Right style selected.
Then set Columns to three and posts per page to five. Under the Advanced tab of the block you will need to add these classes is-style-ignition-public-opinion-layout-hero-3
Finally add under Global Settings section a new location and set it to Main Container (before). Then make sure it appears only in your homepage.
Recreating the main content using blocks
The frontpage has multiple GutenBee Post Types blocks with different styles.
First we have a GutenBee Post Type block with the default style selected.
This has post type and a base category set to it with 2 columns and 6 posts per page
Before each one of them we have a Gutenbee Heading Block with a custom background color each time.
Next we have an exact same GutenBee Heading Block and a GutenBee Post Types, but we only one column this time using the Default style again.
Again we have a GutenBee Heading Block and then a Gutenbee container block with two columns. Each column has one GutenBee Post Type with the same category selected. The first block has the Force Media selected and set to have only one item and one column. The second one has the Compact Posts style selected and the same category as the first one with four items. This time to avoid the item duplicated with the first block we have set an Offset value to one. Second block must have
class under the Advanced tab, while the first must have
Next we have a GutenBee Heading Block and a GutenBee container block which has two GutenBee Post Types inside. The both have the same category selected and the Compact Posts style as default. The second one has an offset that will prevent showing the same articles as the first one, since they have the same category selected.
Both these Blocks have this class:
under the Advanced tab.
Creating Global Sections
Global Sections are small layout sections you can attach automatically in any predefined location (hook) you want. We are using this method to show the main featured content area in our demo frontpage, but feel free to use it depending on your needs. You can see a visual map of the available theme hooks by appending ?show_hooks in any URL. Under Condition tab you can also include/exclude the pages you want this section to appear.
Also you can create custom shortcode from a Global Section that you can add inside your post/page or in a widget.
This is you main blog page. You can Create a new page and set it as your blog page under Settings→Reading. You can customize it from Customize→Blog under the Archive section.
[ignition-custom-menu name=”your menu name”]
Create a Custom menu from Appearance→Menus, then use this shortcode to display it in any location you want. Primary used to display Social icons in the top bar.
- Create New Menu instead from Appearance→Customize→Menus.
- To add a social media link to the menu, click + Add Items.
- Next, select the Custom Links menu item type.
- Add the address for one of your social media profiles in the URL field. For example, if the link to your Facebook profile is https://www.facebook.com/cssigniter, you would copy that into the URL field.
- You can also enter a name for the social media profile in the Link Textfield. Once you’re ready, click Add to Menu.
- Repeat the above steps until all the social media profiles you wish to use have been added to the menu.
- Finally, click Publish.
Simple site search field, you can use it under any content area in the Customizer. Using the
will help you search specifically products. This is quite helpful if you have an online Shop.
Supported attributes are:
- format (optional): The date format, by default follows the one set under Settings → General.
Use this shortcode in any Customizer content area to display today’s date.
Supported attributes are:
- id (optional): The id of the location to display the weather from, default is the one set under the Customizer Weather options.
- units (optional): C or F units to display.
This will display the weather inside any content area in Customizer. You will need to setup the API first from Customize→Utilities→Weather. The location ID number can be found by visiting OpenWeatherMap.org and searching for your city. Leave this blank and the default ID from Customize→Utilities→Weather will appear.
This shortcode will display the minicart. Use it under Customize→Top Bar in any content field you wish.
Supported attributes are:
- display (optional): accepted values are flags, text or both
- type (optional): accepted values are dropdown or menu
- untranslated (optional): accepted values are hide or home
We support WPML and Polylang. You can either use their default language switcher or our shortcode one.
If you have an Account page selected this shortcode will generate a link to that page. You will need to have WooCommerce installed and under WooCommerce→Settings→Accounts & Privacy tab the Allow customers to create an account during checkout option checked.
Theme provides several page templates you can select from Page Attributes. Depending on your scenario you can select:
- Default template: This is the main template, you can start building anything using this one
- Content / Sidebar: This page will always have the sidebar on the right (Same as default page template)
- Sidebar / Content: This page will have the content always on the left
- Full width: This will make your page Full width, covering from one side of the screen to another
- Full width boxed: This will have the page Full width but inside the container scope. You can control the scope from Customize→Site Options→Layout options
- Full width narrow: This is the same as Full width boxed, but it will add some padding making the content area a bit narrower
All pages have a generic set of options. These can be changed under the Page Settings section when editing each page.
- Remove top/bottom content padding: This will allow the content to have or not some extra padding from header and footer
- Disable featured image for this Page: You can select to hide the featured image in this single page. Featured image will appear in your listings though
- Show Page Title: Hide or show the normal page title
- Show Page Subtitle: Hide or show the normal page subtitle (if any)
- Show Breadcrumbs: Show or hide breadcrumbs for this page.
All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behaviour
This theme supports WooCommerce, so you can create an eCommerce experience for your visitors. Having WooCommerce installed is not mandatory to use the theme.
The theme provides special widget areas for your Blog posts and archives, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages or posts or products.
If you need help during the initial installation and setup of this theme, feel free to get in touch and we will be right there for you within 24 hours to help
Theme installation service
If time is of essence, we offer a theme installation fee for an one-off low fee of $69. Contact us here