Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #933618

    Hi all,

    I know this subject has been dealt a few times, but I honestly didn’t get everything that’s why I’m asking here again, and I apologize for that.
    So as my topic title says, I’d like two different headers (depending on whether I am on a client page or a business page basically). The color, the logos (transparent and regular ones) and menus will be different.

    I also precise that since I use WP.com i don’t have any FTP access. Plus, I am a non-techi guy (although I do understand codes, long story…).

    Thanks in advance for your support, I’d really appreciate.

    Chris.

    #933691

    the most comfortable and the most flexible way might be to have two sites :lol
    if you like to have only one enfold installation you can reach that via multi-site installation – but this is more or less something for techy-guys.
    see here a customer of mine ( it would be possible to have on the one page a left navigation on the other a top one, different logos , different menus etc. pp) Espacially the backup of those pages is a bit more complicated than normal situtation. ( https://naturleben-rheinland.de )
    You will have on that case with one Enfold installation two pages with different Enfold Options to setup!

    So starting from a normal WordPress / Enfold installation there are different approaches to solve your problem.
    if you see this test-environment of mine : https://webers-testseite.de/ click on contact or impressum to see that you can have all kind of headers in one installation by this code if you only want some pages to be different:

    to functions.php of your child-theme

    add_filter('avf_header_setting_filter','av_change_header_style');
    function av_change_header_style($header)
    {
        if( is_page('332') ){
            $header['header_position'] = "header_right header_sidebar";
        }
        return $header; 
    }

    if you like to decide it for each page/post

    add_filter('avf_builder_boxes', 'register_meta_boxes', 10, 1);
    function register_meta_boxes($boxes){
        $boxes[] = array( 'title' =>__('Layout','avia_framework' ), 'id'=>'layout', 'page'=>array('page' , 'post' , 'portfolio' ), 'context'=>'side', 'priority'=>'low');
    return $boxes;
    }
    add_filter('avf_builder_elements', 'register_meta_elements', 10, 1);
    function register_meta_elements($avf_builder_elements){
      $avf_builder_elements[] = array(
        "slug"  => "layout",
        "name"  => __("Menu and Logo Position", 'avia_framework'),
        "desc"  => __("You can choose various different logo and main menu positions here", 'avia_framework'),
        "id"  => "header_layout",
        "type"  => "select",
        "std"   => "",
        "subtype" => array( __('Logo left, Menu right', 'avia_framework')   =>'logo_left main_nav_header menu_right',
                  __('Logo right, Menu Left', 'avia_framework')   =>'logo_right main_nav_header menu_left',
                  __('Logo left, Menu below', 'avia_framework')   =>'logo_left bottom_nav_header menu_left',
                  __('Logo right, Menu below', 'avia_framework')  =>'logo_right bottom_nav_header menu_center',
                  __('Logo center, Menu below', 'avia_framework')   =>'logo_center bottom_nav_header menu_right',
                  __('Logo center, Menu above', 'avia_framework')   =>'logo_center bottom_nav_header top_nav_header menu_center',
                  ));
    
    return $avf_builder_elements;
    }

    ( comment: nav on top – logo under it – had to be corrected a bit with more css – the others will work immediately with given settings)

    you will than have on editor of page post on the left the choice to set up header style

    different colors are done via quick css
    differnet menu maybe Mikes Plugin will help you than

    #933935

    Hi Guenni,

    Thank you very much for your help, I really appreciate! I’ll look closer to it and try to understand what modifies what. Just one thing, I can’t see any header color modification, am I wrong?

    Regards,

    Chris.

    #1318710

    I know this post is a bit dated – it might be appropriate for what I need… with a little more direction.
    (Let me know if you want me to start a new post)
    I am using Logo center, menu below and Header size = Large via the Admin settings.
    I want to keep this for the homepage.
    For all the inner pages, I want the Logo left, menu right – with the logo reduced in size so the menu is the main element in the header.
    May I get some help with this?
    Would creating a template for the inner pages be the wise move? (If so, can you direct me to get me started?)

    #1318753

    @Donkies11 : maybe this could be helpful for you: https://kriesi.at/support/topic/smaller-version-of-header-for-one-page/#post-1316282

    • This reply was modified 3 years, 3 months ago by Guenni007.
    #1318772

    @Donkies11

    … The better solution:
    ok – but style the header options for all the other pages – with custom height f.e. 80px !
    then put this to your child-theme functions.php

    function avf_header_setting_filter_mod($header) {
      if ( is_front_page() ) {
        $header['bottom_menu'] 	= 'header_bottom_menu_active';
        $header['header_layout']      = 'logo_center bottom_nav_header menu_right';
        $header['header_sticky']      = 'header_sticky';
        $header['header_shrinking']   = 'header_shrinking';
        $header['header_stretch']     = 'header_stretch';
        $header['header_size']        = 'custom'; 
        $header['header_custom_size'] 	= '150' ; // if custom size : integer value in px
          // here we do not add classes by .=  but build up all the new needed one
        $header['header_class'] 		=  " av_logo_center av_bottom_nav_header av_menu_right av_header_sticky av_header_shrinking av_header_stretch";  // when adding, it would be important that the first class added has a space in front of it
      }
      return $header;
    }
    add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 10, 1);

    Important to notice : if you like to have a shrinking header – it has to be there on general – and then remove it for those extra pages.
    if you set the header custom size to lower than 65 – shrinking is disabled

    ___________________________________ just for info
    these are other options ( no added class is needed on #header )

    $header['header_topbar'] 		= 	'header_topbar_active'; 
    $header['header_social']   		=   'icon_active_left extra_header_active';  	// or : 'icon_active_right extra_header_active'
    $header['header_secondary_menu']   	= 	'secondary_left extra_header_active';		// or : 'secondary_right extra_header_active'
    $header['header_phone_active']		= 	'phone_active_left extra_header_active';	// or : 'phone_active_right extra_header_active' 
    • This reply was modified 3 years, 3 months ago by Guenni007.
    #1318984

    Hi Guenni,

    For a project, I have a similar request. What I’d like to have is a complete different header based on page id’s (6 different pages).
    I came across this page/ tutorial and it looks pretty straight forward. However, I can’t get it to work. Is there perhaps an other aproach in order to achieve this?

    Best regards,

    Steven

    #1318989

    6 different pages with each different headers?
    if not – and these 6 pages will have the same header.
    you can have a page array on the code above instead of : if ( is_front_page() ) {

    #1318991

    Hi,

    Yep ;) Every page it’s own logo, border top color, social icons and no menu’s.

    #1318993

    all social icons do have consistent link – if they are present.
    or could it be that on page1 there is a facebook link different than on page2 etc.

    with logo you can do it this way :

    add_filter('avf_logo','av_change_logo');
    function av_change_logo($logo){
        if( is_page(21) ) {
        	$logo = "http://www.domain.com/wp-content/uploads/logoforpage21.jpg"; 
        }
      
        elseif ( is_page( array( 42, 54, 6 ) ) ) {
        	$logo = "http://www.domain.com/wp-content/uploads/logoforpage22.jpg"; 
        }
    
        elseif ( is_page() && !is_page(1307) )  {
        	$logo = "http://www.domain.com/wp-content/uploads/logoforpage23.jpg";  
        }
        return $logo;
    }

    border top color is just css with classes on #top ( .page-id-123 )

    #1318994

    Hi,

    Just send you an e-mail ;)

    Regards,

    Steven

    #1318999

    no e-mail here on my account – send again please

    #1319002

    I resend the mail to your mail address stated on your website:https://webers-webdesign.de/kontakt.

    Btw all social icons do have their own links per organisation (page)

    Best regards,

    Steven

    #1319014

    Btw all social icons do have their own links per organisation (page)

    if it is in your widget only ( not the top-heading ) i would install something like: restrict widget and put the different social media links into different widgets.
    ( or maybe better: https://wordpress.org/plugins/widget-logic/ )

    first i would try to have this tree function to have all pages – that are subpages – the same logo

    f.e:

    function is_tree($pid){
    global $post;
       $ancestors = get_post_ancestors($post->$pid);
       $root = count($ancestors) - 1;
       $parent = $ancestors[$root];
       if(is_page() && (is_page($pid) || $post->post_parent == $pid || in_array($pid, $ancestors))){
         return true;
        }
       else{
         return false;
        }
    };
    
    function av_change_logo($logo){
          if (is_tree(178)) { $logo = "/wp-content/uploads/2021/08/logo_MEE.png";}
      elseif (is_tree(aaa)) { $logo = "/wp-content/uploads/2021/08/logo_VTV.png";}
      elseif (is_tree(bbb)) { $logo = "/wp-content/uploads/2021/08/logo_JongLeren.png";}
      elseif (is_tree(ccc)) { $logo = "/wp-content/uploads/2021/08/logo_Xtra.png";}
      elseif (is_tree(ddd)) { $logo = "/wp-content/uploads/2021/08/logo_Mooi.png";}
      elseif (is_tree(eee)) { $logo = "/wp-content/uploads/2021/08/logo_JESS.png";}
       return $logo;
    }
    add_filter('avf_logo','av_change_logo');

    you had to replace the aaa – eee with the page id’s.

    #1319189

    Hi,

    Thanks for your input! I will give it a go this week. Keep you posted.
    Apperantly the Widget Logic doesn’t work anymore. Is that the case?

    Best regards,

    Steven

    #1319208

    Hi,

    Thanks for your help @Guenni007!

    Glad @Guenni007 could help! The plugin was not updated in 2 years so it might not be working as expected anymore :)

    Best regards,
    Yigit

    #1319237

    FYI: i am just getting back to this… I’ll attempt this solution today

    #1319381

    @steviger :
    on the method above you had to think of that every page concerning to mee is subpage of mee. etc.

    or if you have not too much pages and subpages etc.
    you can give to them a tag

    you can activate for all pages / posts the tag option by:

    // add tag support to all posttypes
    function tags_support_all() {
      register_taxonomy_for_object_type('post_tag', 'page');
    }
    add_action('init', 'tags_support_all');
    
    function tags_support_query($wp_query) {
      if ($wp_query->get('tag')) $wp_query->set('post_type', 'any');
    }
    add_action('pre_get_posts', 'tags_support_query');

    you now have the opportunity to give each post / page a tag (avoid using two of those tags )

    function av_change_logo($logo){
      	  if(has_tag('mee')){ $logo = "/wp-content/uploads/2021/08/logo_MEE.png"; }
      elseif(has_tag('vtv')){ $logo = "/wp-content/uploads/2021/08/logo_VTV.png";}
      elseif(has_tag('jong')){ $logo = "/wp-content/uploads/2021/08/logo_JongLeren.png";}
      elseif(has_tag('xtra')){ $logo = "/wp-content/uploads/2021/08/logo_Xtra.png";}
      elseif(has_tag('mooi')){ $logo = "/wp-content/uploads/2021/08/logo_Mooi.png";}
      elseif(has_tag('jess')){ $logo = "/wp-content/uploads/2021/08/logo_JESS.png";}
      return $logo;
    }
    add_filter('avf_logo','av_change_logo');

    I think that’s how it should work.
    You just have to remember to set the tag for the pages you want to create.

    #1319432

    Hello Guenni007,
    I really appreciate you taking the time to write the unique code you did!
    It is working – I just need to tweak the look now (bring menu and logo closer together, etc.). I think this is CSS stuff I can do…
    Again, thank you for your support with this – code works like a charm.
    Sincerely,
    Greg

    #1319505

    Hi Guenni,

    Indeed, it works like a charm! And I too do appreciate your time and effort. The issue with the socials in the header, I will tackle with “display none” based on page ID I guess.

    Best regards,

    Steven

    #1319602

    Hi,

    Thanks @guenni007 for helping out :-)

    Best regards,
    Rikard

    #1319613

    @steviger
    on your logo img you got a margin set i think set by yourself in quick css – remove that and try to position it f.e. this way:

    .logo img {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    #1321738

    Hi Guenni,

    I was wondering if the code you provided also would work on childpages by modifying the function.

    Best regards,

    Steven

    #1322490

    Hi @steviger,

    Please see – https://codex.wordpress.org/Conditional_Tags#A_PAGE_Page for a workaround to check child pages

    Best regards,
    Yigit

Viewing 24 posts - 1 through 24 (of 24 total)
  • You must be logged in to reply to this topic.