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 - 16 through 30 (of 58 total)

  • Hi.
    Yes, you need to remove that code, since Thesis is already adding a class that matches your page’s slug to the body tag.
    Then, you need to follow the steps outlined in my previous comment:

    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');

    Thread Starter zadok22

    (@zadok22)

    Ok I reloaded it all, and the body class is showing:

    <body class=”custom navy-seaport-e”>

    . Not sure what i did to change that. But nevertheless, still nothing has changed

    Hi. I made a JSFiddle for you that works, i.e., it adds the function call to the body tag as long as it has the class navy-seaport-e assigned to it. Instead of the code that was provided to you, I added an alert command to test whether the function is run on load or not.
    However, I can not guarantee that the actual function that was provided to you works.

    Thread Starter zadok22

    (@zadok22)

    For some reason it crashes the site and I have to reload the “custom_functions.php file to revive the site. I really appreciate the help. I know this is turning out to be areal mystery.

    I am going to add all of what the client gave me and what he si trying to accomplish. You probably already know this, but here it goes:

    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):

    This is what is suppose to take place with that page: https://www.silverrhino.com/navy-seaport-e/

    Thanks in advance for any help.

    I get what your client is attempting to do. The pb is the following:
    1. You can’t modify the Thesis theme to hardcode the JS function call because you would lose those mods when the theme is updated;
    2. You can’t use a content filter because it is a page;
    3. You can’t use ob_start() for the same reason as in 1.;

    So your only two choices are:
    a. Do it through JS, in which case, you need to add the function call to the body tag before window.load() (on dom ready is fine, for instance);
    OR
    b. Create a separate page template for that page with a different name, so that it does not get overwritten when your client or you update Thesis.

    The problem with option a., which is what we’ve been trying thus far, is that the code provided by your client is pure JS, so it would be advisable to “convert” it to jQuery to integrate it with my code. Even in that case, I still don’t get what options[1] is referring to or why it is being called that way, since it is not defined in the code you provided and seems like it would lead to an error no matter the value stored under options[1]. To be more exact, this code does not work, but this one does.
    The problem with option b. is that you would need to create a custom page template and it is a considerate amount of work for such a small change.

    If you could tell me what is contained in the options object (keys and values) I might get it to work, but without that information it is like finding a needle in the dark.

    Thread Starter zadok22

    (@zadok22)

    Certainly.

    On the https://www.silverrhino.com/navy-seaport-e/ page, under the large ship and sub picture and under the four listed anchors is a drop down menu. It says viewable on the button “(SeaPort-e Task Orders – Click to Select)”. If you click that button to see if there is any task orders, only one option (or option 1) displays saying “No Task Orders as of May 24th 2012″… The client wants this to read with the current date if no task orders are actually ready saying for example: “No Task Orders as of July 19th 2012”

    Ok. Just to be perfectly clear:
    1. The drop-down would display task orders if any are available or set inside options[1];
    2. If none are available (i.e., options[1] is null or empty), the drop-down displays the message above with the current date (regardless of when the last task order was made/placed).
    Am I getting it right?

    This version shows both cases. In the final version, it would test whether options or options[1] is empty: if it’s not, the dropdown would display one option per key/value. If it is, it would display the default message with the current date.

    Thread Starter zadok22

    (@zadok22)

    Yeah I guess you have it correctly. It would probably be “TO- NUMBER” for different task orders coming through.

    I am excited to try this. Will be out of the home for a while and will be back in the afternoon to test.

    Thanks
    PS: we have to be there if not getting a lot closer

    Thread Starter zadok22

    (@zadok22)

    So Marventus, what is the most effective way to add that body class tag in WP using Thesis? How would you go about adding it?

    Also, I know we change the opening body tag, but should we include the closing body tag since their is more in the body than just this script?

    I want to get this part straight before I add the js to the Custom_functions.php

    Thx

    Hi zadok,

    I didn’t really get the questions you asked me in your last post:

    what is the most effective way to add that body class tag in WP using Thesis?

    If you are referring to the navy-seaport-e CSS class, Thesis already adds it by default to the opening <body> tag.

    I know we change the opening body tag, but should we include the closing body tag since their is more in the body than just this script?

    The body tag includes all the contents of your site, like so:

    <body class="some-class">
Contents
</body>

    There is no need to add anything to or to modify the closing body tag for my code to work. All the necessary JS code is added by the code that goes in custom_functions.php file, which basically calls the custom.js file to be included in the final HTML code.

    Do let me know if my answers are clear and if you need further information.

    Thread Starter zadok22

    (@zadok22)

    No I understand what the body tag is and does, but what is the most effective way to change the body class to the code you wrote?

    <body class=”navy-seaport-e”>
    <div class=”left”>
    <p>Task Orders exist:</p>
    <select id=”list1″>
    <option value=”default”>Seaport-e Task Orders – CLick to select</option>
    </select>
    <p>No Task Orders:</p>
    <select id=”list2″>
    <option value=”default”>Seaport-e Task Orders – CLick to select</option>
    </select>
    </div>
    </body>

    I know for the function code you wrote, I use custom_functions.php to implant it. If this was a static site adjusting this code would be a piece of cake, but what is the best way to alter the body text code (not CSS) in WP and Thesis? How do you integrate that html code in WP and Thesis?

    Ok, I understand. You want to know how to implement the JSFiddle I made in the site, correct?
    This is the closest version I can give you, where the object options is manually defined within the function. In your case, you would have to retrieve its contents from the database or wherever your client will be storing Task Order information. Basically, if the object is empty, it will display the default message (No Task Orders as of {Date}). If it’s not and if it contains keys, the code will run through the object and generate an <option> tag inside your <select> tag for each key/value pair contained, like so:

    <option value="key">value</option>

    Also, since you mentioned you want to call the script in the head, you would need to slightly adjust the code that goes in custom_functions.php to this:

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

    Thread Starter zadok22

    (@zadok22)

    I just want want to know where in WP do i add the body class code, because i cant just add it to the page in html. Because if I click on the text editor within WP, it is not giving you all of the HTML. So where do I add or adjust the “body” tag to be “body class” with the extra code? Are you understanding what I am trying to do here? (unless WP allows you to get at all the HTML it writes and I am not seeing it) I need to be able to do this before I can add the function js code to .php that you wrote.

    Second, they way you had the code before is what I need saying “No Task Orders as of [today’s date]”

    Thread Starter zadok22

    (@zadok22)

    Nevermind the second paragraph of what I said, just the first is my concern. I re read your post.

    All very much appreciated . Thanks!!!

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

Tags