How to locate current page and change the css in wordpress?

4 comments

1. Generally WordPress will add a class to the body tag that will allow you to select by page. For example for your first rule you could do in your CSS

   .page-id-10 .xoxo {
       display:none;
   }
   

   Check your body tag on the page you are wanting to change to find out what classes you can use. You could also use it in your jQuery selectory

   Log in to Reply

2. If you are using WordPress, then this might be the solution:

   jQuery(function (jQuery) {
       var pathname = location.href;
   
       if (pathname === "http://wwww.findx.se/?page_id=10") {
           jQuery('.xoxo').css({
               display: 'none'
           });
           jQuery('div#footer').css({
               display: 'none'
           });
       }
       if (pathname === "http://www.findx.se/?page_id=9") {
           jQuery('.xoxo').css({
               display: 'none'
           });
           jQuery('div#footer').css({
               display: 'none'
           });
       }
       if (pathname === "http://www.findx.se/?page_id=8") {
           jQuery('.xoxo').css({
               display: 'none'
           });
           jQuery('div#footer').css({
               display: 'none'
           });
           jQuery('#header').hide();
       }
   });
   

   I solved many jQuery not defined problems with this.

   And beside that, WordPress adds a class on the body tag. Just Firebug it and see which class it is in. Than you can style it the way you want. That is much easier actually.

   Log in to Reply

3. I use following in my functions.php to add the page slug/name in the body tag

   function add_body_class( $classes )
   {
       global $post;
       if ( isset( $post ) ) {
           $classes[] = $post->post_type . '-' . $post->post_name;
       }
       return $classes;
   }
   add_filter( 'body_class', 'add_body_class' );
   

   As a result I get following (I’m using pretty URL)

   class="single single-post postid-1281 single-format-standard post-taste-javascript-php-part-2-php-5-4"
   

   in this cas, post-taste-javascript-php-part-2-php-5-4 is my page slug and postid-1281 is id, so I can use

   .post-taste-javascript-php-part-2-php-5-4 .xoxo {
       display:none;
   }
   

   Or I can use

   .postid-1281 .xoxo{
       display:none;
   }
   

   So, I doubt (but not sure) that, it could be

   .pageid-10 .xoxo {
       display:none;
   }
   

   Or, you can use the code snippet (given above) in functions.php and just change

   $classes[] = $post->post_type . '-' . $post->post_name;
   

   to (to add your page id)

   $classes[] = $post->post_type . '-id' . $post->ID;
   

   As a result, it will add something like page-id10 in your body tag and you can use

   .page-id10 .xoxo {
       display:none;
   }
   

   Also, alternatively, you can use

   var pathname = location.href;
   var id = pathname.split('=');
   if(id[1] == 10 ){
       $('.xoxo').css('display', 'none');
   }
   

   You can check the body tag of the given example right here.

   Update :

   jQuery(function ($) {
       // ...
   });
   

   should be (Pass the jQuery as argument)

   (function($) {
       // your code goes here and can use $
       $('.xoxo').css('display', 'none'); // '$' will work now
   })( jQuery );
   

   Also, make sure, jQuery is loaded, using alert(typeof jQuery);. if, it shows undefined then jQuery is not loaded, so load it. Check wp_enqueue_script for more.

   Log in to Reply

4. Call your own jQuery JavaScript file, AFTER the wp_head function () located in the header.php file (WordPress).

   Log in to Reply