Menu icon Foundation
FoundationPress custom header

Hi,
Im new to foundation and FoundationPress.

First would people recommend I make a static HTML site with foundation before trying to mod the FoundationPress theme in WP.

Secondally I have WP with FoundationPress running locally on my machine, I have altered some of the css to change the fonts but thats about it. I am trying to get the custom header to work. I have altered the custom header code to include a width and height so when im in the front end of wp i can upload an image and crop to that size however it is not displaying in the site any ideas?

Thanks

<?php 

// The Header-image 
 $defaults = array(

    'default-image'   => '',
    'width'           => 1000,
    'height'          => 200,
    'flex-width'      => false,
    'flex-height'     => false,
    'uploads'         => true,
    'random-default'  => false,
    'header-text'     => false,
    'default-text-color'  => '',
    'wp-head'             => '',
    'admin-head-callback' => '',
    'admin-preview-callback' => '',
);

 add_theme_support('custom-header', $defaults);
 
 ?>
            

         

foundationPresswordpressheader

Hi,
Im new to foundation and FoundationPress.

First would people recommend I make a static HTML site with foundation before trying to mod the FoundationPress theme in WP.

Secondally I have WP with FoundationPress running locally on my machine, I have altered some of the css to change the fonts but thats about it. I am trying to get the custom header to work. I have altered the custom header code to include a width and height so when im in the front end of wp i can upload an image and crop to that size however it is not displaying in the site any ideas?

Thanks

<?php 

// The Header-image 
 $defaults = array(

    'default-image'   => '',
    'width'           => 1000,
    'height'          => 200,
    'flex-width'      => false,
    'flex-height'     => false,
    'uploads'         => true,
    'random-default'  => false,
    'header-text'     => false,
    'default-text-color'  => '',
    'wp-head'             => '',
    'admin-head-callback' => '',
    'admin-preview-callback' => '',
);

 add_theme_support('custom-header', $defaults);
 
 ?>
            

         
Esa Rantanen almost 5 years ago

Hi Matthew,

this example is taken from Automattic, Inc.'s Underscores _s theme:

<?php if ( get_header_image() ) : ?>
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
  </a>
  <?php endif; // End header image check. ?>


http://underscores.me

Random Freeform over 4 years ago

Hmmm, I too don't see the header image on my latest install of Foundationpress.
I see it on an install I made a month or so ago though..
Is there something we're suppose to do - maybe this custom-header is a new thing?
Thanks for help!

Jonathan Urban over 4 years ago

Hi Matthew,

Here is a sample of page header I implemented in my own Wordpress Zurb Foundation Template:
http://picotto-wp.urbanjonathan.com/content-header/

You can configure directly page header and footer from the admin panel as you can see here:
http://picotto-wp.urbanjonathan.com/wp-content/uploads/2015/03/page-header.png

And here is the code i'm using:
PHP
<div class="<?php echo $section_id; ?>_section<?php echo $container_css_animation; ?>" data-animation="fadeIn" style="min-height:<?php echo $height; ?>px;padding-top:<?php echo $padding_top; ?>px<?php if ( intval( $padding_top ) == 0 ) echo '!important'; ?>;padding-bottom:<?php echo $padding_bottom; ?>px<?php if ( intval( $padding_bottom ) == 0 ) echo '!important'; ?>;background-color: <?php echo $bgcolor; ?>;color:<?php echo $color; ?>;background-image: url(<?php echo $image_url; ?>);">
<div data-animation="fadeInLeft" class="<?php echo $content_css_animation; ?>">
<?php echo do_shortcode( $message ); ?>
</div>
</div>