Equal Height Div

HTML

<flex-container>
    <flex-item>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
    </flex-item>
    <flex-item>
        <div>Forward</div>
    </flex-item>
</flex-container>

CSS

body {
    height: 300px;
    color: white;
}

flex-container {
    display: flex;                 /* primary flex container */
    flex-direction: row;           /* horizontal alignment of flex items (default value; can be omitted) */
    align-items: stretch;          /* will apply equal heights to flex items (default value; can be omitted) */
    height: 100%;
}

flex-item {
    display: flex;                 /* nested flex container */
    flex-direction: column;        /* vertical alignment of flex items */
    justify-content: center;       /* center flex items vertically */
    align-items: center;           /* center flex items horizontally */
}

flex-item:first-child {
    background-color: #a333c8;
    flex: 3;                       /* consume 3x available space than sibling;
                                      more details: http://stackoverflow.com/q/34644807/3597276 */
}

flex-item:last-child {
    background-color: #db2828;
    flex: 2;
}

Source

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

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>';
}
?>