We might need a full width elements inside a container. here’s the css
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
WP Mobile Detect and PHP Snippet
We wouldn’t load mobile and desktop content twice.
WP Mobile Detect and Insert PHP plugins to achieve this.
if(wpmd_is_phone()):
echo(do_shortcode('[wbcr_php_snippet id=615]'));
else:
echo(do_shortcode('[wbcr_php_snippet id=378]'));
endif;
Query by Custom Taxonomy
<?php $the_query = new WP_Query( array(
'post_type' => 'available_colors',
'tax_query' => array(
array (
'taxonomy' => 'color_category',
'field' => 'slug',
'terms' => 'bag-colour',
)
),
) );
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<?php the_title();?><br />
<?php endwhile;
/* Restore original Post Data
* NB: Because we are using new WP_Query we aren't stomping on the
* original $wp_query and it does not need to be reset.
*/
wp_reset_postdata();
?>
Simple Slide up jQuery
A simple sliding up (usefull for footer menu on mobile, etc)
HTML
<h4 class="mobileOnly flip notactive">HELP</h4> <nav class="footer-navigation-wrapper panel" role="navigation"></nav>
jQuery
$(".flip").click(function(){
$(".panel").slideToggle("fast");
$('.notactive').removeClass('notactive').addClass('active');
e.preventDefault();
});
Slick Slider – the last carousel you’ll ever need!!
Found a slick jquery for carousel slider – that we think it’s better then owl carousel that we ussually use.
https://github.com/kenwheeler/slick
function createSlick(){
jQuery(".slick").not('.slick-initialized').slick({
autoplay: true,
arrows: true,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
}
,{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 1100,
settings: 'unslick'
}
]
});
}
createSlick();
$(window).on( 'resize', createSlick);
Simple accordion with toggle indicator
<!-- Start of Template -->
<div class="hideContentWrap">
<h4 class="hideContentHeader">Some Hidden Content</h4>
<div class="hideContent">
<img src=
"http://www.wecreatemedia.com/wp-content/uploads/2014/07/34.jpg"></div>
</div>
<!-- End of Template -->
<div class="hideContentWrap">
<h4 class="hideContentHeader">More Hidden Content</h4>
<div class="hideContent">
<img src=
"http://www.wecreatemedia.com/wp-content/uploads/2014/07/44.jpg"></div>
</div>
<div class="hideContentWrap">
<h4 class="hideContentHeader">Props</h4>
<div class="hideContent">
<img src=
"http://www.wecreatemedia.com/wp-content/uploads/2014/07/54.jpg">
<p>Developement by Brian Bustos at <a href="http://www.umkc.edu/"
target="_blank">UMKC</a><br>
Background by <a href="https://subtlepatterns.com/" target=
"_blank">Subtle Patterns</a><br>
Photography by <a href="http://wecreatemedia.com" target=
"_blank">WeCreate Media</a><br></p>
</div>
</div>
$(document).ready(function() {
$('.hideContentHeader').prepend('<span class="indicator">+</span> ');
$('.hideContentHeader').click(function() {
$(this).parent().find('.hideContent').slideToggle("slow");
});
$('.hideContentHeader').click(function() {
$(this).toggleClass("active");
});
$('.hideContentHeader').click(function() {
$(this).find('.indicator').toggleClass("rotate");
});
});
/* /////////////////////////////////////////////////////////////////////
// Not Important CSS
/////////////////////////////////////////////////////////////////////*/
body {
background: url(https://subtlepatterns.com/patterns/black_lozenge.png) #000;
padding-top: 100px;
}
h1 {
color: #fff;
text-align: center;
}
p {
color: #fff;
text-align: center;
margin-bottom: 10px;
}
img {
width: 100%;
height: auto;
}
a {
color: #fff;
}
/* /////////////////////////////////////////////////////////////////////
// Important CSS
/////////////////////////////////////////////////////////////////////*/
.hideContentWrap {
width: 600px;
margin: 0 auto 10px;
}
.hideContentHeader {
display: block;
width: 90%;
color: #fff;
padding: 1%;
margin: 0 auto;
background: #FC4349;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.hideContentHeader.active {
color: #000;
background: #6DBCDB;
}
h4.hideContentHeader:hover {
cursor: pointer;
}
.hideContent {
display: none;
width: 92%;
height: auto;
margin: 0 auto;
}
.indicator {
display: inline-block;
padding: 5px;
text-align: center;
font-size: 20px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.indicator.rotate {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
}
Source: https://codepen.io/robotballoon/pen/FADHc
List Custom Taxonomy
Display your custom taxonomy
<select>
<option>Find Factory:</option>
<?php
$terms = get_the_terms($post->ID, 'store');
$count = count($terms);
if ( $count > 0 ){
foreach ( $terms as $term ) {
echo "<option>" . $term->name . "</option>";
}
}
?>
</select>
Outside loop:
<?php
$terms = get_terms('media_cat','hide_empty=0&orderby=id');
foreach ( $terms as $term ) {
if( ++$count > 60 ) break; // number of tags here.
echo '<li class="'.$term->slug.'"><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
}
?>
ACF + Owl Carousel with custom navigation
Combo on creating a carousel using ACF and Owl carousel
<div class="owl-carousel">
<?php if(get_field('car_images')):$counter = 0; ?>
<?php while( have_rows('car_images') ): the_row();
$color_name = get_sub_field('color_name');
$car_image = get_sub_field('car_image');
?>
<div class="carColorItem">
<div data-hash="color-<?php echo $counter;?>">
<h3><?php echo $color_name; ?></h3>
<img src="<?php echo $car_image; ?>" alt="" />
</div>
</div>
<?php $counter++; endwhile; ?>
<?php endif; ?>
</div>
<div class="carNav">
<?php if(get_field('car_images')):$counter = 0; ?>
<?php while( have_rows('car_images') ): the_row();
$color_thumb = get_sub_field('color_thumb');?>
<a href="#color-<?php echo $counter;?>" class="<?php if (!$counter) {?>active<?php }?>">
<img src="<?php echo $color_thumb; ?>" alt="" />
</a>
<?php $counter++; endwhile; ?>
<?php endif; ?>
</div>
</div>
The jQuery:
$('.owl-carousel').owlCarousel({
loop:false,
dots:true,
items:1,
URLhashListener:true,
startPosition: 'URLHash'
})
$('.carNav').on('click', 'a', function() {
$('.carNav a.active').removeClass('active');
$(this).addClass('active');
});
Insert PHP Code to the wordpress post/pages
a good plugin – especially if you use visual composer, but want to do custom query at the page.
Sample code to display custom query
query_posts('post_type=gallery&order=DESC');?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<li>
<a href="<?php the_permalink();?>"><?php the_title(); ?></a>
</li>
<?php endwhile; else: ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
Quick snippets for ACF Repeater
Code to display subfield of a repeater field in ACF
<?php if(get_field('slider_image')): ?>
<?php while(has_sub_field('slider_image')): ?>
<img src="<?php the_sub_field('image'); ?>" alt="" />
<?php endwhile; endif; ?>
Show only has subfield?
<?php while(has_sub_field('car_types')): ?>
<div class="col-sm-12">
<div class="col-sm-6">
<?php the_sub_field('name'); ?>
</div>
<div class="col-sm-6">
<?php the_sub_field('price'); ?><br />
<?php
$name = get_sub_field('brochure_file');
if (get_sub_field('brochure_file')) {
?>
<a href="<?php the_sub_field('brochure_file'); ?>">Download Brochure</a>
<?php
} else {
echo '';
}
?>
</div>
</div>
<?php endwhile; endif; ?>
Repeater on Option
<?php while(has_sub_field('top_banner', 'option')): ?>
<div>
<a href="<?php the_sub_field('link'); ?>" target="_blank">
<img src="<?php the_sub_field('image'); ?>" /></a>
</div>
<?php endwhile; ?>