• 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 - 31 through 45 (of 58 total)
  • I understand perfectly. There is no need to manually “insert” anything in the HTML. Here is how this works:
    1. The code I gave you for custom_functions.php will call the JS script into the page’s HTML.
    2. When the document is ready, the JS script will add the onload attribute to your body tag if it has the class navy-seaport-e (this is added automatically by Thesis so you don’t need to do anything for that to happen);
    3. When the window is done loading (happens after document ready), it will call the function your client provided you with and populate the drop-down with the desired text.

    As for the drop-down menu text, "No Task Orders as of [today's date]" is what will appear when there are no Task Orders to display, but what happens if there are? How are you planning to store and retrieve that information? That’s when my question comes in. Follow?

    Edit: your second post came in after my reply to your first one.

    Thread Starter zadok22

    (@zadok22)

    Got it. Sorry I was so slow there, for I was not seeing how to inject that, but now I see that I don’t have too. That’s a relief! I am great with HTML and CSS, but js, action-scripting and .php are different animals.

    So for clarification:

    • I need both the last code you wrote in js fiddle and the code from my client?
    • Or just the code you wrote with the data of task orders (if available)?

    Also, how can we ensure that the closing tags don’t crash my site (I don’t see on the custom_functions.php editor for Thesis any closing tags, so should I worry about that?)

    need both the last code you wrote in js fiddle and the code from my client?

    No, I included your client’s code in my version, so just add mine to custom.js. However, my code will always display the default message in the drop-down since the options object contains dummy info. In order to address that, I would need to know how you are planning on storing and retrieving task order information when available.

    I don’t see on the custom_functions.php editor for Thesis any closing tags, so should I worry about that?)

    No, if there aren’t any, it should be fine.

    Thread Starter zadok22

    (@zadok22)

    Thanks Marventus

    I will test this later tonight. I will be in touch!

    appreciated

    I just realized I didn’t use the same ID for the drop-down list as you do in your site. Here it is again with the right ID.
    Just in case, you only need to copy the JS code into custom.js, not the HTML.
    Cheers!

    Thread Starter zadok22

    (@zadok22)

    ok, thanks, I will apply later today. I am dealing with a series of interruptions.

    Thread Starter zadok22

    (@zadok22)

    Ok so I added this code to the custom_functions.php:
    [ Moderator Note: Please post code or markup snippets between backticks or
    use the code button. Don’t use bockquote, the code will format poorly. ]

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

    And I added this to the custom.js:

    function setSPETODate() {
        var dt = new Date();
        var dtStr = (dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear();
        var currDate = '<option value="">(No Task Orders as of: ' + dtStr + ')</option>';
        var options = {1 : 'Order 1', 2 : 'Order 2', 3 : 'Order 3'};
        if  ( options ) {
            $.each(options, function(key, value) {
                $("#listSeaPorteTaskOrders").append($("<option/>", {
                    value: key,
                    text: value
                }));
            });
        } else {
            $("#listSeaPorteTaskOrders").append(currDate);
        }
    }
    $(document).ready(function() {
        $("body.navy-seaport-e").attr('onload', 'setSPETODate()');
    });

    I didn’t bother with the little CSS. But still everything is the same. What I am missing here?

    I looked at your page after your changes. The script is being included, but the URI where it is supposed to located is throwing a 404 error:
    https://www.silverrhino.com/wp-content/themes/thesis_185/js/custom.js
    Did you upload the custom.js script in that directory?

    Thread Starter zadok22

    (@zadok22)

    The custom.js is in the same directory as custom_functions.php and custom.css inside the “custom” folder inside of thesis_185

    In that case, you need to change the code inside custom_functions.php to this:

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

    Change is on the 2nd line.

    Thread Starter zadok22

    (@zadok22)

    I made the change, but the mystery continues

    Hey, sorry for the delay. I’ll take a look and get back to you.
    Cheers!

    Thread Starter zadok22

    (@zadok22)

    No problem, I really appreciate the help

    I just took a look. The reason why it is not working is because your client’s code was targeting the drop-down list (<select> tag) by its id, which is not specified in the actual HTML.
    So, look for this line:

    <select name="listSeaPorteTaskOrders">

    and change it to either this:

    <select id="listSeaPorteTaskOrders">

    or this (if you would rather keep the <name> attribute):

    <select id="listSeaPorteTaskOrders" name="listSeaPorteTaskOrders">

    Thread Starter zadok22

    (@zadok22)

    On the custom.js file, i am not seeing it as you say with a select tag. What I see is:

    $($(“#listSeaPorteTaskOrders”).append($(“<option/>”

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