The Extra theme comes with a versatile set of options designed to assist you in creating exceptional magazine-style websites.
The Extra's Theme options are divided in quite a few main tabs:
General
Navigation
Builder
Layout
Ads
SEO
Integration
Support
Each of the main tabs is divided into sub-tabs. Together, they give you all the options you need for your website.
Overview of Extra's Theme Options
To access the Extra's Theme Options page, go to WordPress Dashboard → Extra → Theme Options.
General Tab
The General tab has two sub-tabs:
General
Performance
General sub-tab
Logo: Upload your custom logo image by clicking the Upload Image button.
Favicon: Upload your custom favicon image by clicking the Upload Image button
Global Accent Color: Global Accent Color that is used on all pages of your site.
Fixed Navigation Bar: By default, the navigation bar always stays on top of the screen. We suggest disabling this option if you need to use a logo taller than the default one.
Sidebar Location: Choose the default location of the Sidebar.
WooCommerce Sidebar Location: Choose the default location of the Sidebar on WooCommerce-related pages, such as WooCommerce Single product pages.
Sidebar/Widget Area: Choose which Widget area to be used as the website's main Sidebar.
WooCommerce Sidebar/Widget Area: Choose which Widget area to be used as the main Sidebar on WooCommerce-related pages, such as WooCommerce Single product pages
Social Network Follower Count Refresh: Choose the refresh period for the follower counts widget.
Google API Key: The Maps module uses the Google Maps API and requires a valid Google API Key to function. Before using the map module, please make sure you have added your API key here.
Enqueue Google Maps Script: Disable this option to remove the Google Maps API script from your page. Note: Modules that rely on Google Maps API script, such as Maps and Fullwidth Maps, are still loaded but will only work if you manually add Google Maps API script.
Use Google Fonts: Disable this option to remove the Google Fonts from your Divi Builder Pages.
Google Fonts Subsets: Enable Google Fonts for non-English languages.
Show Facebook Icon: Enable/Disable the Facebook Icon (displayed at the top of the website's header).
Show Twitter Icon: Enable/Disable the X (former Twitter) Icon (displayed at the top of the website's header).
Show Google+ Icon: Enable/Disable the Google+ Icon (displayed at the top of the website's header).
Show Pinterest Icon: Enable/Disable the Icon (displayed at the top of the website's header).
Show Tumblr Icon: Enable/Disable the Tumblr Icon (displayed at the top of the website's header).
Show Stumbleupon Icon: Enable/Disable the Stumbleupon Icon (displayed at the top of the website's header).
Show Instagram Icon: Enable/Disable the Instagram Icon (displayed at the top of the website's header).
Show YouTube Icon: Enable/Disable the YouTube Icon (displayed at the top of the website's header).
Show Dribbble Icon: Enable/Disable the Facebook Icon (displayed at the top of the website's header).
Show RSS Icon: Enable/Disable the Facebook Icon (displayed at the top of the website's header).
Facebook Profile Url: Facebook Profile page URL.
Twitter Profile Url: Twitter Profile page URL.
Google+ Profile Url: Google+ Profile page URL.
Pinterest Profile Url: Pinterest Profile page URL.
Tumblr Profile Url: Tumblr Profile page URL.
Stumbleupon Profile Url: Stumbleupon Profile page URL.
Instagram Profile Url: Instagram Profile page URL.
Youtube Profile Url: YouTube Profile page URL.
Dribbble Profile Url: Dribbble Profile page URL.
RSS Icon Url: The RSS feed URL.
Number of Posts displayed on Archive pages: Designate how many recent articles are displayed on the Archive pages. This option works independently from the Settings → Reading.
Number of Products displayed on WooCommerce archive pages: Designate how many WooCommerce products are displayed on the archive page. This option works independently from the Settings → Reading.
Number of Posts displayed on Category page: Designate how many recent articles are displayed on the Category page. This option works independently from the Settings → Reading.
Number of Posts displayed on Search pages: Designate how many recent articles are displayed on the Search Results page. This option works independently from the Settings → Reading.
Number of Posts displayed on Tag pages: Designate how many recent articles are displayed on the Tags page. This option works independently from the Settings → Reading.
Date format: change how your dates are displayed. For more information, please refer to the WordPress codex here: Formatting Date and Time
Use excerpts when defined: Enable excerpts in posts or pages.
Back To Top Button: Enable this option to display the Back To Top Button while scrolling.
Smooth Scrolling: Enable this option to get the smooth scrolling effect with the mouse wheel
Custom CSS: Here, you can add custom css to override or extend default styles.
Performance sub-tab
Dynamic Module Framework: Enable this to allow the Divi Framework to load only the modules used on the page and process the logic for the features in use.
Dynamic CSS: Dynamic CSS greatly reduces CSS file size by dynamically generating only the assets necessary for the features and modules you use. This eliminates all file bloat and greatly improves load times.
Dynamic Icons: The icon font is broken up into various subsets. These subsets are loaded only when needed based on the modules and features used on each page. If you need access to the entire icon font on all pages (for example, using our icon font in your child theme), you can disable this option and load the entire icon font library on all pages.
Load Dynamic Stylesheet In-line: This option dequeues the Extra style.css file and prints the contents in-line. This removes a render-blocking request and improves the PageSpeed scores of individual pages. However, it also prevents the style.css file from being cached. This option is recommended if you are optimizing for a website with a single landing page.
Critical CSS: Critical CSS greatly improves website load times and Google PageSpeed scores by deferring non-critical styles and eliminating render-blocking CSS requests.
Critical Threshold Height: When Critical CSS is enabled, Extra determines an "above the fold threshold" and defers all styles for elements below the fold. However, this threshold is an estimate and can vary on different devices. Increasing threshold height will result in fewer styles, resulting in slightly slower load times but less of a chance for Cumulative Layout Shifts to occur. If you are experiencing CLS issues, you can increase the threshold height.
Dynamic JavaScript Libraries: Only load external JavaScript libraries when they are needed by specific Divi modules on the page. This removes unused JavaScript from the main scripts bundle and improves load times.
Disable WordPress Emojis: WordPress loads its WordPress emojis. Modern browsers support native emojis, making WordPress's emojis unnecessary in most cases. Removing WordPress emojis removes unneeded assets and improves performance.
Defer Gutenberg Block CSS: If a page is built with the Divi Builder, the Gutenberg block CSS file is moved from the header to the footer. Since the file is most likely unused, we can load it later. This removes a render-blocking request and improves performance.
Improve Google Fonts Loading: Enable cache Google Fonts and load them inline. This reduces render-blocking requests and improves page load times.
Defer jQuery And jQuery Migrate: When possible, jQuery and jQuery Migrate will be moved to the body to speed up load times. If a third-party plugin registers jQuery as a dependency, it will be moved back to the head.
Enqueue jQuery Compatibility Script: Some third-party scripts may need to be correctly enqueued by declaring jQuery as a dependency. If jQuery is deferred, these scripts could break. Suppose you are experiencing console errors after enabling the Defer jQuery And jQuery Migrate options. In that case, you can enable this option, which will load an additional compatibility script that will attempt to solve the issue. You can turn this feature off if everything is working fine without it.
Defer Additional Third-Party Scripts: Warning: This can cause JavaScript errors in some cases and should be used carefully. When enabled, scripts registered by plugins and themes will be deferred to improve performance, and jQuery will always be loaded in the body.
Navigation Tab
You'll see three sub-tabs in the Navigation tab:
Pages
Categories
General Settings
Pages sub-tab
Exclude pages from the navigation bar: If no WordPress menu has been created, all published pages will be used in the WordPress Menu. Use this option to choose which page will show and which will not.
Show dropdown menus: If Enabled, all Menu items will show their respective sub-menu when the user hovers over them.
Display Home link: If Enabled, a Menu item called Home will be added to the WordPress menu.
Sort Pages Links: Defines criteria based on which the pages are sorted in the WordPress menu, automatically generated based on all published pages.
Order Pages Links by Ascending/Descending: Defines the sorting method used in the WordPress menu, automatically generated based on all published pages.
Number of dropdown tiers shown: Defines how many sub-menus the WordPress menu will display.
Categories sub-tab
Exclude categories from the navigation bar: Define which post categories are to be included in the automatically generated WordPress menu.
Show dropdown menus: Shows/hides the sub-menus
Hide empty categories: If enabled, Post Categories with no published posts assigned to them will not be displayed in the automatically generated WordPress menu.
Number of dropdown tiers shown: Defines how many sub-menu each menu item will display.
Sort Categories Links: Defines criteria based on which the categories are sorted in the WordPress menu, automatically generated by WordPress.
Order Category Links: Defines the sorting method used in the WordPress menu, automatically generated based on post categories.
General Settings sub-tab:
Disable top-tier dropdown menu links: if enabled, the sub-menu items inside the WordPress menu will be disabled.
Builder Tab
In the Builder tab, you'll see two sub-tabs:
Post Type Integration
Advanced
Post Type Integration:
Enable Divi Builder On Post Types: Defines which available post types the Divi Builder can be used.
Advanced sub-tab
Static CSS File Generation: Enable/Disable the CSS File Generation. For best loading times, these options should always be enabled.
Output Styles Inline: All the CSS files are outputted inline (on the page).
Product Tour: Enable/Disable the product tour if the Divi Builder is being used for the first time. Great for getting you up to speed on the basic usage of Divi.
Enable The Latest Divi Builder Experience: disables the deprecated Divi Builder in favor of the most recent version.
Enable Classic Editor: If Enabled, it will disable the WordPress Gutenberg editor.
Layout tab
You'll see three sub-tabs in the Layout tab:
Single Post Layout
Single Page Layout
General Settings
Single Post Layout sub-tab
Choose which items to display in the post info section: Used only on single post pages. It allows you to choose which meta elements each post should display.
Show comments on posts: Enable/Disable comments on single post pages.
Place Thumbs on Posts: Enable/Disable the post's Featured Image usage.
Sharing Icons to Display: Choose which sharing icons/options to display. All options marked with an X will not appear.
Single Page Layout sub-tab
Show comments on pages: Enable/Disable the usage of comments on single Pages.
General Settings sub-tab:
Post info section: Choose which items appear in the post info section on pages. This area, usually below the post title, displays basic information about your post. The highlighted items shown below will appear.
Standard or Masonry Style for Archive Pages: Choose standard or masonry display style for archive pages for tags, author posts, and search results.
Ads tab
You'll find five sub-tabs in the SEO tab:
Header
Bellow Header
Footer
Above Post
Below Post
Header sub-tab
Enable Header Ad: Enabling this option will display an ad in the header. If enabled, fill in the banner image and destination url below.
Input advertisement image: Advertisement image url.
Input advertisement destination url: Advertisement destination url.
Input adsense code: Place your Google Adsense code here.
Enable Responsive Adsense Ad: Adsense's responsive ad units require the ads' container to have a fixed width. Enabling this option applies a fixed width to this ad's container.
Below Header sub-tab
Enable Below Header Ad: Enabling this option will display an ad in below the header. If enabled, fill in the banner image and destination url below.
Input advertisement image: Advertisement image url.
Input advertisement destination url: Advertisement destination url.
Input adsense code: Place your Google Adsense code here.
Enable Responsive Adsense Ad: Adsense's responsive ad units require the ads' container to have a fixed width. Enabling this option applies a fixed width to this ad's container.
Footer sub-tab
Enable Above Footer Ad: This option will display an ad above the footer. If enabled, fill in the banner image and destination url below.
Input advertisement image: Advertisement image url.
Input advertisement destination url: Advertisement destination url.
Input adsense code: Place your Google Adsense code here.
Enable Responsive Adsense Ad: Adsense's responsive ad units require the ads' container to have a fixed width. Enabling this option applies a fixed width to this ad's container.
Above Post sub-tab
Enable Single Post - Above Post - Ad: Enabling this option will display an ad on the top of your post pages above the single post content. If enabled, fill in the banner image and destination url below.
Input advertisement image: Advertisement image url.
Input advertisement destination url: Advertisement destination url.
Input adsense code: Place your Google Adsense code here.
Enable Responsive Adsense Ad: Adsense's responsive ad units require the ads' container to have a fixed width. Enabling this option applies a fixed width to this ad's container.
Below Post sub-tab
Enable Single Post - Below Post - Ad: Enabling this option will display an ad on the bottom of your post pages below the single post content. If enabled, fill in the banner image and destination url below.
Input advertisement image: Advertisement image url.
Input advertisement destination url: Advertisement destination url.
Input adsense code: Place your Google Adsense code here.
Enable Responsive Adsense Ad: Adsense's responsive ad units require the ads' container to have a fixed width. Enabling this option applies a fixed width to this ad's container.
SEO tab
You'll find three sub-tabs in the SEO tab:
Homepage SEO
Single Post SEO
Index Page SEO
Homepage SEO sub-tab:
Enable custom title: By default, the theme uses a combination of your blog name and your blog description, as defined when you created your blog, to create your homepage titles. However, if you want to create a custom title, enable this option and fill in the custom title field below.
Enable meta description: By default, the theme uses your blog description, defined when you created your blog, to fill in the meta description field. If you want a different description, enable this option and fill in the custom description field below.
Enable meta keywords: By default, the theme does not add keywords to your header. Most search engines no longer use keywords to rank your site, but some people define them anyway, just in case. If you want to add meta keywords to your header, enable this option and fill in the custom keywords field below.
Enable canonical URLs: Canonicalization helps prevent the indexing of duplicate content by search engines and, as a result, may help avoid duplicate content penalties and PageRank degradation. Some pages may have different URLs, all leading to the same place. For example,
domain.com
,domain.com/index.html
, andwww.domain.com
are different URLs leading to your homepage. From a search engine's perspective, these duplicate URLs, often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you want to use officially. The theme bases its canonical URLs on your permalinks and the domain name defined in the settings tab of wp-admin.Homepage custom title (if enabled): If you have enabled custom titles, you can add your custom title here. Whatever you type here will be placed between the
<title></title>
tags in header.phpHomepage meta description (if enabled): If you have enabled meta descriptions, you can add your custom description here.
Homepage meta keywords (if enabled): If you have enabled meta keywords, you can add your custom keywords here. Commas should separate keywords. For example:
wordpress
,themes
,templates
,elegant
.If custom titles are disabled, choose autogeneration method: If you are not using custom post titles, you can still control how your titles are generated. Here, you can choose which order you want your post title and blog name displayed or completely remove the blog name from the title.
Define a character to separate BlogName and Post title: Here, you can change which character separates your blog title and post name when using autogenerated post titles. Common values are
|
or-
.
Single Post SEO sub-tab
Enable custom titles: By default, the theme creates post titles based on the title of your post and your blog name. If you want to differentiate your meta title from your actual post title, you can define a custom title for each post using custom fields. This option must be enabled for custom titles to work, and you must choose a custom field name for your title below.
Enable custom description: If you want to add a meta description to your post, you can use custom fields. This option must be enabled for descriptions to be displayed on post pages. You can add your meta description using custom fields based on the custom field name you define below.
Enable custom keywords: If you want to add meta keywords to your post, use custom fields. This option must be enabled for keywords to be displayed on post pages. You can add your meta keywords using custom fields based on the custom field name you define below.
Enable canonical URLs: Canonicalization helps prevent the indexing of duplicate content by search engines and, as a result, may help avoid duplicate content penalties and PageRank degradation. Some pages may have different URLs, all leading to the same place. For example
domain.com
,domain.com/index.html
, andwww.domain.com
are all different URLs leading to your homepage. From a search engine's perspective, these duplicate URLs, often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you want to use officially. The theme bases its canonical URLs on your permalinks and the domain name defined in the settings tab ofwp-admin
.Custom field Name to be used for title: When you define your title using custom fields, you should use this value for the custom field Name. The Value of your custom field should be the custom title you would like to use.
Custom field Name to be used for description: When you define your meta description using custom fields, you should use this value for the custom field Name. The Value of your custom field should be the custom description you would like to use.
Custom field Name to be used for keywords: When you define your keywords using custom fields, you should use this value for the custom field Name. The Value of your custom field should be the meta keywords you want to use, separated by commas.
If custom titles are disabled, choose autogeneration method: If you are not using custom post titles, you can still have control over how your titles are generated. Here, you can choose which order you want your post title and blog name displayed or remove the blog name from the title completely.
Define a character to separate BlogName and Post title: Here, you can change which character separates your blog title and post name when using autogenerated post titles. Common values are
|
or-
.
Index Page SEO sub-tab
Enable canonical URLs: Canonicalization helps prevent the indexing of duplicate content by search engines and, as a result, may help avoid duplicate content penalties and PageRank degradation. Some pages may have different URLs, all leading to the same place. For example
domain.com
,domain.com/index.html
, andwww.domain.com
are all different URLs leading to your homepage. From a search engine's perspective, these duplicate URLs, often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you want to use officially. The theme bases its canonical URLs on your permalinks and the domain name defined in the settings tab ofwp-admin
.Enable meta descriptions: Check this box to display meta descriptions on category/archive pages. The description is based on the category description you choose when creating/editing your category in the WordPress Dashboard → Post → Post Categories page.
Choose title autogeneration method: Here, you can choose how your titles on index pages are generated. You can change the order in which your blog name and index title are displayed or completely remove the blog name from the title.
Define a character to separate BlogName and Post title: Here, you can change which character separates your blog title and post name when using autogenerated post titles. Common values are
|
or-
.
Integration tab
In the Integration tab, you'll find settings like enabling header code, enabling body code, adding code to your blog, adding code to the tag, and more. This is another place where you customize your site with CSS and JavaScript.
Enable header code: Disabling this option will remove the header code below from your blog. This allows you to remove the code while saving it for later use.
Enable body code: Disabling this option will remove the body code below from your blog. This allows you to remove the code while saving it for later use.
Enable single top code: Disabling this option will remove the single top code below from your blog. This allows you to remove the code while saving it for later use.
Enable single bottom code: Disabling this option will remove the single bottom code below from your blog. This allows you to remove the code while saving it for later use.
Add code to the of your blog: Any code you place here will appear in the head section of every page of your blog. This is useful when adding JavaScript or css to all pages.
Add code to the (good for tracking codes such as Google Analytics): Any code you place here will appear in the body section of all pages of your blog. This is useful if you need to input a tracking pixel for a state counter such as Google Analytics.
Add code to the top of your posts: Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrate things such as social bookmarking links.
Add code to the bottom of your posts before the comments: Any code you place here will be placed at the bottom of all single posts. This is useful if you are looking to integrate things such as social bookmarking links.
Updates tab
The updates tab is where you'll paste your Elegant Themes membership info so that your Extra install is linked to your ET account, ensuring you have access to all future updates and features of Extra.
Before receiving product updates, you must authenticate your Elegant Themes subscription.
To do this, enter your Elegant Themes Username and Elegant Themes API Key into the Updates Tab in your theme and plugin settings.
To locate your API Key, log in to your Elegant Themes account and navigate to the Account → API Key page.
Learn more here. If you still get this message, please ensure your Username and API Key have been entered correctly.
Username: type your Elegant Themes username here.
API Key: Paste your unique API key here.
Version Rollback: If you recently updated to a new version and are experiencing problems, you can easily roll back to the previously installed version. We recommend using the latest version and testing updates on a staging site. However, if you run into problems after updating, you always have the option to roll back.