custom css and js on homepage in wordpress

Question

I have my html homepage with the header like below.

<!--referring to CSS-->

<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/animate.min.css">


<script type="text/javascript" src="http://updateyourbrowser.net/uyb.js"> </script> <!-- Update older browser -->
<!-- load the javascript library for the function in the script DOM-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--load the javascript library-->
<script src="js/external/jquery/jquery.js"></script>
<!--??what is this? we load the javascript library-->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<!-- Google Analytics script -->
<script>//Google Analytics script
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-61904449-3', 'auto');
  ga('send', 'pageview');

</script>


<!-- Facebook Pixel Code -->

<script>

!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;

n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,

document,'script','//connect.facebook.net/en_US/fbevents.js');



fbq('init', '384494271757075');

fbq('track', "PageView");</script>

<noscript><img height="1" width="1" style="display:none"

src="https://www.facebook.com/tr?id=384494271757075&ev=PageView&noscript=1"

/></noscript>

<!-- End Facebook Pixel Code -->


<script>


    // Scrolling function for the top navigation
// ??top left? which navigation? => when you click to go back to the top, to make an ease effect
    $(document).ready(function(){
        $('a').click(function(){
            $('html, body').animate({
                scrollTop: $( $(this).attr('href') ).offset().top
            }, {duration: 1500, easing: 'easeInOutExpo'});
            return false;
        }); 
    });



<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. -->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:i6,n6,n4,i4,i3,n3,n7,i7:default.js" type="text/javascript"></script>

I need to make it the homepage in a Wordpress Theme. I put this page as the homepage in theme by the method of https://www.youtube.com/watch?v=ClXmWsE7wo8, I am planning on using this method for the custom css and Js How to add custom css/js to just one page in WordPress?

but am having problem defining the custom CSS and JS.

In my homepage header, there are 1. css files called from outside 2. js called from outside 3. js defined

My 1st question is, for 1, and 2, how do I define the paths in wp_enqueue_script( 'your_script','path' ); wp_enqueue_style( 'your-style','path' );?

should i do

wp_enqueue_style( 'main.css','/tstandtest/css/main.css' );
		wp_enqueue_style( 'font-awesome.min.css','/tstandtest/font-awesome/css/font-awesome.min.css' );
		wp_enqueue_style( 'jquery-ui.css','/tstandtest/font-awesome/css/font-awesome.min.css' );
		wp_enqueue_style( 'font-awesome.min.css','//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' );

My 2nd question is, for the js that is defined in the html header, how do i make it work for as the homepage in wordpress, such as the google analytics script and the Facebook pixel script?

All that javascript should not be loaded in the header. It should be in the footer. — StudioTime
– StudioTime, Commented Apr 8, 2016 at 20:34

damo-s · Accepted Answer · 2016-04-08 21:30:04Z

First, you might want to use get_template_directory_uri() if you're not already to get the correct path to the theme assets:

// example
wp_enqueue_style('sage/css', get_template_directory_uri() . '/dist/styles/main.css', false, null);

Your second question I don't understand fully. If you've hard-coded the ga and facebook scripts it should just work. I would however let a plugin like this manage inserting the up-to-date ga code.

And, I didn't watch the video tutorial you linked by I'll assume it mentions you need to have <?php wp_head(); ?> placed immediately before the </head> tag: https://codex.wordpress.org/Function_Reference/wp_head and that you've removed all those referenced stylesheets and external script files from your template file.

You might also want to close the block of script that starts with:

<script>


    // Scrolling function for the top navigation
    // ??top left? which navigation? => when you click to go back to the top, to make an ease effect
    $(document).ready(function(){

And lastly, last I checked Wordpress requires you to specify the full name of the jQuery object because it is set by default to "no-conflict" mode.

To help with this I use this handy closure, passing in the full jQuery object:

(function ($) {

    // Now we can use $ within this closure

    $(document).ready(UTIL.loadEvents);

})(jQuery);

Collectives™ on Stack Overflow

custom css and js on homepage in wordpress

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related