Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[
{
"key":"group_53db8f58e0148",
"title":"Custom Banner Title",
"fields":[
{
"key":"field_53dbd7b738f50",
"label":"Banner Title",
"name":"banner_title",
"prefix":"",
"type":"text",
"instructions":"Put your title here.",
"required":1,
"conditional_logic":0,
"wrapper":{
"width":"",
"class":"",
"id":""
},
"default_value":"",
"placeholder":"Please Enter Your Unique Title Here...",
"prepend":"",
"append":"",
"maxlength":55,
"readonly":0,
"disabled":0
},
{
"key":"field_53db901dfae31",
"label":"Banner Subtitle",
"name":"banner_subtitle",
"prefix":"",
"type":"textarea",
"instructions":"Put your banner subtitle here",
"required":0,
"conditional_logic":0,
"wrapper":{
"width":"",
"class":"",
"id":""
},
"default_value":"",
"placeholder":"Subtitle text here...",
"maxlength":125,
"rows":3,
"new_lines":"br",
"readonly":0,
"disabled":0
},
{
"key":"field_53db9960bf1b1",
"label":"Select a Background Image",
"name":"banner_background_image",
"prefix":"",
"type":"image",
"instructions":"Choose a custom image for this services header background.",
"required":1,
"conditional_logic":0,
"wrapper":{
"width":"",
"class":"",
"id":""
},
"return_format":"url",
"preview_size":"full",
"library":"all"
}
],
"location":[
[
{
"param":"page_template",
"operator":"==",
"value":"page_banner-header.php"
}
]
],
"menu_order":1,
"position":"acf_after_title",
"style":"default",
"label_placement":"left",
"instruction_placement":"field",
"hide_on_screen":""
}
]
<?php
/**
* Template Name: Banner Header
*/
// UPLOAD THIS ENTIRE FILE TO YOUR ACTIVE THEMES MAIN FOLDER (wordpress/wp-content/themes/mytheme/page_banner-header.php)
get_header();
/* ACF fields */
$banner_title = get_field('banner_title');
$banner_subtitle = get_field('$banner_subtitle');
$banner_background_image = get_field('banner_background_image');
?>
<div class="banner-area" style="background-size: cover; background-image: url('<?php echo $banner_background_image; ?>');">
<div class="banner-inner-wrap">
<h1><?php echo $banner_title; ?></h1>
<p><?php echo $banner_subtitle; ?></p>
</div>
</div><!-- // end custom banner -->
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<p><?php the_content(); ?></p>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
@bryanwillis
Copy link
Author

bryanwillis commented Oct 2, 2015

First, install Advanced Custom Fields: https://wordpress.org/plugins/advanced-custom-fields/. Second, navigate to http://your-site.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export and upload acf-banner-import.json. Third, add page_banner-header.php below to your active theme folder. Last, add a new page at (http://mbiold.wpengine.com/wp-admin/post-new.php?post_type=page) and chose your new template called "Banner Header". Now edit your fields, add your background, and thats it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment