Other

// =============================================================
// ENQUEUE SCRIPTS
// =============================================================
function add_custom_scripts() {
    wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/assets/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

// =============================================================
// ENQUEUE SCRIPTS FOR MODAL
// =============================================================
function storefront_enqueue_style() {
    wp_enqueue_style('modal_css', '//cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css', false);
}
add_action( 'wp_enqueue_scripts', 'storefront_enqueue_style' );
 
function storefront_enqueue_script() {
    wp_enqueue_script('modal_jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js', false);
    wp_enqueue_script('modal_js', '//cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js', false);
}
add_action( 'wp_enqueue_scripts', 'storefront_enqueue_script' );

HTML

<!--HTML EMBEDDED INTO THE DOCUMENT-->
<div id="modal1" class="modal">
  <h2>Hello World</h2>
  <a href="#" rel="modal:close">Close</a>
</div>

<!--LINK TO OPEN THE MODAL-->

<p><a href="#modal1" rel="modal:open">Open Modal</a></p>

function custom_loop_with_pagination() {
    global $post;

    $sticky = get_option( 'sticky_posts' );
 
    $args = array(
        'paged'          => get_query_var( 'paged' ),
        
        'sticky_first' => array(
            'post_type'      => 'post', 
            'category_name'  => 'program',
            'post__in' => $sticky, 
            'posts_per_page' => 2,  
        ),
        'last_published' => array(
            'post_type'      => 'post', 
            'category_name'  => 'program',
            'post__not_in' => $sticky, 
            'posts_per_page' => 10,
            
        )
        
    );
 
    global $wp_query;
    $wp_query = new WP_Query( $args );
    
    require 'templates/loop/grid.php';

}
add_action( 'genesis_loop', 'custom_loop_with_pagination' );
add_action( 'genesis_before_loop', 'genesis_posts_nav' );
 
 
genesis();

<video controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.ogg" type="video/ogg">
        <track label="English" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>
      </video>
      
      <h2>Audio Example</h2>
      
      <audio controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
      </audio>

const $pdfs = $('a[href$=".pdf"]');
$pdfs.on('click', function(event){
  //check if checkbox has been checked 
  //if zero checkboxes are checked 
  if ($(':checked').length === 0){
    //prevent download of document 
    event.preventDefault();
    //alert the user 
    alert('Please check the box to allow PDF downloads.');
  }
});

//Select every second link
const $odd = $('a:odd');

//Select all secure links
const $secureLinks = $('a[href^="https://"]');

//Select all links that ends with .pdf
const $pdfs = $('a[href$=".pdf"]');

//Add target blank attribute to every secure link
$secureLinks.attr('target', '_blank');

//Make downloadable pdf-s instead of open it in the browser
$pdfs.attr('download', true);

This tutorial provides the steps to overlay site header (automatically sized to half the viewport height) on featured image on single posts and the image fading away on scrolling down with fading in when scrolling up in Genesis.

Step 1

Add the following in child theme’s functions.php:

// Register custom image size for hero/featured image on single posts. 
add_image_size( 'single-hero', 1600, 1050, true );

Regenerate thumbnails.

Step 2

Create a file named single-post.php in the child theme directory having the following:

add_action( 'genesis_before_header', 'custom_header_open' );
/**
 * Add opening tag for div.featured-header.
 */
function custom_header_open() {
    // if there is no featured image, abort.
    if ( ! has_post_thumbnail() ) {
        return;
    }

    // get the URL of featured image.
    $image_url = genesis_get_image( 'format=url&size=single-hero' );

    // add opening div tag.
    printf( '<div class="featured-header" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(%s);">', $image_url );
}

add_action( 'genesis_after_header', 'custom_header_close' );
/**
 * Add closing tag for div.featured-header.
 */
function custom_header_close() {
    // if there is no featured image, abort.
    if ( ! has_post_thumbnail() ) {
        return;
    }

    echo '</div>';
}

add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
/**
 * Load single-post.js.
 */
function sk_enqueue_scripts() {
    wp_enqueue_script( 'single', get_stylesheet_directory_uri() . '/js/single-post.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
}

genesis();

Step 3

Create a file named single-post.js in child theme’s js directory having the following:

jQuery(function($){
    // the number of pixels from the top of viewport for .site-inner.
    var $offset = $('.site-inner').offset().top;

    $( window ).on('scroll', function() {
        if ( $( window ).scrollTop() > 0 ) {
            var $opacity = $( window ).scrollTop() / $offset;

            $('.featured-header').css('opacity', 1 - $opacity);
        } else {
            $('.featured-header').css('opacity', '1');
        }
    });
});

Step 4

Add the following in child theme’s style.css:

.featured-header {
    height: calc(100vh / 2);
    color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
}

.featured-header .site-title a,
.featured-header .site-title a:focus,
.featured-header .site-title a:hover,
.featured-header .genesis-nav-menu > li > a {
    color: #fff;
}

.featured-header .site-header,
.featured-header .nav-primary {
    background-color: transparent;
}

.featured-header .nav-primary {
    border-top: none;
}

@media only screen and (max-width: 1023px) {
    .featured-header .menu-toggle,
    .featured-header .sub-menu-toggle {
        color: #fff;
        background-color: transparent;
    }

    .featured-header .menu-toggle {
        border-top: none;
    }
}

References:

How to fade away an element when scrolling down and fade it back when scrolling up in WordPress

http://thenewcode.com/644/Fade-A-Responsive-Background-Image-On-Scroll

// =========================================================================
// CUSTOM POST TYPE TAXONOMY
// =========================================================================

function create_custom_post_types_taxonomy() {
    register_taxonomy(
        'POST_TYPE_cat',
        'POST_TYPE',
        array(
            'label' => __( 'Kategória' ),
            'rewrite' => array( 'slug' => 'POST_TYPE-type' ),
            'hierarchical' => true,
            'show_admin_column' => true,
        )
    );
}
add_action( 'init', 'create_custom_post_types_taxonomy' );

Bootsnipp

CodePen

Echo taxonomy slug

<?php foreach (get_the_terms(get_the_ID(), 'your_taxonomy') as $cat) {
   echo $cat->slug;
}
?>

Echo taxonomy name

<?php foreach (get_the_terms(get_the_ID(), 'your_taxonomy') as $cat_name) {
   echo $cat_name->name;
}
?>

$('.header').sticky({
  getWidthFrom: '.container',
  responsiveWidth: true
});

$('.header').on('sticky-start', function () {
  $('.description').html('We build <strong>great</strong> apps');
});

$('.header').on('sticky-end', function () {
  $('.description').html('We build apps');
});

$('.work').sticky({
  topSpacing: 60,
  getWidthFrom: '.container',
  responsiveWidth: true
});
$('.work').on('sticky-start', function() {
  $(this).append(' <a href="mailto:email@website.com" class="email-text">Email&nbsp;us</a>');
});
$('.work').on('sticky-end', function() {
    $('.email-text').remove();
});

Redirect 301 /old-page.html /new-page.html