Instantly share code, notes, and snippets.
Last active Oct 2, 2015
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"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":"" | |
} | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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(); ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.