Fenix documentation
Installing WordPress
In order to be installed, the theme requires that you have a working WordPress installation, locally or on you web space.
If you need help installing WordPress, you can head over to the official WordPress documentation page to get started.
If this is your first time using WordPress, you can also take a look at a few other pages that might help you understand the basics:
Technical requirements
To use the theme, the minimum WordPress version required is 4.4. From the technical point of view, your host must support at least the following:
- PHP
5.2+ - MySQL
5+
Concerning PHP, even if the minimum version required is 5.2, we strongly encourage that you use a newer version, such as 5.6 or 7.0, both for performance and security reasons. If you’re not yet on those, talk to your host and enquire about the possibility of activating one of those versions on your account.
Suggested PHP configuration settings
Every once in a while, you might encounter a problem that is somehow related to the configuration of the PHP that’s running on your host. In order to try to prevent those errors from happening, we suggest that you make sure that you have the following settings in place:
max_execution_time:180memory_limit:96Mpost_max_size:32Mupload_max_filesize:32M
Suggested WordPress configuration settings
In order to increase the memory allocated to your WordPress installation, you also need to follow these steps to set a specific memory limit.
Installing the theme
Check out our video Installation tutorial.
After purchasing Fenix you can download the theme package from your ThemeForest “Downloads” section.
You can either choose to upload the theme to your server via FTP, or use the WordPress theme upload function. In either case, please make sure to upload only the archive file named after the theme, contained in the main package you downloaded (e.g. if the main package is called “Theme v.1.0”, you want to upload the “theme.zip” file contained in it).
If you are new to WordPress and have problems with theme you might want to check out this page on the Envato help.
Are you getting the “Theme is missing the style.css stylesheet error“? take a look at this page for explanation on how to fix this issue quickly.
Theme installation wizard
Upon theme activation, you will be redirected to the theme wizard installation procedure, which is intended to guide you in your first steps with the theme.
The one click installation procedure will install and activate all the required plugins in order to make the theme work properly.
If you mind to skip this procedure or something goes wrong with the wizard make sure to follow the instructions in the “Required plugins” section below in order to manually activate all the plugins needed by the theme.
Required plugins
In order to use all the theme features you need to activate the following plugins, which are required by the theme:
- Evolve framework, our backbone option framework,
- Fenix companion plugin, which declares the custom post types used by the theme.
The following plugins are not necessarily required by the theme, but are strongly suggested to take full advantage of its functionality:
- Brix page builder, our proprietary page composer, since all the demo pages are built with it,
- Fenix demos importer, that will allow you to install our demo content.
If you decided to skip the theme installation wizard, or something went wrong during the wizard installation, you’ll find links to enable the required and suggested plugins under Fenix → Install Plugins, in the WordPress administration area.
Installing demo content
Fenix provides a variety of pre-built demos that you can import and use right away on your installation.
In order to perform the installation of the demo content, please make sure that the Fenix demos importer plugin is installed and active, and then, from the Fenix section on your WordPress backend, navigate to the Demo content tab to find a list of all the available demos.
In this page, the demos are displayed in a grid-like layout. Moving your mouse over an image will make two action buttons appear, to preview and install the demo: while the first is a simple link to the demo preview, by clicking on the Install button, an installation procedure will start and all the pages and images needed by the demo will be added to your installation.
If the online demo shows some content generated with an external plugin, such as WooCommerce for example, make sure to activate the required plugin(s) before starting the demo import procedure.
Please note that some of the images used in the online demo may be replaced with creative commons images from Unsplash. Images are always intended for demo purposes only.
How to update
Fenix is updated regularly, bringing in new features, providing security enhancements, fixing bugs, and generally be compatible with the latest and greatest WordPress version available.
When a new update is published, there are two ways for you to update your theme.
Auto updates
In order to receive updates notifications for the theme you’ll need to install the Envato Market WordPress plugin, which will take care of the whole process for you. Please refer to their documentation page about how to set it up correctly.
Auto updates work with child themes as well: in the case an update to the parent theme is available, you will be able to update it automatically and transparently without touching the child theme’s code.
Manual updates
As soon as a new update comes out, the new updated version will be available on your ThemeForest Downloads section, making sure to download the Installable WordPress file only.
After you got a copy of the updated theme, you have two options:
Log into your site via FTP or cPanel and delete the old theme folder and then upload the new archive you’ve just downloaded and unpack it in the themes directory.
Make sure you make a backup of the old version of your theme just in case something goes wrong.
Another choice that you have is to rename folder that contains the now old version of the theme. This will allow you to successfully upload the new version of the theme.
In the case you’re manually updating the theme, make sure to only update the main/parent theme, not any child themes that you might be using.
Updating the required/suggested plugins
When a new theme update comes out, the required/suggested plugins, even when they’re distributed as a bundle together with the theme itself, may require to be updated as well.
Should that happen, a warning sign will be displayed near to the Fenix item in the WordPress admin menu. By going to that page, you’ll see a notice that will tell you which plugins need to be updated and will give you instructions about how to do it.
Child themes
You might be wondering, “Should I install a child theme?“
This is a good question and the answer is a resounding yes! If you’re not familiar with child themes, here’s a good place to start knowing them a little more.
Long story short, activating a child theme allows you to receive all the theme updates available, without compromising your customizations, because they would be in fact done on a different theme.
This is also why the version number of the child theme will never change: in order to perform an update to your theme, even if you’re using a child theme, you’ll always only need to update its parent theme.
Layouts
Check out our video Layouts tutorial.
Generally speaking, a page anatomy is composed by an header, a content area, and, optionally, a footer. To manage the complexity of having the same headers and footers applied consistently across the website, or to give you the possibility of changing the default behavior for a particular context, we’ve introduced the concept of Layouts.
Layouts are groups of presets defining the visual presentation of your pages, allowing you to precisely control its details such as navigation orientation, and header and footer areas.
Basically, whenever a page or a post is published, two things happen:
- A certain Layout is applied to it (e.g. horizontal navigation, with a hamburger menu on the left and a three columns footer),
- The page is rendered according to its content.
The great thing is that, since most (if not all) pages and posts in the website will have the same overall consistent visual presentation, Layouts can be shared across the entire website, so that when you set one as Master, all the pages and posts will automatically use that preset as their Layout.
You can create multiple Layouts. Say you want a couple of pages or posts to stand out from the rest, and you want to apply a vertical navigation to them, or use a particular footer layout: you can create an entirely different Layout, this time not marked as Master, and apply that layout to those pages/posts only.
Also, regardless of its Master status, a Layout can automatically be associated to a specific post type or archive page. More on this in the Options page of this documentation.
You can create your first layout by clicking on the Fenix → Layouts page in the WordPress admin area: in this page you’ll be presented with a list of all the layouts that you have created. Just click on the Create New button near the Layouts heading to create a brand new one.
A Layout is composed by three main areas:
- Orientation and header behavior,
- Header layout,
- Footer layout.
Orientation and header behavior
Generally, Layouts are better defined by their orientation, and can thus be divided into two main categories: horizontal or vertical. When we talk about the orientation of a layout, we’re actually referring to the arrangement of the logo and navigation combination.
When the logo and the navigation are placed side by side, or generally when they are set to occupy the screen using its width, we’re using an horizontal layout, while when the two of them are stacked one on top of the other and placed on a side of the viewport, we’re using a vertical layout.
Apart from choosing its orientation, a Layout can also be defined by its width, which is the amount of horizontal space being used by the content area of the pages that use the Layout. Concerning the content width, you have two options: you can make the content extend to the browser viewport’s edges (extended layout), or you can make it stay at the center of the browser viewport (boxed layout, using a maximum width of 1104 pixels).
You can set a layout to be automatically used across the entire website by setting it as Master using the Set as master layout toggle. If you only have one Layout, it’ll be automatically set as the Master layout for the website.
Keep in mind that individual posts/pages/post types/archives can override the Master layout, and choose to use a different one for their display.
The Header section of the Layout editing screen is used to define the behavior of the header element. What this means is that you can choose between having:
- a static header, that goes away as you scroll down in the page, only to appear again if you go back up,
- an absolute header, that is similar to the static variant, with the difference that the header can appear again when you’re scrolled deep down the page,
- a fixed header, which is always visible, regardless of the scroll.
The absolute behavior is useful when you need to overlap the header to a page header image that’s placed in the top portion of the page and stretches wide in both directions. There are two types of absolute scrolling behaviors: when a visitor scrolls down or up in the page, you can choose to display a compact version of the header, without the top and bottom bar (if you have any).
If you select any between the absolute or fixed behavioral options, an extra styling setting will be available called Shadow, which will add a soft shadow on the header in its scrolled or regular state.
Header layout
Headers in Fenix are composed by three parts:
- The Header layout, which is where the logo and navigation components are,
- a Top bar, which is a wildcard area that’s placed on top of the Header layout,
- a Bottom bar, which is identical to the Top bar, but placed below the Header layout.
You can edit each area by clicking on the corresponding button that’s placed in the middle of each section, in the Layout editing screen.
The Top and Bottom bars are structured in columns and their content is powered by widgets: for each area, you’ll need to choose the number of columns you want to use (one or two), and which widget area to display in each column. For more about Widget areas, go check the appropriate section in the documentation.
The Header layout part is the most important one, since it gives you the ability to select a logo for your website, and decide the navigation structure. You can pick a particular Header appearance by selecting one of the available presets that will be displayed to you after clicking on the Choose a header layout button.
The number of presets available for you to choose from depends on the Layout orientation you’ve chosen.
Each preset may have a specific set of options that will appear after you’ve selected it, but generally speaking all the presets share the same logic: for each preset, you can choose whether to display the logo tagline or not, enable extra elements such as a search icon before or after the navigation component, or a cart icon, if you’re using the the WooCommerce plugin.
Appearance
In the Appearance section, displayed when clicking on the Edit appearance button in the top left corner of the Header layout interface, you can style each component of your Header.
Under the Logo section, you’ll be able to upload a logo that’s going to be used when your website is accessed from a desktop or mobile device. When left empty, the Site name will be used in place of the logo; if you only upload a desktop logo, that logo will be used on mobile as well.
Skins
The Header layout features a special skin system that allows you to define three main appearance states for your header:
- Dark skin (default), used with dark texts on light backgrounds,
- Light skin, used with light texts on dark backgrounds,
- Scrolled, used when the header is scrolled in page.
The scrolled version is automatically applied when the header behavior is set to absolute.
The dark skin inherits the theme default colors defined in the main stylesheet or your customizations made with the WordPress Customizer.
The light skin is intended to be used with page headers that have a big image and an header that’s absolutely or fixed positioned, especially if you are using a slideshow.
To learn more about selecting and changing the header skin, check the Page layout section.
Similarly to the Header layout, the Footer layout is composed by two main areas:
- the Footer layout,
- the Bottom bar layout.
The Footer layout is intended to be used as a classic column based footer sidebar, while the bottom bar layout instead is intended to be used as a section useful to display secondary information, such as copyrights.
Both the areas are structured in columns, and each column can be populated with a widget area. For more about Widget areas, go check the appropriate section in the documentation.
Responsiveness
Desktop and mobile devices are profoundly different, and, generally speaking, a visual layout should adapt itself to the context in order to display information in the best possible way.
Layouts are built to adapt themselves depending on the context: after you’ve set a particular layout preset for its desktop representation, the Header layout can be changed completely when switching to mobile, allowing you to choose not only a different layout preset, but also which navigation menu to load, since in many cases it’s best to have a navigation that’s tailored for mobile use.
So, for example, the following situation is possible: you can use a wide header layout with a centered logo and a navigation menu on each side of it when viewing the page on a desktop device, and a left aligned logo with an hamburger menu on mobile devices.
For the Header top bar and bottom bar, and for the Footer layout and Footer bottom bar, the content you choose for their desktop view will be kept when going mobile, but you’ll have the option to alter its layout, changing the number of columns, or choosing to entirely hide a portion of them.
In the top right corner of the Header layout and Footer layout editing panels, you’ll find a couple of toggles that will allow you to switch between the desktop and mobile view.
By default, if you don’t specify any change, the mobile view will follow the desktop’s defaults.
Page layouts
In every page that you create, whether it’s a real page, a post, or any other content type, the first thing you’re going to see it’s the top portion of the page, which we call Page header. Due to their preeminence, page headers are particularly important and require specific tools to give them the flexibility they need.
Layout types
The editing area for page headers is located in a meta box called Page layout in the page/post editing screen, and consists of a set of controls and a preview area that’s entitled to give you a rough idea of how your page header is coming up.
Pressing the Change layout button on the top right hand corner of the preview area will allow you to select a page header layout and the Layout that’s used by the page. For more about Layouts and how they work, you can check their relative documentation page.
There are four types of Page header layouts, among which you can choose.
Elements
In Fenix, a page header is composed by different elements, all of which are optional:
- A page title, or a big bold text that serves as slogan for the page,
- a text that’s displayed before the page title,
- a text that’s displayed after the page title,
- call to action elements such as buttons,
- a background media element, such as an image or video.
You can use the regular page/post title to be used as page title, or you can write your own title/slogan, so that the text won’t interfere with SEO elements such as the document <title>.
The content that goes before or after the page title/slogan is intended to be a sub-headline or provide additional information for the page/post: for example, since they can also fetch dynamic data, in the single post you could choose to automatically display the post’s categories or the author name, while in other cases you might want to write an entirely custom text.
The media element can either be an image or a video, and it supports different display properties, alignment and overlay controls and more.
The Page layout also gives you the option to create a slideshows using the aforementioned elements. Essentially the distinction here is that if you want a static header, you’ll create a slideshow that’s composed by a single slide, and as such with no transition/movement effects.
By clicking on the Slideshow control, on the top of the Page layout editing interface, you’ll unlock the possibility of creating more than one slide, rearranging them, and sort of link them using transition effects that involve both the texts and the media elements.
You can also choose to bypass the Fenix page header system completely and use your own external slider plugin: in order to do this, just click on the External control, on the top of the Page layout editing interface.
Lastly, a page header can also be completely disabled: pages that choose to disable the page header are essentially blank canvases, of which the first elements to be displayed is the page content itself. This is a particularly interesting use case, since creative pages can be easily composed, with complete freedom, using our Brix page builder.
Options
The main Page header options are available by clicking on the big arrow on the left side of the Page header editing interface.
Here you can edit all the elements that compose the Page header and their appearance, with controls such as text alignment, background color, skin and more.
Effects
For both the static and slideshow modes there is a button on the top right corner of the preview area called Effects options: in this panel you can control the effects for the text and the media layer and the timing and effects for the transitions between different slides when in slideshow mode.
Please note that having a slideshow with both texts and images will create two separate sliders that are moved in sync: this allows to have completely different effects between text and media.
Widget areas
Widgets are fully supported in Fenix, as they’re used in various parts of the theme, such as Headers, Footers and they’re also available to be used in the Brix page builder plugin.
Fenix allows you to create additional Widget areas, with a sidebar creation tool that’s integrated in the Appearance → Widgets section of the WordPress admin and that will allow you to create an unlimited number of sidebars.
After a Widget area has been created, it will appear under the User-registered widget areas panel in the Widgets administration screen.
Projects
The Projects Custom Post Type it’s an easy and powerful way to showcase your works and create an amazing portfolio.
You can access to the Projects section from your WordPress admin interface.
Being a CPT, you can create multiple projects, and then group them together in Portfolio-like pages creating content using the Brix page builder plugin, using its Portfolio content block.
Single projects
The Project structure is composed by a standard WordPress title/content area plus a featured image, that will be used as cover image in Portfolio pages. Portfolio pages can be easily created using the Projects loop generated by the “Portfolio” builder block.
Single projects are also defined by a Data meta box with several custom options, like a subtitle, meta information, layout and a gallery of images and videos.
Single projects can also be filed under Project Categories: categorized project can then be filtered in Portfolio pages.
Meta data
The most interesting aspect of the single project Data meta box is that the same meta data isn’t only displayed in single project pages, but can also be used later in Portfolio pages to create amazing multiple filters.
There are three built-in metas that can be used in your projects: year, role and client. If you need to add other meta data of your choice, you can easily do so by using the fenix_projects_metas filter.
Layout
Under the Layout section of the Data meta box you can find 3 layout presets available for the single project page.
Each layout width can be altered by checking the “Extended layout” option, that will in factremove the max-width applied to the structure and let the page content fit the browser window.
The medias in the galleries are not opened in a light box by default when clicked, but you can enable that functionality by switching on the Lightbox option.
The middle layout preset, the one with the media content in the right column, has a custom option to make the details column stick in place when you’re scrolling down the page: this can be useful if you have long list media images and videos and you want to keep the project details always visible.
Project gallery
A project gallery can be composed by images and videos, and displayed in 5 different ways: image stream, carousel, slideshow, grid and masonry.
If you need to add an image to your stream just click on the Media library button under the “Media items” option, or on the External embed button, if you need to add a video. Every media item can be sorted by dragging the preview element.
Images also support captions through a Caption option that will enable the display of the media item caption text.
Portfolio pages
Portfolio pages can be easily created using the Projects loop generated by the Portfolio builder block, that will allow you to display a list of Projects in different formats.
Optionally, you can also enable a Filter on top of the list of Projects, so that individual items can be filtered by Project Category, or meta data.
Additionally, a Portfolio page can also be set as the “index” page for all the published Projects: the Projects Index page option, that can be found in the theme options page under Fenix → Projects, allows you to enable a “master” portfolio page, which Projects will link back to from their individual pages, so that you can offer users a quick link that specific page when, perhaps, they’ve landed on a particular single project page.
Albums
The Albums Custom Post Type allows you to group media items together and display them on your website in a variety of ways.
You can access to the Albums section from your WordPress admin interface.
Being a CPT, you can create multiple albums, and then group them together using the Brix page builder plugin, with its Albums content block.
Single albums
Individual albums are defined by a set of media items, both images and external embeds from services such as YouTube or Vimeo. You can add media items to an album under the Album gallery section in the Data meta box in the album editing screen.
Available to you are a number of options that allow you to control how those media items are shown in page.
For example, you can control their layout with the Gallery type control, or choose to distribute all of your media items over multiple pages, by chosing to display only a certain number of items at a time.
The medias in the galleries are opened in a lightbox by default when clicked, but you can disable that functionality by switching off the Lightbox option.
Images also support captions through a Caption option that will enable the display of the media item caption text when they’re loaded in the lightbox.
Meta data
Additionally, a set of meta data can be added to albums to further define their content. Meta data isn’t only displayed in single album pages, but can also be used later in pages that use the Albums content block in Brix to create amazing multiple filters.
There are two built-in metas that can be used in your album: year and client. If you need to add other meta data of your choice, you can easily do so by using the fenix_albums_metas filter.
Albums content block
The Albums content block allows you to display a link to the albums you’ve created.
You can either load all the albums in your website, or filter them by category, or even precisely pick the ones you intend to display, also controlling their order.
Optionally, you can also enable a Filter on top of the list of albums, so that individual items can be filtered by Album Category, or meta data.
Theme options
Fenix global options can be found under the Fenix → Options page in your WordPress admin area and are divided in Global options and Post Type options.
Under the Options section, you will find all the global options for the theme.
Preloaders
Preloaders are used to show a loading element before the page is ready to be displayed. Preloaders are activated site wide, and offer several display styles to choose from, together with the option to display the website’s logo next to the loading element.
Post Types
For each post type, like Posts or the Projects, the option panel puts at your disposal a set of specific option sections. Under the Blog section, you’ll be able to control page Layout, loop layout and which sidebar is used in posts’ single pages, archives or blog index. Similarly, you can do the same with the Search results page and Project entries.
These options are particularly helpful if you need to batch modify several pages in a specific area, like applying to all the single posts a specific custom Layout: in this case, you’d navigate to Fenix → Blog → Single, and then choose the Layout you want to apply from the Layout select. After hitting Save, all the single posts that do not override that setting in their editing page, will then use that Layout when displayed.
Brix Page Builder
The documentation for the Brix page builder is available at the official website. Also, a number of video tutorials are available on Brix’s YouTube channel.