Back to Index

Getting Started Back to Top

A zipped file of the theme looks like this / This is the file that you should upload as theme install pack via the WordPress admin panel or another way.

An archive file that contains additional material of the theme (this can be documentation, pictures, etc.) so looks like this / It doesn’t need to be uploaded. You can unzip it and use the files you find there.

Installation via the WordPress admin panel

To upload through your WP Dashboard, select Appearance and then Themes. Next, select the Install Themes tab at the top of the page and then select the Upload link, right above the search field. Choose your file and select Install Now. Once the theme is fully uploaded and installed, click Activate to activate the WordPress theme.

When uploading your theme with the installer, please ensure you are uploading the theme .zip file, not the entire package you downloaded. In this case, you will be uploading where x.x.x is the version number.

Installation via FTP

Alternatively, you can also install the theme directly to your server with a FTP client (e.g. Filezilla). Just drop the unzipped theme folder into your …/wp-content/themes/ folder.

Now you can see the uploaded theme in your WordPress admin panel under Appearance > Themes > Available Themes. From there you can activate the theme.

Recommended plugins

The theme is compatible with Woocommerce, Portfolio Post Type, Gutenberg, Elementor and Getwid plugins. To use the Bootstrap 4 components with block editor, need activate the Advanced Bootstrap Blocks.

After activate the Woocommerce plugin to create a e-store, you will have additional Customizer options for your store’s page. And enabling the Getwid plugin will make additional block patterns available.

Homepage Setup Back to Top

You can choose what’s displayed on the homepage of your site. It can be posts or a static page. To set a static homepage, you first need to create two Pages. One will become the homepage, and the other will be where your posts are displayed.

Assign a Front Page

First, create a new page on your website, with the WP Dashboard > Pages > Add New link. Give the name the new page Frontpage, for example. Publish your page. In the same way, create a page that will display your blog posts. Give the name the new page Blog, for example. Publish your page.

Next, you will need to set one of the created pages as your site’s Frontpage, and another page as a Blog page, go to WP Dashboard > Settings > Reading.

In addition, here you can set the number of posts to display on the blog page.

Don’t forget to click Save Changes.

Homepage Sections

Once you have set a static page as the Homepage, you can select additional options for the Homepage includes visibility and order of Homepage sections. To set those, go to the Customizer’s Homepage Sections panel.

Head Banner – Homepage header cover settings;
Visibility & Sorting – Homepage sections visibility and order.

For the Header Banner need upload an image of at least 1400 x1000 px.

Header and Sidebar Options Back to Top

The theme offers to choose the location of the sidebar (left or right) or disable it. The theme offers to choose the location of the sidebar (left or right) or disable it. And you can choose how to display the header of a single post or page. To make it navigate to Customizer > Theme Options.

If there are no widgets in the sidebar, the sidebar will not be displayed.

If you choose an Cover header display mode then a size of post thumbnails should be at least 1200×860.

If you selected Cover mode for the Page Header display and upload a Header Image then the Header Image will not be displayed on the front page or blog page.

Posts Settings Back to Top

Posts Page setup

If you followed the previous section then you should already have a page created to display blog posts. If it’s not already done, then create a new page on your website, with the WP Dashboard > Pages > Add New. Give the name the new page Blog, for example. Publish your page.

Next, go to WP Dashboard > Settings > Reading, and select the created page as the Posts page. Here you can set also the number of displayed posts on one page.

Posts customization

The Customizer allows you to customize view of post list when a Posts Page (blog home or archives) is show or when a single post is displaing. To make it go to the panel called Posts Page and/or Single Post.

Page Templates Back to Top

This theme comes with additional page templates: a Wide Page and a Blank Page. To assign one of these templates to a page, select one of them from the drop-down list in the Page Attributes panel of the Document tab when you create or edit a page.

If this panel is not on your Dashboard then you need to enable it in the Screen Options.

Create landing page via Blank Page template

To easily create landing pages, you need to activate the Atomic Blocks plugin. After activated it, an Layouts icon will appear in the top panel of the editor, as shown in the image below.

By click the Layouts button, you can select sections of your page or professional designed layouts of page and then edit their elements as your need.

landing page example on the demo-site

Portfolio Setup Back to Top

If you want to showcase your works, then you need to install a free plugin called Portfolio Post Type. After plugin activated, the Portfolio Settings panel will appear in the Customizer.

To display the portfolio section on the front-page go to the Homepage Sections panel. There, you must first enable the visibility of the portfolio section and its order of among other sections of the front page in the Sorting & Visibility panel. Then you can enter the section title and subtitle in the Portfolio Posts panel and specify the number of portfolio posts on the front-page section.

Of course, you must create portfolio entries for it’s display.

To create a portfolio page, you need to create a Custom Link (Custom Links tab) in the menu with a portfolio slug.

Theme Hooks (Actions & Filters) Back to Top

Defining the page content wrapper class:

/** * Example of bigwigs_set_content_class hooked. * @see custom-functions.php */ function bigwigs_set_wide_content_class( $classes ) { if ( is_page_template( array( 'template-wide.php' ) ) ) { $classes = ''; $classes[] = 'col-md-12'; } return array_unique( $classes ); } add_filter( 'bigwigs_set_content_class', 'bigwigs_set_wide_content_class' );
Code language: PHP (php)

Add your own class to the content container block for a specific page:

function my_custom_wrapper($content_wrapper) { if( is_page('my-page') ){ // specific page slug or ID $content_wrapper = '<div class="container my-page-wrap">'; // where my-page-wrap it is your custom class } return $content_wrapper; } add_filter('bigwigs_content_wrapper_start','my_custom_wrapper');
Code language: PHP (php)

Adding a closing tag to the page/post content container:

function my_custom_wrapper_end($content_wrapper) { if( is_page('my-page') ){ // specific page slug or ID $content_wrapper = '</div>'; } return $content_wrapper; } add_filter('bigwigs_content_wrapper_end','my_custom_wrapper_end');
Code language: PHP (php)

Add the button refer to comment on a page or post when a single post is displayed:

/** * Example use hooks of theme * Add button to comment * @see jumbotron-singular.php */ function bigwigs_add_tocomment_link(){ if( !is_front_page() && is_singular(array('post','page')) ){ if( ! post_password_required() && comments_open() ){ ?> <a href="<?php esc_url( comments_link() ); ?>" class="comment-link btn btn-dark my-2"> <?php echo esc_html( 'Leave Comment', 'bigwigs-pro' ); ?> </a> <?php } } } add_action('bigwigs_jumbotron_container_end','bigwigs_add_tocomment_link');
Code language: JavaScript (javascript)

Adding the back to top button:

/** * Example use hooks of theme * Add scroll-to-top button into footer * @see footer.php */ function bigwigs_add_back_top(){ if( ! wp_is_mobile() ){ echo '<a id="back-to-top" href="#" class="btn btn-dark btn-sm back-to-top" role="button"></a>'; } } add_action('bigwigs_footer','bigwigs_add_back_top',10);
Code language: PHP (php)

Adding a menu item with an icon:

/** * Example of add filter for append an element. * * @see additional-items.php * @see custom-functions.php * bigwigs_add_navbar_items */ function bigwigs_add_new_navbar_item( $items ) { $items .= '<div class="user-btn pl-lg-2 d-inline"><a href="#" class="dashicons dashicons-admin-users"></a></div>'; return $items; } add_filter( 'bigwigs_add_navbar_items', 'bigwigs_add_new_navbar_item' );
Code language: PHP (php)

Continue soon…