Custom snippets to upgrade instapress theme

customs.php

<?php
/**
 * Plugin Name: Instapress Customs
 * Plugin URI:  https://github.com/knife-media/customs
 * Description: Instapress Customs for lukin.blog
 * Author:      Anton Lukin
 * Author URI:  https://lukin.me
 * Version:     1.0
 * License:     MIT
 */

include_once WP_CONTENT_DIR . '/customs/index.php';

external.svg

<?xml version="1.0" ?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"  />
    <polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"  />
</svg>

index.php

<?php

if (!defined('WPINC')) {
    die;
}

/**
 * Replace useless menu classes with custom ones
 *
 * Applies to menu in primary theme location only
 */
add_filter( 'nav_menu_css_class', function( $atts, $item, $args ) {
    if( $args->theme_location === 'primary' ) {
        // Redefine classes array
        $classes = array( 'menu-item' );

        if( $item->current === true ) {
            $classes[] = 'current-menu-item';
        }
    }

    return $classes;
}, 10, 3 );

/**
 * Remove stupid menu id attribute
 */
add_filter( 'nav_menu_item_id', '__return_empty_string' );

/**
 * Add class to link menu items
 *
 * Applies to menu in primary theme location only
 */
add_filter( 'nav_menu_link_attributes', function( $atts, $item, $args ) {
    if ( $args->theme_location === 'primary' ) {
        $atts['class'] = 'menu-item-link';
    }

    return $atts;
},  10, 3 );

/**
 * Replace annoying post classes
 */
add_filter( 'post_class', function( $classes, $class, $post_id ) {
    if( ! is_admin() ) {
        $classes = array();

        if ( $class ) {
            if ( ! is_array( $class ) ) {
                $class = preg_split( '#\s+#', $class );
            }

            $classes = array_map( 'esc_attr', $class );
        }

        // Display post type
        $classes[] = 'type-' . get_post_type( $post_id );

        // Sticky for Sticky Posts
        if ( is_sticky( $post_id ) && is_home() ) {
            $classes[] = 'sticky';
        }
    }

    return $classes;
}, 10, 3 );

/**
 * Add is- prefix to all body classes
 */
add_filter( 'body_class', function( $wp_classes, $extra_classes ) {
    $body_classes = $wp_classes + $extra_classes;

    foreach ( $body_classes as &$body_class ) {
        // Skip no-customize-support class
        if ( 'no-customize-support' !== $body_class ) {
            $body_class = 'is-' . $body_class;
        }
    }

    // Remove link to avoid unexpected behavior
    unset( $body_class );

    return $body_classes;
}, 10, 2 );

/**
 * Remove useless emojis styles
 */
add_action( 'init', function() {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
} );


/**
 * Remove wordpress meta for security reasons
 */
add_action( 'init', function() {
    remove_action( 'wp_head', 'wlwmanifest_link' );
    remove_action( 'wp_head', 'rsd_link' );
    remove_action( 'wp_head', 'adjacent_posts_rel_link' );
    remove_action( 'wp_head', 'rest_output_link_wp_head' );
    remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
    remove_action( 'wp_head', 'wp_generator' );

    // Remove rest output from xmlrpc
    remove_action( 'xmlrpc_rsd_apis', 'rest_output_rsd' );

    // Remove rest output from header
    remove_action( 'template_redirect', 'rest_output_link_header', 11 );
} );

/**
 * Disable rest api for non-priveleged users
 */
add_filter( 'rest_authentication_errors', function( $access ) {
    if ( ! is_user_logged_in() ) {
        $message = __( 'REST API restricted to authenticated users' );

        return new WP_Error( 'rest_login_required', $message, array( 'status' => rest_authorization_required_code() ) );
    }

    return $access;
} );

/**
 * Disable post attachment pages and redirect to post parent if exists
 */
add_action( 'template_redirect', function() {
    global $post;

    if ( is_attachment() ) {
        if ( isset( $post->post_parent ) && absint( $post->post_parent ) > 0 ) {
            $url = get_permalink( $post->post_parent );
        } else {
            $url = home_url( '/' );
        }

        wp_redirect( esc_url( $url ), 301 );
        exit;
    }
} );

/**
 * Remove embeds script from footer
 */
add_action( 'wp_footer', function() {
    wp_deregister_script( 'wp-embed' );
} );

/**
 * Add meta tags to header
 */
add_action( 'wp_head', function() {
    $meta = array();

    $meta[] = sprintf(
        '<meta name="description" content="%s">',
        esc_attr( get_bloginfo( 'description' ) )
    );

    $meta[] = sprintf(
        '<meta property="og:description" content="%s">',
        esc_attr( get_bloginfo( 'description' ) )
    );

    $meta[] = sprintf(
        '<meta property="og:title" content="%s">',
        esc_attr( get_bloginfo( 'name' ) )
    );

    echo implode( PHP_EOL, $meta );
}, 5 );

/**
 * Update srcset images attribute
 */
add_filter( 'max_srcset_image_width', function( $max_width ) {
    return 1200;
}, 10, 2 );

/**
 * Register video post type
 */
add_action( 'init', function() {
    register_post_type( 'video', array(
        'labels'                => array(
            'name'              => __( 'Video', 'instapress' ),
            'singular_name'     => __( 'Add video', 'instapress' ),
            'add_new'           => __( 'Add video', 'instapress' ),
            'menu_name'         => __( 'Video', 'instapress' )
        ),
        'label'                 => __( 'Video', 'instapress' ),
        'supports'              => array( 'title', 'editor', 'author', 'comments' ),
        'hierarchical'          => false,
        'public'                => true,
        'show_ui'               => true,
        'show_in_menu'          => true,
        'menu_position'         => 10,
        'menu_icon'             => 'dashicons-editor-video',
        'show_in_admin_bar'     => true,
        'show_in_nav_menus'     => true,
        'can_export'            => true,
        'has_archive'           => true,
        'exclude_from_search'   => false,
        'publicly_queryable'    => true,
        'taxonomies'            => array( 'post_tag' ),
        'map_meta_cap'          => true,
        'show_in_rest'          => true,
    ) );
} );

/**
 * Remove categories for posts
 */
add_action( 'init', function() {
    unregister_taxonomy_for_object_type( 'category', 'post' );
} );

/**
 * Update thumbnails for video posts
 */
add_filter( 'post_thumbnail_html', function( $html, $post_id ) {
    if ( 'video' !== get_post_type( $post_id ) ) {
        return $html;
    }

    $content = get_post_field( 'post_content', $post_id );

    // Parse YouTube video id from url
    preg_match('#(?:youtube\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})#i', $content, $match);

    if ( empty( $match[1] ) ) {
        return $html;
    }

    $html = sprintf(
        '<div class="card-thumbnail-video" data-src="%s" style="background-image: url(%s)"></div>',

        sprintf(
            'https://www.youtube.com/embed/%s?autoplay=1',
            esc_attr( $match[1] )
        ),
        sprintf(
            'https://img.youtube.com/vi/%s/maxresdefault.jpg',
            esc_attr( $match[1] )
        )
    );

    return $html;
}, 10, 2 );


/**
 * Add custom styles
 */
add_action ('wp_enqueue_scripts', function() {
    wp_enqueue_style( 'instapress-customs', content_url('/customs/assets/styles.css'), array('instapress-styles'), '1.1' );
} );

/**
 * Add custom scripts
 */
add_action ('wp_enqueue_scripts', function() {
    wp_enqueue_script( 'instapress-customs', content_url('/customs/assets/scripts.js'), array(), '1.1', true );
} );

/**
 * Remove title from video archive
 */
add_filter( 'get_the_archive_title', function( $title ) {
    if( is_post_type_archive( 'video' ) ) {
        $title = null;
    }

    return $title;
} );

scripts.js

(function () {
  /**
   * Create bounce loader
   */
  function createLoader(thumbnail) {
    var loader = document.createElement('div');
    loader.classList.add('card-thumbnail-loader');
    thumbnail.appendChild(loader);

    var bounce = document.createElement('span');
    bounce.classList.add('card-thumbnail-bounce');
    loader.appendChild(bounce);

    return loader;
  }

  /**
   * Click listeners for video
   */
  const posts = document.querySelectorAll('.card-thumbnail-video[data-src]');

  posts.forEach(function(video) {
    video.addEventListener('click', function (e) {
      e.preventDefault();

      var thumbnail = video.parentNode;

      while (thumbnail.firstChild ) {
        thumbnail.removeChild(thumbnail.lastChild);
      }

      var iframe = document.createElement('iframe');
      var loader = createLoader(thumbnail);

      iframe.setAttribute('allow', 'autoplay');
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('allowfullscreen', true);
      iframe.setAttribute('src', video.dataset.src);

      iframe.addEventListener('load', function () {
        thumbnail.removeChild(loader);
      });

      thumbnail.appendChild(iframe);
    })
  });
})();

styles.css

.card.link-card .card-permalink {
  display: block;

  position: absolute;
  top: auto;
  left: auto;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 2;

  width: 1rem;
  height: 1rem;

  opacity: 0;

  background-image: url('../images/external.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  transition: opacity 0.25s;
}

.type-post .card.link-card:hover .card-permalink {
  opacity: 0.375;
}

.type-post .card.link-card .card-permalink:hover {
  opacity: 0.75;
}

.card.link-card:hover .card-thumbnail-image {
  filter: none;
}

.post.type-video .card.link-card .card-thumbnail {
  display: block;
  padding-top: 56.25%;
  overflow: hidden;
}

.post.type-video .card.link-card .card-thumbnail iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

.card-thumbnail-video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-size: cover;
}

.card-thumbnail-video::after {
  content: '';
  display: block;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  width: 100%;
  height: 100%;

  opacity: 0.75;

  background-image: url('../images/video-button.svg');
  background-position: 1rem 1rem;
  background-repeat: no-repeat;
  background-size: 2.75rem auto;

  cursor: pointer;
  transition: opacity 0.25s;
}

.card-thumbnail-video:hover::after {
  opacity: 1;
}

.card-thumbnail-video .card-thumbnail-image {
  display: none;
}

.card-thumbnail-loader {
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0);
}

.card-thumbnail-bounce {
  display: block;

  width: 3rem;
  height: 3rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.75);
  border-bottom-color: transparent;
  border-radius: 50%;

  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

video-button.svg