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
-
Hi.
Following an example from the documentation (link), you can use this function in yourcustom_functions.phpfile:// 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-eclass to the body in the home page only. If you need to target a different page, you would need to replaceis_home()withis_page($id)where$idis 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?
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 tothesis_body_classesinstead ofbody_class:add_filter('thesis_body_classes','my_class_names');Ok thanks marventus.
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.
Theis_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) ) {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, 🙂
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: http://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 dateThe 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.
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
onloadattribute to your page (and only to that page), do this:1. Create a folder inside your theme’s directory, create a file called
custom.jsinside 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!
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.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’);
The topic ‘Adding body_class for just one page’ is closed to new replies.