Skip to content

Instantly share code, notes, and snippets.

@tkjaergaard
Created December 3, 2013 11:55
Show Gist options
  • Select an option

  • Save tkjaergaard/7767958 to your computer and use it in GitHub Desktop.

Select an option

Save tkjaergaard/7767958 to your computer and use it in GitHub Desktop.
Worpress slider using nav_menu
<?php
// [...]
if( !function_exists('get_thumb_url') )
{
function get_thumb_url($size='thumbnail',$id=null)
{
$id = ( $id ?: get_post()->ID );
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($id), $size );
return $thumb['0'];
}
}
<?php
// [...]
wp_head();
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
// [...]
<?php
// [...]
include(__DIR__."/partials/slider.php");
.slider {
overflow: hidden;
}
.slider, .slider > div {
height: 380px;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.slider h2 {
color: #fff;
line-height: 380px;
height: 100%;
padding: 0 55px;
}
<?php
$items = wp_get_nav_menu_items( 5 );
if( count($items) > 0 ):
?>
<div class="slider cycle-slideshow" data-cycle-slides="> div">
<?php
foreach($items as $item):
$image = get_thumb_url('full', $item->object_id);
?>
<div class="slide" style="background-image: url(<?=$image;?>);">
<h2><?=$item->post_title;?></h2>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment