Need help in creating splash intro page using custom page template

Question

Let’s go from the beginning.

First I’ll walk you through the enqueing of styles and scripts. In your functions.php file add:

add_action( 'wp_enqueue_scripts', 'splash_intro_scripts');

if ( ! function_exists( 'splash_intro_scripts' ) ){
    function splash_intro_scripts() {
        if (is_page_template('page-intro.php')) {
            wp_enqueue_style('google_font_1', 'https://fonts.googleapis.com/css?family=Arvo&subset=latin,latin-ext');
            wp_enqueue_style('google_font_2', 'https://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext');
            wp_enqueue_style('google_font_3', 'https://fonts.googleapis.com/css?family=Josefin+Slab&subset=latin,latin-ext');

            wp_enqueue_script( 'bootstrap',  get_stylesheet_directory_uri().'/js/bootstrap.js', array( 'jquery' ),'', false );
            wp_enqueue_script( 'blocs',  get_stylesheet_directory_uri().'/js/blocs.js', array( 'jquery' ),'', false );

            wp_enqueue_style( 'bootstrap_css', get_stylesheet_directory_uri() . '/css/bootstrap.css', array( ),'');
            wp_enqueue_style( 'fontawesome_css', get_stylesheet_directory_uri() . '/css/font-awesome.min.css', array( ),'');
            wp_enqueue_style( 'stylesplash_css', get_stylesheet_directory_uri() . '/css/style-splash.css', array( ),'');
        }
    }
}

Or, alternatively, find where your add_action( 'wp_enqueue_scripts',...); is located in the functions.php file, and add the if statement there.

Now, the font is loaded via google, so you just put the necessary fonts with the url in the wp_enqueue_style.

You’ll notice that my directories are a bit different than yours. You have /javascript/ I have /js/; you have /stylesheet/ I have /css/. Just change that to fit your theme (file structure). Then place all the necessary files except the jquery, because that is loaded by wordpress and there is no need to enqueue your own. That’s why I’ve added the dependency of bootstrap to array('jquery').

You’ll also need to put your fontawesome fonts folder inside the theme root folder.

Also the /img folder has to go to /stylesheet folder because your style-splash.css is inside /stylesheet folder (so it’s looking the images from that folder on).

blocks.js needs to be modified in order to work.

You need to wrap everything inside in

jQuery(function($){ });

So:

jQuery(function($){

    // Loading page complete
    $(window).load(function()
    {
        checkHero(); // Check hero height is correct
        animateWhenVisible();  // Activate animation when visible
    });

 ... all the way down ...

    $(document).on('click', '.next-lightbox, .prev-lightbox', function(e)
        {
            e.preventDefault();
            var idx = $('a[data-lightbox]').index(targetLightbox);
            var next = $('a[data-lightbox]').eq(idx+1) // Next

            if($(this).hasClass('prev-lightbox'))
            {
                next = $('a[data-lightbox]').eq(idx-1) // Prev
            }
            $('#lightbox-image').attr('src',next.attr('data-lightbox'));
            $('.lightbox-caption').html(next.attr('data-caption'));
            targetLightbox = next;

            // Handle navigation buttons (next - prev)
            $('.next-lightbox, .prev-lightbox').hide();

            if($('a[data-lightbox]').index(next) != $('a[data-lightbox]').length-1)
            {
                $('.next-lightbox').show();
            }
            if($('a[data-lightbox]').index(next) > 0)
            {
                $('.prev-lightbox').show();
            }
        });
    }

});

Otherwise you’ll have errors. And the page-intro.php

template file is just:

<?php

/*
Template Name: Splash Intro
*/

get_header();

?>

<div class="page-container">

<!-- Hero Bloc -->
<div id="hero-bloc" class="bloc hero bgc-white bg-walkway d-bloc">
    <div class="container bloc-sm hero-nav">
        <nav class="navbar row">
            <div class="navbar-header">
                <a class="navbar-brand" href="https://wordpress.stackexchange.com/questions/217693/index.html">Company</a>
                <button id="nav-toggle" type="button" class="ui-navbar-toggle navbar-toggle" data-toggle="collapse" data-target=".navbar-1">
                    <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse navbar-1">
                <ul class="site-navigation nav navbar-nav pull-right">
                    <li>
                        <a id="pl-undefined" href="#">Home</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="v-center">
        <div class="vc-content row">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-md-offset-3">
                        <div class="embed-responsive embed-responsive-4by3">
                            <iframe src="https://player.vimeo.com/video/106743683" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
                <h1 class=" mg-lg text-center">
                    It's all about the big hero strapline.
                </h1>
            </div>
        </div><a id="scroll-hero" class="btn-dwn" href="#"><span class="fa fa-chevron-down"></span></a>
    </div>
</div>
<!-- Hero Bloc END -->

<!-- Bloc Group -->
<div class="bloc-group">

<!-- bloc-2 -->
<div class="bloc bgc-white bloc-tile-2 bg-citysky d-bloc" id="bloc-2">
    <div class="container bloc-lg">
        <div class="row">
            <div class="col-sm-12">
                <h3 class="mg-md text-justify ">
                    <strong>BENEFITS</strong>
                </h3>
                <p class="text-justify ">
                    Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.
                </p>
            </div>
        </div>
    </div>
</div>
<!-- bloc-2 END -->

<!-- bloc-3 -->
<div class="bloc bgc-white bloc-tile-2 bg-citysky d-bloc" id="bloc-3">
    <div class="container bloc-lg">
        <div class="row">
            <div class="col-sm-12">
                <h3 class="mg-md ">
                    <strong>COLLABORATION</strong>
                </h3>
                <p class=" text-justify">
                    Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.
                </p>
            </div>
        </div>
    </div>
</div>
<!-- bloc-3 END -->
</div>
<!-- Bloc Group END -->

<!-- Footer - bloc-4 -->
<div class="bloc bgc-white bg-walkway d-bloc" id="bloc-4">
    <div class="container bloc-lg">
        <div class="row">
            <div class="col-xs-12 col-md-8 col-md-offset-2">
                <div class="col-sm-3 text-center">
                    <a class="social-lg" href="#" target="_blank"><span class="fa fa-twitter icon-lg"></span></a>
                </div>
                <div class="col-sm-3 text-center">
                    <a class="social-lg" href="#" target="_blank"><span class="fa fa-facebook icon-lg"></span></a>
                </div>
                <div class="col-sm-3 text-center">
                    <a class="social-lg" href="#" target="_blank"><span class="fa fa-dribbble icon-lg"></span></a>
                </div>
                <div class="col-sm-3 text-center">
                    <a class="social-lg" href="#" target="_blank"><span class="fa fa-instagram icon-lg"></span></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer - bloc-4 END -->
</div>
<!-- Main container END -->

<?php get_footer();

Basically all your html just pasted inside. And that’s it.

If you don’t want your header or footer to show you’ll have to modify it a bit. Either by changing the header.php and footer.php or by hiding them with css.

That’s it. I’ve placed everything like I described in my test twentysixteen theme, and it works.

Related Posts: