make more money with advanced custom fields - wordcampyyc 2015
TRANSCRIPT
Take full control of your edit screens
Cleaner & more predictable front-end
Charge more for your work!
NutshellIN A
<div class="row callout-wrap"> <div class="thirdcol first co-1"> <div class="callout-title"> Upcoming Events </div> <div class="callout-img"> <img src="images/callout-horse-white.png"> </div> <div class="callout-tagline-wrap"> <p>Spend a day at the</p> <p class="emph">races</p> <a class="callout-button">Race Schedule >></a> </div> </div> <div class="thirdcol co-2"> <div class="callout-title"> Farmer's Market </div> <div class="callout-img"> <img src="images/callout-wheat.png"> </div> <div class="callout-tagline-wrap"> <p>Now with longer</p> <p class="emph">hours</p> <a class="callout-button">Market Info >></a> </div> </div> <div class="thirdcol last co-3"> <div class="callout-title"> Available Services </div> <div class="callout-img"> <img src="images/callout-campfire.png"> </div> <div class="callout-tagline-wrap"> <p>We have so much</p> <p class="emph">more</p> <a class="callout-button">What we offer >></a> </div> </div> </div>
Callouts
Callouts
3
1
2
ACCESS TO YOUR THEME’S PHP
BASIC THEMING PRACTICES
BASIC-ER PHP SYNTAX
FIELD 1: BACKGROUND IMAGE
FIELD 2: HEADLINE
FIELD 3: TEXT
FIELD 4: CALL TO ACTION BUTTON TEXT
FIELD 5: BUTTON LINK
<div class=“inner-container” style=“background: url(/images/flamesbg.jpg) no-repeat center center; background-size: cover;”>
</div>
<img src=“/images/flames-logo.png” alt=“Flames logo”>
<h1>The Calgary Flames have made the playoffs!</h1>
<p>Tickets will be made available to non-season ticket holders via a lottery system. Sign up today!</p>
<a class=“button” href=“http://www.calgaryflames.com/tickets”> I WANT TO BE PART OF THE C OF RED </a>
FIELD 1: BACKGROUND IMAGE
FIELD 2: HEADLINE
FIELD 3: TEXT
FIELD 4: CALL TO ACTION BUTTON TEXT
FIELD 5: BUTTON LINK
Flames Background
flames_background
Flames Background
flames_background
Flames Headline
flames_headline
Flames Text
flames_text
Flames Button Text
flames_button_text
Flames Link
flames_link
<?php /*Template Name: Home*/ ?>
<?php get_header(); ?>
<div class="row"> <div class="page-content"> <h2> <?php the_title(); ?> </h2> <?php the_content(); ?> </div> </div>
<?php get_footer(); ?>
<?php /*Template Name: Home*/ ?>
<?php get_header(); ?>
<?php get_footer(); ?>
<div class="inner-container" style="background: url(/images/flames-bg.jpg)” no-repeat center center; background-size: cover;"> <img src="/images/flames-logo.png" alt="Flames logo"> <h1> The Calgary Flames have made the playoffs! </h1> <p> Tickets will be made available to non-season ticket holders via a lottery system. Sign up today! </p> <a class="button" href="http://www.calgaryflames.com/tickets"> I WANT TO BE PART OF THE C OF RED </a>
</div>
<?php the_field('field_name'); ?>
<?php the_title(); ?><?php the_content(); ?>
WORDPRESS TEMPLATE TAGS
ACF FIELD TAGS
<?php get_header(); ?>
<?php /*Template Name: Home*/ ?>
<?php get_footer(); ?>
<div class="inner-container" style="background: url(/images/flames-bg.jpg)” no-repeat center center; background-size: cover;"> <img src="/images/flames-logo.png" alt="Flames logo"> <h1> The Calgary Flames have made the playoffs! </h1> <p> Tickets will be made available to non-season ticket holders via a lottery system. Sign up today! </p> <a class="button" href="http://buildstudio.ca/acftalk/order-tickets"> I WANT TO BE PART OF THE C OF RED </a>
</div>
<?php get_header(); ?>
<?php /*Template Name: Home*/ ?>
<?php get_footer(); ?>
<div class="inner-container" style="background: url(<?php the_field('flames_background'); ?>)” no-repeat center center; background-size: cover;"> <img src="/images/flames-logo.png" alt="Flames logo"> <h1> <?php the_field('flames_headline'); ?> </h1> <p> <?php the_field('flames_text'); ?> </p> <a class="button" href="<?php the_field('flames_link'); ?>"> <?php the_field(‘flames_button_text'); ?> </a>
</div>
Beat the Canucks! Make them cry!
Woohoo!!!!!!!
We made the playoffs, baby!
Beat the Canucks! Make them cry!
Woohoo!!!!!!!
We made the playoffs, baby!
BRING ON THE DUCKS
Holy Crap We Did It
The Flames Have Advanced to the Second Round!
Holy Crap We Did It
The Flames Have Advanced to the Second Round
BRING ON THE DUCKS
FIELD 1: PLAYER PHOTO
FIELD 2: PLAYER
NAME
FIELD 3: PLAYER
POSITION
Players
Players
Flames Players
flames_players
Flames Players
flames_players
Flames Players
flames_players
Flames Players
flames_players
Player Photo
player_photo
Flames Players
Player Name
player_name
Flames Players
Player Position
player_position
Players
Flames Players
flames_players
Flames Players
flames_players
Add Player
Add Player
<div class="inner-container"> <img src="/images/flames-logo.png" alt="Flames logo"> <h1>Flames Players</h1> <div class="bio"> <img src="images/glencross.jpg"> <div class="bio-text"> <h2>Curtis Glencross</h2> <p>Left Wing</p> </div> </div>
<div class="bio"> <img src="images/hiller.jpg"> <div class="bio-text"> <h2>Jonas Hiller</h2> <p>Goaltender</p> </div> </div>
<div class="bio"> <img src="images/monahan.jpg"> <div class="bio-text"> <h2>Sean Monahan</h2> <p>Center</p> </div> </div>
</div>
if(get_field('repeater_field_name')): while(has_sub_field('repeater_field_name')): ?>
<?php
<!--subfield 1 content--> <?php the_sub_field('sub_field_1'); ?> <!--subfield 2 content--> <?php the_sub_field('sub_field_2'); ?>
<?php endwhile; ?> <?php endif; ?>
if(have_posts()) while(have_posts()): the_post(); ?>
<?php
<?php the_title(); ?> <?php the_content(); ?>
<?php endwhile; ?> <?php endif; ?>
ONE EXAMPLE OF THE WORDPRESS LOOP
THE ACF REPEATER LOOP
Players
Flames Players
flames_players
if(get_field('repeater_field_name')): while(has_sub_field('repeater_field_name')): ?>
<?php
<!--subfield 1 content--> <?php the_sub_field('sub_field_1'); ?> <!--subfield 2 content--> <?php the_sub_field('sub_field_2'); ?>
<?php endwhile; ?> <?php endif; ?>
if(get_field(‘flames_players')): while(has_sub_field('flames_players')): ?>
<?php
<!--subfield 1 content--> <?php the_sub_field('sub_field_1'); ?> <!--subfield 2 content--> <?php the_sub_field('sub_field_2'); ?>
<?php endwhile; ?> <?php endif; ?>
<div class="bio"> <img src="images/glencross.jpg"> <div class="bio-text"> <h2>Curtis Glencross</h2> <p>Left Wing</p> </div> </div>
if(get_field('flames_players')): while(has_sub_field('flames_players')): ?>
<?php
<?php endwhile; ?> <?php endif; ?>
<div class="bio"> <img src="<?php the_sub_field(‘player_photo'); ?>"> <div class="bio-text"> <h2><?php the_sub_field(‘player_name'); ?></h2> <p><?php the_sub_field(‘player_position’); ?></p> </div> </div>
if(get_field('flames_players')): while(has_sub_field('flames_players')): ?>
<?php
<?php endwhile; ?> <?php endif; ?>
if(get_field('flames_players')): while(has_sub_field('flames_players')): ?>
<?php endwhile; ?> <?php endif; ?>
<div class="bio"> <img src="<?php echo get_sub_field(‘player_photo'); ?>"> <div class="bio-text"> <h2><?php echo get_sub_field(‘player_name'); ?></h2> <p><?php echo get_sub_field(‘player_position'); ?></p> </div> </div>
<div class="inner-container"> <img src="/images/flames-logo.png" alt="Flames logo"> <h1>Flames Players</h1>
<?php get_header(); ?>
<?php get_footer(); ?>
<?php /*Template Name: Players*/ ?>
Players
Players
Players
Players
Curtis Glencross Left Wing
Players
Jonas Hiller Goaltender
Players
Sean Monahan Centre
Players
Players
Players
Players
Sam Bennett Centre
Global fields in a custom options area
Global fields in a custom options area
Calls to Action
Calls to Action
MoneyMAKE MORE
Edits are made when you want them, not when I
can do them
MoneyMAKE MORE
I can now be hit by a bus
MoneyMAKE MORE
One less thing to train staff
MoneyMAKE MORE
Hiring requirements just became a little more
relaxed
MoneyMAKE MORE
Say goodbye to the minimum charge
MoneyMAKE MORE
