This is a small tutorial for developers working on a WordPress website using Avada and Theme Fusion.
We will check how to add a custom option field and use it on an specific page. This has been tested on Avada 6.2.3. Adding theme option fields will help us manage them under the Theme Option page later on. This makes it easy for the end-user to edit and/or update the field values with a seamless interface and without having to code anything.
1. Registering your plugin
/** * Plugin Name: Custom option * Plugin URI: http://miguel.nz * Description: Custom option on Avada WordPress website. * Version: 1.00 * Author: Miguel Garrido * Author URI: http://miguel.nz */
2. Registering our options
add_action( 'fusion_builder_shortcodes_init', function(){
require_once 'avada/header-options.php';
});
Then on avada/header-options.php we are going to register our custom option. This option will be a custom image or logo for an specific page, let’s say our Front Page.
if ( class_exists( 'Fusion_Element' ) ) {
class MNZ_AdditionalOptions extends Fusion_Element {
public function __construct() {
parent::__construct();
}
public function add_options() {
return array(
'alternative_home_page' => array(
'label' => esc_html__( 'Home Page (Additional Options)', 'fusion-builder' ),
'description' => 'Additional options for the Home Page',
'id' => 'alternative_home_page',
'type' => 'sub-section',
'fields' => array(
'front_page_logo' => array(
'label' => esc_html__( 'Header Logo', 'fusion-builder' ),
'description' => esc_html__( 'This is the logo that will appear on the home page.', 'fusion-builder' ),
'id' => 'front_page_logo',
'default' => false,
'type' => 'media',
),
),
),
);
}
}
new MNZ_AdditionalOptions;
}
We would like to add this logo at the Front Page. In order to do so, we will hide the current logo with CSS. We will register a new action on wp_head under the fusion_builder_shortcodes_init action.
add_action( 'fusion_builder_shortcodes_init', function(){
require_once 'avada/header-options.php';
add_action('wp_head', function() {
$front_page_logo = fusion_get_option('front_page_logo');
if (is_front_page() && $front_page_logo):
?>
Now we are going to display our logo using the hook avada_logo_prepend.
add_action('avada_logo_prepend', function() {
if(is_front_page()) {
$front_page_logo = fusion_get_option('front_page_logo');
if ($front_page_logo) {
echo wp_get_attachment_image($front_page_logo['id'], 'full');
}
}
});
We can see now our field registered under the Theme Options page here:
