The document discusses using a content management system (CMS) to create customizable call-out sections on a website. It provides examples of global fields that could be set up as options to customize things like background images, headlines, text, call-to-action buttons, and button links for different call-out sections. It also provides examples of code for rendering call-outs using the values from the global fields.

7. Take full control of your edit screens

8. Cleaner & more predictable front-end

9. Charge more for your work!

10. Nutshell
IN A

11. <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

12. Callouts

14. 3
1
2
ACCESS TO YOUR THEME’S PHP
BASIC THEMING PRACTICES
BASIC-ER PHP SYNTAX

18. FIELD 1: BACKGROUND IMAGE
FIELD 2:
HEADLINE
FIELD 3:
TEXT
FIELD 4:
CALL TO ACTION
BUTTON TEXT
FIELD 5:
BUTTON LINK

19. <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>

24. FIELD 1: BACKGROUND IMAGE
FIELD 2:
HEADLINE
FIELD 3:
TEXT
FIELD 4:
CALL TO ACTION
BUTTON TEXT
FIELD 5:
BUTTON LINK

27. Flames Background
flames_background

28. Flames Background
flames_background

29. Flames Headline
flames_headline

30. Flames Text
flames_text

31. Flames Button Text
flames_button_text

32. Flames Link
flames_link

35. <?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(); ?>

37. <?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>

45. <?php the_field('field_name'); ?>
<?php the_title(); ?>
<?php the_content(); ?>
WORDPRESS TEMPLATE TAGS
ACF FIELD TAGS

46. <?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>

47. <?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>

53. Beat the Canucks! Make them cry!
Woohoo!!!!!!!
We made the playoffs, baby!

55. Beat the Canucks! Make them cry!
Woohoo!!!!!!!
We made the playoffs, baby!

56. BRING ON THE DUCKS
Holy Crap We Did It
The Flames Have Advanced to the Second Round!

57. Holy Crap We Did It
The Flames Have Advanced to the Second Round
BRING ON THE DUCKS

58. FIELD 1:
PLAYER
PHOTO
FIELD 2:
PLAYER
NAME
FIELD 3:
PLAYER
POSITION

60. Players

61. Players
Flames Players
flames_players

62. Flames Players
flames_players

63. Flames Players
flames_players

64. Flames Players
flames_players

65. Player Photo
player_photo

66. Flames Players
Player Name
player_name

67. Flames Players
Player Position
player_position

68. Players
Flames Players
flames_players

69. Flames Players
flames_players
Add Player

70. Add Player

72. <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>

73. 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

74. Players
Flames Players
flames_players

75. 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; ?>

76. 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; ?>

77. <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; ?>

78. <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; ?>

79. 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*/ ?>

81. Players

82. Players

83. Players

84. Players
Curtis Glencross Left Wing

85. Players
Jonas Hiller Goaltender

86. Players
Sean Monahan Centre

88. Players

90. Players

91. Players

92. Players
Sam Bennett Centre

102. Global fields in a custom options area

103. Global fields in a custom options area

104. Calls to Action

105. Calls to Action

106. Money
MAKE MORE

107. Edits are made when you
want them, not when I
can do them
Money
MAKE MORE

108. I can now be hit by a bus
Money
MAKE MORE

109. One less thing to train staff
Money
MAKE MORE

110. Hiring requirements just
became a little more
relaxed
Money
MAKE MORE

111. Say goodbye to the
minimum charge
Money
MAKE MORE