Slides for WordPress Raleigh 2016

1. WordPress Beyond
Websites
Scott Saunders

2. Make no little plans
Daniel Burnham
They have no magic to stir men’s Blood

3. My Name
is Scott and I build
cool stuff.
and nobody pays me for it
Hello

4. Jobs

5. What I Do Now

7. What my job entails
• Do what the other 30 people on the office tell me to do
• Fix broken stuff - see above
• Find ways to make us more efficient - R&D
(do most of this at studioboro)
• Occasionally build a WordPress site
• Even more rarely draw something
• Almost never do video stuff
• Seldom if ever make cool stuff

8. Almond Encrusted with Sun dried Tomato and Feta
Jalapeño Cheddar brushed with Garlic Butter

11. EST. 1919EST. 1919

13. About the Site
• 405 Movies
• 111 Shorts
• 29 Serials
• 25,000+ Radio Show - over 13 months of audio

15. HEY KIDS
A N OT H E R F I N E P R O D U C T F R O M
MAKE YOUR OWN ROCKET RANGER
BE SURE TO Get your
parents
Permission before
using anything Sharp.
Each sheet MAKES TWO
ROCKET RANGERS.
WHY NOT SHARE ONE
WITH A BUDDY?
STUFF YOU”ll NEED
WORKS BEST IF PRINTED
ON CARD STOCK OR THICK
PAPER
SCISSORS
INSTRUCTIONS
FOLD ON THE
BOOT AREA ONLY,
WITH THE ROCKET RANGER
LOGO FACING UP.

18. Let’s Build some Stuff

19. codyhouse.co
unheap.com
tympanus.net/codrops
codepad.co
jsbin.com
codepen.com
Where I get cool stuff

20. Common Threads
• Custom Post Types
• Advanced Custom Fields PRO

22. YOU CAN BUILD ANYTHING

23. DPI TV

24. I wanted to make my
own TV Network
• Pseudo Streaming Movie Channel
• Includes Bumpers & Station IDs
• Randomly Loaded Group Based Content
• iOS Web Based App

25. What We’ll Need
• jQuery
• HTML5 Video Tag
• LESS
• MPEG 4 Based Video
• Advanced Custom Fields Pro - brief introduction to ACF Pro
• Custom Post Types
• Custom JQuery based video player script
• An understanding hosting provider or one that doesn't pay that much attention to what you’re
doing

26. HTML HEADER
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="http://www.dieselpunkindustries.com/wp-content/themes/dpi/images/icon-72.png" />
This makes it a web based iOS app

27. HTML
<video id="video" preload="auto" tabindex="0" controls="" >
<source src="http://www.dieselpunkindustries.com/films/TheBigCombo1955.mp4">
Your Fallback goes here
</video>
<ul id="playlist">
<li class="active">
<a href="http://www.dieselpunkindustries.com/films/TheBigCombo1955.mp4">
The Big Combo
</a>
</li>
<li>
<a href="http://www.dieselpunkindustries.com/films/quicksand.mp4">
Quicksand
</a>
</li>
<li>
<a href="http://www.dieselpunkindustries.com/films/He_Walked_By_Night.mp4">
He Walked by Night
</a>
</li>
<li>
<a href="http://www.dieselpunkindustries.com/films/KansasCityConfidential.mp4">
Kansas City Confidential
</a>
</li>
</ul>
https://jsbin.com/lukaq/

28. JavaScript
Video Player Script<script>
var video;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
video = $('#video');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
video[0].play();
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, video[0]);
});
video[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),video[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
video[0].load();
video[0].play();
}
</script>
https://jsbin.com/lukaq/

29. WordPress Stuff
// Our custom post type function dpitv
function create_posttype_dpitv() {
register_post_type( 'dpitv',
// CPT Options
array(
'labels' => array(
'name' => __( 'DPITV' ),
'singular_name' => __( 'DPITV' )
),
'public' => true,
'has_archive' => true,
'rewrite' => array('slug' => 'dpitv'),
)
);
}
add_action( 'init', 'create_posttype_dpitv' );
Create a Custom Post Type
Added theme’s functions.php file

30. WordPress Stuff
Create Flexible Content Using Advanced Custom Fields Pro

31. WordPress Stuff
ACF Flexiable Content with a Nested Repeater
Added theme’s archive-dpitv.php file
<?php while(has_sub_field("add_shows")): ?>
<?php if(get_row_layout() == "add_movie_group"): ?>
<?php the_sub_field("add_station_id"); ?>
<?php the_sub_field("id_title"); ?></a>
<?php while(has_sub_field('movie')): ?>
<?php the_sub_field('movie_thumb'); ?>
<?php the_sub_field('movie_url'); ?>
<?php the_sub_field('movie_title'); ?></a>
<?php endwhile; ?>
<?php elseif(get_row_layout() == "trailer"): ?>
<?php the_sub_field("trailer"); ?>">
<?php endif; ?>
<?php endwhile; ?>
Creating Flexible Content

32. WordPress Stuff
ACF Flexiable Content with a Nested Repeater
Added theme’s archive-dpitv.php file
<?php while(has_sub_field("add_shows")): ?>
<?php if(get_row_layout() == "add_movie_group"): ?>
<?php the_sub_field("add_station_id"); ?>
<?php the_sub_field("id_title"); ?></a>
<?php while(has_sub_field('movie')): ?>
<?php the_sub_field('movie_thumb'); ?>
<?php the_sub_field('movie_url'); ?>
<?php the_sub_field('movie_title'); ?></a>
<?php endwhile; ?>
<?php elseif(get_row_layout() == "trailer"): ?>
<?php the_sub_field("trailer"); ?>">
<?php endif; ?>
<?php endwhile; ?>
Two Layouts

33. WordPress Stuff
ACF Flexiable Content with a Nested Repeater
Added theme’s archive-dpitv.php file
<?php while(has_sub_field("add_shows")): ?>
<?php if(get_row_layout() == "add_movie_group"): ?>
<?php the_sub_field("add_station_id"); ?>
<?php the_sub_field("id_title"); ?></a>
<?php while(has_sub_field('movie')): ?>
<?php the_sub_field('movie_thumb'); ?>
<?php the_sub_field('movie_url'); ?>
<?php the_sub_field('movie_title'); ?></a>
<?php endwhile; ?>
<?php elseif(get_row_layout() == "trailer"): ?>
<?php the_sub_field("trailer"); ?>">
<?php endif; ?>
<?php endwhile; ?>
Repeater

34. WordPress Stuff
Wrap content into HTML Elements
Added theme’s archive-dpitv.php file
<?php while(has_sub_field("add_shows")): ?>
<?php if(get_row_layout() == "add_movie_group"): ?>
<li class="schedule"><a class="movieload" href="<?php the_sub_field("add_station_id"); ?>"><i class="icon-play"></i><?php
the_sub_field("id_title"); ?></a></li>
<?php while(has_sub_field('movie')): ?>
<li image="<?php the_sub_field('movie_thumb'); ?>">
<a class="movieload" href="<?php the_sub_field('movie_url'); ?>"><?php the_sub_field('movie_title'); ?></a>
<span class="info"></span>
</li>
<?php endwhile; ?>
<?php elseif(get_row_layout() == "trailer"): ?>
<li class="trailer"><a class="movieload" href="<?php the_sub_field("trailer"); ?>"></a></li>
<?php endif; ?>
<?php endwhile; ?>

35. WordPress Stuff
Create loop for custom post type
Added theme’s archive-dpitv.php file
<?php $args = array('post_type' => 'dpitv', 'posts_per_page' => -1, 'orderby'=>"rand");
$dpitv = new WP_Query( $args );
if( $dpitv->have_posts() ) {
while( $dpitv->have_posts() ) {
$dpitv->the_post();
?>
<!— ACF Stuff Goes Here —>
<?php
}
}
?>

36. WordPress Stuff
Add ACF Content with HTML Wrappers
Added theme’s archive-dpitv.php file
<?php $args = array('post_type' => 'dpitv', 'posts_per_page' => -1, 'orderby'=>"rand");
$dpitv = new WP_Query( $args );
if( $dpitv->have_posts() ) {
while( $dpitv->have_posts() ) {
$dpitv->the_post();
?>
<?php
}
}
?>
<?php while(has_sub_field("add_shows")): ?>
<?php if(get_row_layout() == "add_movie_group"): ?>
<li class="schedule"><a class="movieload" href="<?php the_sub_field("add_station_id"); ?>"><i class="icon-play"></i><?php the_sub_field("id_title"); ?></a></li>
<?php while(has_sub_field('movie')): ?>
<li image="<?php the_sub_field('movie_thumb'); ?>">
<a class="movieload" href="<?php the_sub_field('movie_url'); ?>"><?php the_sub_field('movie_title'); ?></a>
<span class="info"></span>
</li>
<?php endwhile; ?>
<?php elseif(get_row_layout() == "trailer"): ?>
<li class="trailer"><a class="movieload" href="<?php the_sub_field("trailer"); ?>"></a></li>
<?php endif; ?>
<?php endwhile; ?>

37. WordPress Stuff
Add ACF Content with HTML Wrappers
Added theme’s archive-dpitv.php file
<?php $args = array('post_type' => 'dpitv', 'posts_per_page' => -1, 'orderby'=>"rand");
$dpitv = new WP_Query( $args );
if( $dpitv->have_posts() ) {
while( $dpitv->have_posts() ) {
$dpitv->the_post();
?>
<?php
}
}
?>
<?php while(has_sub_field("add_shows")): ?>
<?php if(get_row_layout() == "add_movie_group"): ?>
<li class="schedule"><a class="movieload" href="<?php the_sub_field("add_station_id"); ?>"><i class="icon-play"></i><?php the_sub_field("id_title"); ?></a></li>
<?php while(has_sub_field('movie')): ?>
<li image="<?php the_sub_field('movie_thumb'); ?>">
<a class="movieload" href="<?php the_sub_field('movie_url'); ?>"><?php the_sub_field('movie_title'); ?></a>
<span class="info"></span>
</li>
<?php endwhile; ?>
<?php elseif(get_row_layout() == "trailer"): ?>
<li class="trailer"><a class="movieload" href="<?php the_sub_field("trailer"); ?>"></a></li>
<?php endif; ?>
<?php endwhile; ?>

38. Let’s have a look

39. 1939 WORLDS FAIR

40. What is it?
• Web based cross platform magazine type e-publishing solution
• Something that clients can’t break
• Works on everything
• Responsive
• Can be used as a iOS based sales tool
• Alternative to Adobe Spark and ReadyMag

41. What I used
• jQuery
• The Slide framework from Designmodo
• Advanced Custom Fields Pro
• Custom Post Types

42. What I used
http://designmodo.com/slides/

43. Theme
• Separate the HTML and JS add to WordPress Header,
Footer, and Index.php
• Create Flexible Content & Custom Fields with ACF
• All content will be created on a single page instead of using
custom post types
• “Punch holes” in the index.php and put inside the loop

44. Let’s have a look

45. Roku Channel

46. More Examples
dieselpunkindustries.com/singles/casablanca/
wpwebos.com/slideshow/