Adding body_class for just one page

  • Hello, I built a site for a client recently, but they just ask me to add a body_class tag that would say: <body class=”custom navy-seaport-e” onload=”setSPETODate()”>. They gave me a script for the head tag, but this was easy to add and is done. This would be breeze for me with regular html. But can anyone tell me how to do this in PHP? (please be thorough as I dont know how to write PHP) Also I am using Thesis the latest version. So if anyone can help through:

    • Thesis
    • WP
    • plugin or widget

    That would be great!
    Thanks in advance

Viewing 15 replies - 1 through 15 (of 58 total)

  • Hi.
    Following an example from the documentation (link), you can use this function in your custom_functions.php file:

    // Add custom class to home page
function my_class_names($classes) {
	if ( is_home() ) {
		$classes[] = 'custom navy-seaport-e';
	}
	return $classes;
}
add_filter('body_class','my_class_names');

    That code would add the custom navy-seaport-e class to the body in the home page only. If you need to target a different page, you would need to replace is_home() with is_page($id) where $id is the numeric ID of the page in question.
    For more information about conditional tags, see Conditional_Tags.

    Cheers!

    WordPress comes with a function that would do just that, no?

    see here.

    I hope I’m not mistaking that the above filter modifies the body_class() function so you’ll need to include this function in your body tag as so:

    <body <?php body_class();?>></body>

    @patv: the Thesis theme should already include that function. He could also hardocde the class in the html but the problem with the Thesis theme is that it gets updated very often so it is better not to modify core theme files in any way.
    That is the reason why I suggested the code below.
    @zadok22: if the code does not work for some reason, you could try to hook the function to thesis_body_classes instead of body_class:

    add_filter('thesis_body_classes','my_class_names');

    Ok thanks marventus.

    Thread Starter zadok22

    (@zadok22)

    Hello thanks for all the help. I implemented the code, but I want to make sure I did it correctly, because it is not the home page. The name of the specific page is: “navy-seaport-e”. So I altered your code to say below:

    // Add custom class to navy-seaport-e page
    function my_class_names($classes) {
    if ( is_navy-seaport-e() ) {
    $classes[] = ‘custom navy-seaport-e’;
    }
    return $classes;
    }
    add_filter(‘body_class’,’my_class_names’);

    *************
    THE ORIGINAL INSTRUCTIONS GIVEN TO ME INCLUDE ADDING SOME SCRIPT TO THE HEAD SECTION ALONG WITH THE SCRIPT FOR THE BODY CLASS AND SAID:

    “If you put this in the <head> section:

    <script type=”text/javascript” language=”javascript”>
    function setSPETODate() {
    var dt = new Date();
    var dtStr = (dt.getMonth() + 1) + ‘/’ + dt.getDate() + ‘/’ + dt.getFullYear();
    document.getElementById(“listSeaPorteTaskOrders”).options[1].text = “(No Task Orders as of: ” + dtStr + “)”;
    }
    </script>

    And change the <body> tag to this:

    <body class=”custom navy-seaport-e” onload=”setSPETODate()”>

    the dropdownlist will always display the current date for option 1 (until we actually can change the list to a TO identifier):”

    **************

    I USED A PLUGIN FOR ADDING THE SCRIPT TO THE HEAD SECTION BUT DONT KNOW IF THEIR IS A MORE PRACTICAL WAY TO DO THIS. I APPRECIATE ANY FURTHER ASSISTANCE. THANKS.

    Forget about that JS script: it requires for you to edit your header.php file which is really not recommended when using a theme such as Thesis.
    As for the code I shared, you did not implement it exactly as I suggested.
    The is_page() WP core function so you can’t change it’s name.
    What you need to do is go to your Admin Panel –> Pages — All Pages, and under the Navy-seaport-e page title, hover the mouse over the Edit link.
    When you do, the URL of that page will be displayed at the bottom left of your browser. In that URL, look for post=[number]. That number is the page ID. Copy it and paste it in the indicated location below:

    // Add custom class to home page
function my_class_names($classes) {
	if ( is_page(ID_NUMBER_GOES_HERE) ) {
		$classes[] = 'custom navy-seaport-e';
	}
	return $classes;
}
add_filter('thesis_body_classes','my_class_names');

    So, for instance, if your page ID is 24, that line would read:

    if ( is_page(24) ) {

    Thread Starter zadok22

    (@zadok22)

    Thanks for getting back so quickly. Sorry to cut into your Holiday. I will do this soon and get back wit the results. Thx

    Sorry to cut into your Holiday.

    Huh? I wish I was, but no, I’m not on Holiday nor is it a Holiday where I’m from, ??

    Thread Starter zadok22

    (@zadok22)

    Ok Marventus, so I added the way you said into the custom_functions.php: it looks like:

    // Add custom class to home page
    function my_class_names($classes) {
    if ( is_page(32) ) {
    $classes[] = ‘custom navy-seaport-e’;
    }
    return $classes;
    }
    add_filter(‘thesis_body_classes’,’my_class_names’);

    However, it is still not working to produce the current date. Here is the link if you want to inspect: https://www.silverrhino.com/navy-seaport-e/

    Hi.
    The class is being added twice: once by Thesis, and once by our function.
    That’s because the name of your page matches exactly the CSS class you want to add, so I guess you don’t really need that function I shared after all.

    However, it is still not working to produce the current date

    The code I shared was never meant to do any of that. If that’s what the other code that was given to you was for, then you should re-insert it.

    Thread Starter zadok22

    (@zadok22)

    So the original body tag code to be inserted was:

    <body class=”custom navy-seaport-e” onload=”setSPETODate()”>

    How do I insert this to the navy seaport-e page?

    Hi. Sorry for the delay: I hadn’t seen your latest reply. To add the onload attribute to your page (and only to that page), do this:

    1. Create a folder inside your theme’s directory, create a file called custom.js inside that folder, and place this code inside:

    $(document).ready(function() {
    $("body.navy-seaport-e").attr('onload', 'setSPETODate()');?
});

    2. Open your custom_functions.php file, and past this code inside, before the last closing PHP tag (?>`):

    function sr_add_onload_attr() {
    wp_register_script('sr-add-onload-attr', get_bloginfo('stylesheet_directory').'/js/custom.js', array('jquery'), '1.0', true);
    wp_enqueue_script('sr-add-onload-attr');
}
add_action('wp_enqueue_scripts', 'sr_add_onload_attr');

    That should do it.

    Cheers!

    Thread Starter zadok22

    (@zadok22)

    Hey Marventus, sorry i was away on vacation.

    I did all of the above to the T, but still nothing has changed.

    I tested the code above in a WP installation running thesis and it worked. Also, I still see that the <body> tag in your Navy Seaport page still has the same class added twice: navy-seaport-e. That might be affecting the script.

    Thread Starter zadok22

    (@zadok22)

    How would you go about editing the body class tag that I have listed twice? This is such a mystery in WP and Thesis, though I apparently did do it before.

    Also, in the function code that you have instructed me to add above, I assume it is with removing the previous function that was given before, Is that correct?

    // Add custom class to home page
    function my_class_names($classes) {
    if ( is_page(ID_NUMBER_GOES_HERE) ) {
    $classes[] = ‘custom navy-seaport-e’;
    }
    return $classes;
    }
    add_filter(‘thesis_body_classes’,’my_class_names’);

Viewing 15 replies - 1 through 15 (of 58 total)
  • The topic ‘Adding body_class for just one page’ is closed to new replies.

Tags