ThemeShaper Forums » Thematic

[closed]

Different headers for pages with widgetized areas

(6 posts)
  • Started 2 years ago by Mike_sa
  • Latest reply from Mike_sa
  • This topic is resolved
  1. Hi

    I am trying to figure out how to have different headers in thematic.
    I have modified the thematic header in my functions file by adding widgetised areas.
    The issue I have now is that I require headers that are 90% the same but instead of having a slideshow widget area I now need to have the slideshow widget area on some pages display as a static image.

    I thought about creating a another thematic_header function under a different name, would that work and would I add it to my functions file or the header extensions file ?

    Many thanks

    Posted 2 years ago #
  2. There are probably at least 10 different solutions to do what you are asking, could be a little more specific in what differentiates the pages?

    Are they in a different category, different tag? Are the other 10% using the same image? There is kind of a whole $#(% load of info missing to give a best answer. Even if it ends up being above my head, the smarter programmer people here will want to know. ;)

    Posted 2 years ago #
  3. I was also wondering what would be the best way to build a site for my clients so they could customize different header images for different pages without having to access the template files (which is over their heads). For instance I have to redo this site http://www.lacocinasf.org/ (as you can see they are already messing with the menu!) so their volenteers can swap out the header images.

    I too was thinking of approaching it by making a custom widget top-bar for each page, but would be interested to hear if there may be a better way?

    Posted 2 years ago #
  4. @Laststraw, Kathy would be better off answering this, I have a feeling she would possibly suggest using WPAlchemy MetaBox? I am not a developer but I do have a solution that would work, there is just probably a even more streamlined way of doing it.

    If all you are needing to do is swap out the image, you may be able to add a simple metabox, here is a great tutorial http://www.farinspace.com/how-to-create-custom-wordpress-meta-box/ , now it may look fairly complicated, it is really just copy and paste. Rename the metabox information and modify it how you see fit, for example, just use one of the metaboxes for the image path.

    Once you were set up with that, I would highly suggest making your life easier and inserting the header image through CSS. The reason I would do this is because then you can load up your metabox with the image path in the CSS below the original CSS file and override it. This can all be done in your function PHP.

    Recently I used this technique, but slightly different, I actually inserted the images, but only because there wasn't one originally there, so the image create the space needed in the header. Here is that function,

    // add this meta information to pages, if none default text
    function snix_add_meta_info() {
    	if (is_page()) {
    		global $post;
    		$my_meta = get_post_meta($post->ID,'_my_meta',TRUE);
    		echo '<div class="ftitle">';
    		echo $my_meta['name'];
    		echo '
    ';
    			if ( $my_meta['image'] ) {
    			echo '<div class="fimage"><img src="';
    			echo $my_meta['image'];
    			echo '" /></div>';
    			}
    			else { }
    		echo '</div>';
    	}
    	elseif (is_single()) {
    		echo '<div class="ftitle">';
    		echo the_title();
    		echo '
    </div>';
    	}
    	else {
    		echo '<div class="ftitle">';
    		echo 'Traditional, Modern &amp; Eco-Friendly Design Systems';
    		echo '
    </div>';
    	}
    }
    add_action('thematic_header', 'snix_add_meta_info', 10);

    Now this includes a "Fancy Title" as I called it which allows them to add text in the header too, so the services page doesn't say "Services", it says "Modern & Eco-Friendly Design Systems" by default. So if they want they can override that default text, or add an image if the page required.

    The metabox I used only appears on pages, the first if statement basically says, if it is a page, and it has information in a metabox information in the name, spit it out (if not use default), if it has an image, spit that out, if no image, do nothing.

    The elseif says if it is a Blog Page, use the "Fancy Title" spot and instead spit out the Post Title.

    The else is a catch all so if nothing is inserted in the metaboxes at all, it will say "Traditional... blah blah" by default.

    While the code above doesn't help all that much, it is a decent example to look at to see how I am injecting it through function.php, a lot of examples I found were involving actual templates and I didn't want to create files. You could easily modify something like this to inject a style tag in the wp_head below your style sheet and override that original background image.

    Keep in mind, this won't work (not tested) and I blow at PHP, but it would look something like this.

    function snix_add_meta_info() {
    	global $post;
    	// checks to see if info is in metabox
    	$my_meta = get_post_meta($post->ID,'_my_meta',TRUE);
    		// if yes, do this
    		if ( $my_meta['image'] ) {
    		echo '<style>.header-img { background: url(';
    		echo $my_meta['image'];
    		echo ') }</style>';
    		}
    		// if no, don't do shit
    		else { }
    }
    add_action('wp_head', 'snix_add_meta_info', 10);

    Doing it similar to this, they can use WP to upload the image like normal, copy the link from there and paste into the metabox which will then override the original bg image because it is further down in the head of the document.

    Now Kathy will probably come and tell you shortly a much easier way of doing it, so don't rush to it quite yet. :P

    Posted 2 years ago #
  5. thanks ScottNix will check this out tomorrow post vino :)

    Posted 2 years ago #
  6. Wow thanks for all the responses!

    Well basically what I was wanting to achieve was to be able to have completely different headers, originally I was only concerned about having the ability to display different static images for pages within the same category.

    I developing the website I had created a standard Thematic header in my child theme , I had added a logo to the header and 2 separate widget ready areas. 1 widget area was for the product search and the other widget area was for a slideshow of images.

    There seems to be limited documentation on adding different headers to the thematic child theme. So I thought I would post my way of achieving different headers in thematic.

    Unfortunately I cannot show the example as it is being developed on my local server in mamp.

    This is the long way around to achieve what I wanted :) I am sure lastraw and ScottNix, you would do this differently. If you know of a shorter route please add your way of achieving this :)

    I had transformed the thematic header in my functions php file :

    function remove_branding() {
    		remove_action('thematic_header','thematic_brandingopen',1);
    
    }
    add_action('init', 'remove_branding');
    
    // We wrap #branding and #header-aside with #header-box
    function childtheme_brandingopen() { ?>
    	<div id="header_box">
        	<div id="branding">
    <?php }
    add_action('thematic_header','childtheme_brandingopen',1);
    
    // Now we need to close #header-box
    function header_box_close() { ?>
    	<!-- close header-box --></div>
    <?php }
    add_action('thematic_header', 'header_box_close', 9);
    
    // And we add the unchanged thematic_access() with the new priority 10
    
    function add_header_aside($content) {
    	$content['Header Aside'] = array(
    		'admin_menu_order' => 50,
    		'args' => array (
    			'name' => 'Header Aside',
    			'id' => 'header-aside',
    			'before_widget' => thematic_before_widget(),
    			'after_widget' => thematic_after_widget(),
    			'before_title' => thematic_before_title(),
    			'after_title' => thematic_after_title(),
    		),
    		'action_hook'	=> 'thematic_header',
    		'function'		=> 'thematic_header_aside',
    		'priority'		=> 7,
    	);
    	return $content;
    }
    add_filter('thematic_widgetized_areas', 'add_header_aside');
    
    // And this is our new function that displays the widgetized area
    function thematic_header_aside() {
    	if (is_sidebar_active('header-aside')) {
    		echo thematic_before_widget_area('header-aside');
    		dynamic_sidebar('header-aside');
    		echo thematic_after_widget_area('header-aside');
    	}
    }
    
    //Add widget area for menu to header-box
    function add_header_menu_aside($content2) {
    	$content2['Header Menu Aside'] = array(
    		'admin_menu_order' => 51,
    		'args' => array (
    			'name' => 'Header Menu Aside',
    			'id' => 'header-menu-aside',
    			'before_widget' => thematic_before_widget(),
    			'after_widget' => thematic_after_widget(),
    			'before_title' => thematic_before_title(),
    			'after_title' => thematic_after_title(),
    		),
    		'action_hook'	=> 'thematic_header',
    		'function'		=> 'thematic_header_menu_aside',
    		'priority'		=> 8,
    	);
    	return $content2;
    }
    add_filter('thematic_widgetized_areas', 'add_header_menu_aside');
    
    // And this is our new function that displays the widgetized area
    function thematic_header_menu_aside() {
    	if (is_sidebar_active('header-menu-aside')) {
    		echo thematic_before_widget_area('header-menu-aside');
    		dynamic_sidebar('header-menu-aside');
    		echo thematic_after_widget_area('header-menu-aside');
    	}
    } 
    
    // add blog title logo instead
    function childtheme_override_blogtitle() { ?>
    
    	    		<div id="blog-title"><h1><img src="wp-content/themes/constantia-wines/images/constantia-wines-logo.png" alt="Constantia Wines Online Store"></h1></div>
    
    	    <?php }
    	    add_action('thematic_header','childtheme_override_blogtitle',3);
    
    function childtheme_override_blogdescription() {
    
    	    }
    	    add_action('thematic_header','childtheme_override_blogdescription',5);

    This left me with the issue of how to have different images in the header on static pages that are in the same category but using different page templates.
    I also wanted to have the ability to add other widgets to these widgets areas in the future. This is where I became stumped and decided that using conditionals to display different widgets in the header widget ready areas on the different pages would become a bit too complex and may limit me / my client in future.

    I decided it was best to create new thematic headers for the various templates I would be using.

    To start I created a new php file. I named it "new-headers.php" (any name can be used) and saved it to my library folder in my child theme along with the widget areas file I had created before to keep my functions.php file as clean as possible.

    into this file I copied , pasted and modified the thematic_header function (copies the thematic_header() for the header-extensions file in the library folder of thematic) :

    //add thematic header2
    // Used to hook in the HTML and PHP that creates the content of div id="header">
    function thematic_header2() {
        do_action('thematic_header2');
    } // end thematic_header
    
    // Functions that hook into thematic_header()
    
    	// Open #branding
    	// In the header div
    	if (function_exists('childtheme_override_brandingopen2'))  {
    	    function thematic_brandingopen2() {
    	    	childtheme_override_brandingopen2();
    	    }
    	} else {
    		function thematic_brandingopen2() {
    			echo "<div id=\"branding\">\n";
    		}
    	    add_action('thematic_header2','thematic_brandingopen2',1);
    	}	
    
    	// Create the blog title
    	// In the header div
    	if (function_exists('childtheme_override_blogtitle2'))  {
    	    function thematic_blogtitle2() {
    	    	childtheme_override_blogtitle2();
    	    }
    	} else {
    	    function thematic_blogtitle2() { ?>
    
    	    		<div id="blog-title"><span><a>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></a></span></div>
    
    	    <?php }
    	    add_action('thematic_header2','thematic_blogtitle2',3);
    	}
    
    	// Create the blog description
    	// In the header div
    	if (function_exists('childtheme_override_blogdescription2'))  {
    	    function thematic_blogdescription2() {
    	    	childtheme_override_blogdescription2();
    	    }
    	} else {
    	    function thematic_blogdescription2() {
    	    	$blogdesc = '"blog-description">' . get_bloginfo('description');
    			if (is_home() || is_front_page()) {
    	        	echo "\t\t<h1 id=$blogdesc</h1>\n\n";
    	        } else {
    	        	echo "\t\t<div id=$blogdesc</div>\n\n";
    	        }
    	    }
    	    add_action('thematic_header2','thematic_blogdescription2',5);
    	}
    
    	// Close #branding
    	// In the header div
    	if (function_exists('childtheme_override_brandingclose2'))  {
    	    function thematic_brandingclose2() {
    	    	childtheme_override_brandingclose2();
    	    }
    	} else {
    	    function thematic_brandingclose2() {
    	    	echo "\t\t</div><!--  #branding -->\n";
    	    }
    	    add_action('thematic_header2','thematic_brandingclose2',7);
    	}
    
    	// Create #access
    	// In the header div
    	if (function_exists('childtheme_override_access2'))  {
    	    function thematic_access2() {
    	    	childtheme_override_access2();
    	    }
    	} else {
    	    function thematic_access2() { ?>
    
    	    <div id="access">
    
    	    	<div class="skip-link"><a href="#content">"><?php _e('Skip to content', 'thematic'); ?></a></div><!-- .skip-link -->
    
    	    	<?php 
    
    	    	if ((function_exists("has_nav_menu")) && (has_nav_menu(apply_filters('thematic_primary_menu_id', 'primary-menu')))) {
    	    		echo  wp_nav_menu(thematic_nav_menu_args());
        		} else {
        			echo  thematic_add_menuclass(wp_page_menu(thematic_page_menu_args()));
        		}
    
    	    	?>
    
    		</div><!-- #access -->
    
    		<?php }
    	}
    
        add_action('thematic_header2','thematic_access2',9);
    
    // End of functions that hook into thematic_header()

    I then added the widgetized areas I required. It does not have to be the same as the original widget areas you added. I just changed them slightly.

    //add themtic header 2 widgetized area
    function remove_branding2() {
    		remove_action('thematic_header2','thematic_brandingopen2',1);
    
    }
    add_action('init', 'remove_branding2');
    
    // We wrap #branding and #header-aside with #header-box
    function childtheme_brandingopen2() { ?>
    	<div id="header_box">
        	<div id="branding">
    <?php }
    add_action('thematic_header2','childtheme_brandingopen2',1);
    
    // Now we need to close #header-box
    function header_box_close2() { ?>
    	<!-- close header-box --></div>
    <?php }
    add_action('thematic_header2', 'header_box_close2', 9);
    
    // And we add the unchanged thematic_access() with the new priority 10
    
    function add_header_aside2($content) {
    	$content['Header Aside Groot '] = array(
    		'admin_menu_order' => 60,
    		'args' => array (
    			'name' => 'Header Aside Groot',
    			'id' => 'header-aside2',
    			'before_widget' => thematic_before_widget(),
    			'after_widget' => thematic_after_widget(),
    			'before_title' => thematic_before_title(),
    			'after_title' => thematic_after_title(),
    		),
    		'action_hook'	=> 'thematic_header2',
    		'function'		=> 'thematic_header_aside2',
    		'priority'		=> 7,
    	);
    	return $content;
    }
    add_filter('thematic_widgetized_areas', 'add_header_aside2');
    
    // And this is our new function that displays the widgetized area
    function thematic_header_aside2() {
    	if (is_sidebar_active('header-aside2')) {
    		echo thematic_before_widget_area('header-aside2');
    		dynamic_sidebar('header-aside2');
    		echo thematic_after_widget_area('header-aside2');
    	}
    }
    
    //Add widget area for menu to header-box
    function add_header_menu_aside2($content2) {
    	$content2['Header Menu Aside Groot'] = array(
    		'admin_menu_order' => 61,
    		'args' => array (
    			'name' => 'Header Menu Aside Groot',
    			'id' => 'header-menu-aside2',
    			'before_widget' => thematic_before_widget(),
    			'after_widget' => thematic_after_widget(),
    			'before_title' => thematic_before_title(),
    			'after_title' => thematic_after_title(),
    		),
    		'action_hook'	=> 'thematic_header2',
    		'function'		=> 'thematic_header_menu_aside2',
    		'priority'		=> 8,
    	);
    	return $content2;
    }
    add_filter('thematic_widgetized_areas', 'add_header_menu_aside2');
    
    // And this is our new function that displays the widgetized area
    function thematic_header_menu_aside2() {
    	if (is_sidebar_active('header-menu-aside2')) {
    		echo thematic_before_widget_area('header-menu-aside2');
    		dynamic_sidebar('header-menu-aside2');
    		echo thematic_after_widget_area('header-menu-aside2');
    	}
    } 
    
    // add blog title logo instead
    function childtheme_override_blogtitle2() { ?>
    
    	    		<div id="blog-title"><h1><img src="wp-content/themes/constantia-wines/images/constantia-wines-logo.png" alt="Constantia Wines Online Store"></h1></div>
    
    	    <?php }
    	    add_action('thematic_header2','childtheme_override_blogtitle2',3);
    
    function childtheme_override_blogdescription2() {
    
    	    }
    	    add_action('thematic_header2','childtheme_override_blogdescription2',5);

    Now I had the new thematic header function that gave me new widgetized areas that I could add whichever widgets I wanted to it.

    I then in my functions.php file added the code :

    include('library/new-headers.php');

    At this stage the new widget ready areas are displaying in the widgets in the Dashboard. You can drag the widgets you want into these areas but they will not display on the pages where you want a different header.

    I then created a new header file.
    I simply copied the code of the header.php file in the thematic file area. I renamed the new file too " header-new.php". In the code I changed the thematic_header() to the new header function I created. In this case I changed it too thematic_header2();

    Having done this, it still will not change the header. You need to add the call for the new header in the post or page template file that you want the new header to be display on.

    I opened my template file and added the new from header-new.php to the get_header()
    it looked like this :

    get_header(new);

    Now any widgets I add to the new widget areas will be displayed in the header of the template I added the new header function too.

    I am not sure if this is the best way to create a new header file, it is a lot of work but does allow you the freedom to add all sorts different things to the different header functions you wish to create.

    Unfortunately you will then need to style the new header .

    I am sure there are easier ways to do this, however this way works without any errors or issues.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.