Skip to content

Instantly share code, notes, and snippets.

@bryanwillis
Last active October 2, 2015 04:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bryanwillis/1c171887e62635e5a74b to your computer and use it in GitHub Desktop.
Save bryanwillis/1c171887e62635e5a74b to your computer and use it in GitHub Desktop.
[
{
"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

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