0

I'm trying to create splash/intro page using custom page template in wordpress theme. I tried following the tutplus.com guide and it works perfectly. But I wanted somewhat modern web design and put a step ahead and used third party website design tools and created sample page and now I'm trying to add this as custom page template but can't make it work. Styles are missing and only text appears.

I'm attaching the custom page files which I've created using design tool and the image of the folder structure comparing with my wordpress theme contents.

Folder Structure

I'm not pro so please explain me in detail so that I can do it on my own.

With reply to @dingo_d the Code used in function.php

<?php
if (is_page_template('pageintro.php')) {
    add_action( 'wp_enqueue_scripts', 'splash_intro_scripts');
}

if ( ! function_exists( 'splash_intro_scripts' ) ){
    function splash_intro_scripts() {
        wp_enqueue_script( 'bootstrap', get_stylesheet_directory_uri() . '/javascript/bootstrap.js', array( 'jquery' ),'', true );
        wp_enqueue_script( 'jquerymin', get_stylesheet_directory_uri() . '/javascript/jquery-2.1.0.min.js', array( 'jquery' ),'', true );
        wp_enqueue_script( 'blocs', get_stylesheet_directory_uri() . '/javascript/blocs.js', array( 'jquery' ),'', true );
        wp_enqueue_style( 'bootstrap_css', get_stylesheet_directory_uri() . '/stylesheet/bootstrap.css', array( ),'');
        wp_enqueue_style( 'fontawesome_css', get_stylesheet_directory_uri() . '/stylesheet/font-awesome.min.css', array( ),'');
        wp_enqueue_style( 'stylesplash_css', get_stylesheet_directory_uri() . '/stylesheet/style-splash.css', array( ),'');

    }
}


Dingo,thank you for helping me.The steps and the code were really helpful for me. But still its not perfect and some thing is missing. I had to move the splash-style.css and img folder to the root to make it work. Though very near to the perfection now I think some scripts are not loading or theme problem. Here is the web page screenshot how it looks after the new changes.

enter image description here

7
  • This is the tutplus.com guide link.
    – Dee
    Feb 15, 2016 at 12:50
  • Why don't you just put those styles in your style.css??
    – dingo_d
    Feb 15, 2016 at 13:23
  • @dingo_d I tried that way but didn't work. Do I've to do anything after edit, like clearing cache etc.?
    – Dee
    Feb 15, 2016 at 13:26
  • You'd need to enque bootstrap and blocks.js on splash page, as well as font awesome. Basically you'd need to wrap those enqueue functions in is_page_template() check (with if() statement). So when you're on that page those styles and scripts will be loaded. You can also enqueue your own style that way, for that template specifically.
    – dingo_d
    Feb 15, 2016 at 13:36
  • @dingo_d You mean to say like said in this guide link. Right?
    – Dee
    Feb 15, 2016 at 13:41

1 Answer 1

0

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="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.

enter image description here

16
  • Sorry, one more question. I have to add the code to functions.php file. Right?
    – Dee
    Feb 15, 2016 at 13:58
  • Yes, put it in functions.php
    – dingo_d
    Feb 15, 2016 at 14:32
  • Sorry no luck. Still no styles only text.
    – Dee
    Feb 15, 2016 at 17:00
  • Please check my edited question. You can find the code I've used as advised.
    – Dee
    Feb 15, 2016 at 17:12
  • 1
    functions.php loads before the main query executes, so is_page_template will always be false when that code runs.
    – Milo
    Feb 15, 2016 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.