CSS styles does not apply PROPERLY into Wordpress custom theme

Question

I'm learning how to create custom Wordpress theme from scratch and till now everything was worked fine except the CSS stylesheet which does not seem to be working properly.

Please take a look at these two print screens:

1: index.html

(A basic theme which contains html)

2: index.php

(After converting the index.html to index.php and removing header and footer parts for making a Wordpress theme)

But I know where the problem came from. Its because of this javascript file which I tried to load it in index.php via functions.php but it does not work out. I named this file inline.js:

$(document).ready(function(){
                init_masonry();
            });

            function init_masonry(){
                var $container = $('.item_container');
                $container.imagesLoaded( function(){
                    $container.masonry({
                        itemSelector : '.item',
                        "gutter": 18,
                        isFitWidth: true
                    });
                });
            }

            $(document).ready(function(){
                $('a[href*=#]:not([href=#])').click(function() {
                    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                        if (target.length) {
                            $('html,body').animate({
                                scrollTop: target.offset().top
                            }, 1000);
                            return false;
                        }
                    }
                });
            });

And this is the functions.php:

<?php 
function catalog(){
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/offcanvas.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/inline.js', array( 'jquery' ) );
}
add_action('wp_enqueue_scripts','catalog');
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu'),
));
?>

I have enqueued the inline.js script like others but it does not work. I also tried refreshing the page by pressing Ctrl+F5 but nothing changed.

So do you have any suggestion to this problem ?

Answer 1

You have the same handle "custom-script" for all the scripts which you have added in enqueue script as per the wordpress functionality every script and style must have unique handle.

Changing the handle can solve your problem.

Also as of what wordpress says: When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode, which means you cannot use the common $ alias. You must use the full jQuery instead. Alternately, place your code using the $ shortcut inside a noConflict wrapper. Eg.

jQuery( document ).ready( function( $ ) {

 [ your code goes here ]
} );

In your JS file you have added function for a[href] outside document ready function. That may work..