braginteractive

<?php
/**
 * Get the ID of a YouTube Video
**/ 
function helpwp_youtube_id($url){
	/*
	* type1: http://www.youtube.com/watch?v=9Jr6OtgiOIw
	* type2: http://www.youtube.com/watch?v=9Jr6OtgiOIw&feature=related
	* type3: http://youtu.be/9Jr6OtgiOIw
	*/

braginteractive

<?php 
  	$url = get_post_meta( get_the_ID(), 'helpwp_url', true);
	$yt_id = helpwp_youtube_id($url);

	if ($url != '') : ?>
		<a href="<?php the_permalink(); ?>">
			<img alt="<?php the_title(); ?>" class="card-img-top" src="https://img.youtube.com/vi/<?php echo esc_html( $yt_id ); ?>/maxresdefault.jpg">
		</a>

	<?php else : ?>

braginteractive

<div class="entry-video">
	<?php 
	$url = get_post_meta( get_the_ID(), 'helpwp_url', true);
	$yt_id = helpwp_youtube_id($url); 

	if ($url != '') : ?>
		<div class="embed-responsive embed-responsive-16by9">
			<iframe class="embed-responsive-item" src="//www.youtube.com/embed/<?php echo esc_html( $yt_id ); ?>" allowfullscreen></iframe>
		</div>

braginteractive

/* Posts Navigation */
.pagination {
	margin-top: 30px;
	justify-content: center;

	.page-numbers {
		border: 1px solid rgba(0,0,0,.2);
		padding: 8px;
		border-radius: 3px;

braginteractive

<?php
/**
 * Customize the Read More Button
**/
function helpwp_modify_read_more_link() {
    return '<a class="more-link btn btn-sm btn-primary" href="' . get_permalink() . '">View Tutorial</a>';
}
add_filter( 'the_content_more_link', 'helpwp_modify_read_more_link' );

braginteractive

<?php
/**
* Add Class to Tags
*/
function helpwp_add_tag_class($links) {
    return str_replace('<a href="', '<a class="tag btn btn-sm btn-primary" href="', $links);
}
add_filter( "term_links-post_tag", 'helpwp_add_tag_class');

braginteractive

<span class="navbar-text">
  <i class="fa fa-search" aria-hidden="true"></i>
</span>

braginteractive

<div class="search-bar">
		<div class="container">
			<div class="row">
				<div class="col-md-8 offset-md-2">
					<?php get_search_form(); ?>
				</div><!--  .col-md-8 -->
			</div><!--  .row -->
		</div><!--  .container -->
	</div><!--  .search-bar -->

braginteractive

.search-bar {
	display: none;
	padding: 2rem 0;
	background-color: $brand-success;
	box-shadow: inset 0px 1px 30px -2px rgba(0,0,0,0.75);
}

.fa-search {
	&:hover {
		color: rgba(255, 255, 255, 0.75);

braginteractive

jQuery(document).ready(function($){
	$('.fa-search').on('click', function() {
		$('.search-bar').slideToggle();
	});
});