Place the following in your functions file or theme plugin:
It will register your post type, “slides”, and enqueue your javascripts, “jquery”, “custom” and “flexslider” that can be found further down.
// Enqueueing all the java script in a no conflict mode
function ineedmyjava() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2', true);
wp_enqueue_script('jquery');
// Custom Theme scripts...
wp_register_script(
'custom',
get_bloginfo('template_directory') . '/js/custom.js',
array('jquery') );
wp_enqueue_script('custom');
// Homepage slider 'flexslider' scripts...
wp_register_script(
'flexslider',
get_bloginfo('template_directory') . '/js/flexslider.js',
array('jquery') );
wp_enqueue_script('flexslider');
}
}
add_action('wp_enqueue_scripts', 'ineedmyjava');
/* Custom Post Types */
add_action('init', 'js_custom_init');
function js_custom_init()
{
// Register the Slides Custom Post Type
$labels = array(
'name' => _x('Slides', 'post type general name'),
'singular_name' => _x('Slide', 'post type singular name'),
'add_new' => _x('Add New', 'Slide'),
'add_new_item' => __('Add New Slide'),
'edit_item' => __('Edit Slides'),
'new_item' => __('New Slide'),
'view_item' => __('View Slides'),
'search_items' => __('Search Slides'),
'not_found' => __('No Slides found'),
'not_found_in_trash' => __('No Slides found in Trash'),
'parent_item_colon' => '',
'menu_name' => 'Slides'
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => false,
'hierarchical' => false,
'menu_position' => 20,
'supports' => array('title','editor','custom-fields','thumbnail'),
);
register_post_type('slides',$args);
} // close custom post type
These are the javascript files you need to include in a folder, “js” in you theme. The other points to google’s hosted version.
Custom.js
flexslider.js
Flexslider.js
In a theme file, where ever…
This Custom Post Type includes the Advanced Custom Fields Plugin to use an image uploader, set to “image url”. This is in it’s simplest form. You can add more Custom Fields if you like and add them between the list item.
<?php
// Query the Post type Slides
$querySlides = array(
'post_type' => 'slides',
);
// The Query
$the_query = new WP_Query( $querySlides );
?>
<?php
// The Loop
if ( $the_query->have_posts()) : ?>
<div class="flexslider">
<ul class="slides">
<?php while ( $the_query->have_posts() ) : ?>
<?php $the_query->the_post(); ?>
<li>
<div class="banner">
<?php if(get_field('slide_image')!="") { ?>
<img src="<?php the_field('slide_image'); ?>" />
<?php } ?>
</div><!-- home banner pic -->
</li>
<?php endwhile; ?>
</ul><!-- slides -->
</div><!-- .flexslider -->
<?php endif; // end loop ?>
<?php wp_reset_postdata(); ?>
Finally, some css to get started.
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face {
font-family: 'flexslider-icon';
src:url('fonts/flexslider-icon.eot');
src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
url('fonts/flexslider-icon.woff') format('woff'),
url('fonts/flexslider-icon.ttf') format('truetype'),
url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
width: 100%;
display: block;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
/*margin: 0 0 60px;
background: #fff;
border: 4px solid #fff;*/
position: relative;
/* -webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
box-shadow: 0 1px 4px rgba(0,0,0,.2);
zoom: 1;*/
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.flexslider .slides {
zoom: 1;
}
.carousel li {
margin-right: 5px;
}
/* Direction Nav */
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0,0,0,0.8);
text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.flex-direction-nav .flex-prev {
/* left: -50px;*/
left: 10px;
opacity: 0.7;
}
.flex-direction-nav .flex-next {
/*right: -50px;*/
right: 10px;
text-align: right;
opacity: 0.7;
}
.flexslider:hover .flex-prev {
opacity: 0.7;
left: 10px;
}
.flexslider:hover .flex-next {
opacity: 0.7;
right: 10px;
z-index: 1000;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 40px;
display: inline-block;
content: '\f001';
}
.flex-direction-nav a.flex-next:before {
content: '\f002';
}
/* Pause/Play */
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a.flex-play:before {
content: '\f003';
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -20px;
text-align: center;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0,0,0,0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
-o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0,0,0,0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: 10px;
}
.flex-direction-nav .flex-next {
opacity: 1;
right: 10px;
}
}