add javascript inside a single post in exact position

Community Forums Forums General Discussion add javascript inside a single post in exact position

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  samw 1 year, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #40830

    samw
    Participant
    Post count: 53

    Hello fellow studiopress folk, wonder if anyone can assist

    I am trying to insert a small javascript banner image inside a single post in the agency theme. It needs to be in an exact position exactly the same as if I had been able to use html code to position the banner image correctly.

    Tried setting up custom shortcodes and adding the script value, but I then just get the custom shortcode field in this case JS  outputted to the post.

    I am not entirely sure that I added the correct code in functions.php to support iframes.

    I tried this, at the end of the file – not sure if thats the right place?

    Add the following code to the functions.php file of your theme:

    `function field_func($atts) {
       global $post;
       $name = $atts['name'];
       if (empty($name)) return;
    
       return get_post_meta($post->ID, $name, true);
    }
    
    add_shortcode('field', 'field_func');`

    Having used a few different plugins, these dont allow the required level of control as they output the Javascript banner to the header of the site and i just want to insert the js banner inside a single post.

    Im building locally on dev so no reference site.

    If  anyone can assist would be much appreciated.

    The JS code format  is <script type=’text/javascript’ src=’https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxx=180px&height=150px’></script> ​

    Thanks


    SEO & Online Marketing Consultant

    Metta3 | G+ | LinkedIn

    #40881

    essaysnark
    Participant
    Post count: 336

    Do you want this banner to show on every post? If so, then one way to do it would be to modify your theme’s single.php file using the genesis_before_post_content hook to show the JavaScript before the post content.

    If you’re saying you want this banner only on one specific post of the site, then you can do the same thing but use a conditional test with is_single(‘postID’), and then the hook.

    Is that enough to help you move forward?

    #40955

    samw
    Participant
    Post count: 53

    Hi

    Thanks for the reply.

    What I would like to do is use the banner and place it in a post exactly as if I had added an image. I have done this with no issue with all the ones written in HTML only but struggling with the JS one. Its just a 125×125 so thumbnail size & im trying to include it in post that includes all the other html ones.  It will only be going in a single post but I need to position it with the text. Hope that makes sense?

    If you can suggest how to achieve this, that would be great.

    Also, please could you let me know the code for your first suggestion to display on each post, so that I can use this for other sites.

    Many Thanks

     

     

     


    SEO & Online Marketing Consultant

    Metta3 | G+ | LinkedIn

    #41035

    essaysnark
    Participant
    Post count: 336

    Hi samw –

    The problem is the “position it with text” part – the easy solutions to this are to have the banner positioned at the beginning of all the content, or after, or some other static variation based on how the Genesis page is constructed. Check out this diagram for a guide to the locations where it’s easy to place a banner:

    http://my.studiopress.com/docs/visual-markup-guide/

    If your banner can go in any of those spots – or obviously in a widget – then this is cake: Get the Genesis Simple Hooks plugin. That makes it easier to add these types of customizations (and safer! no risk of taking down your site). There’s even an example here for inserting an add banner: http://www.studiopress.com/plugins/simple-hooks

    If you only want the banner on one specific post, then you’ll do something like this:

    1. Identify where on the page it should go using that Visual Markup Guide – for example, if you want it at the top of the main body content, then it’s the genesis_before_post_content hook.
    2. Find the section for your desired location in the Genesis Simple Hooks screen (located on the Genesis menu after you install the plugin).
    3. Paste in this code:
    [php]
    // places a JavaScript banner on Post #x
    <?php if (is_single(YOURPOSTIDHERE)) { ?>
    <script type="text/javascript">YOUR JAVASCRIPT HERE</script>
    <?php } ?>
    [/php]
    4. Mark the box that says Execute PHP on this hook?

    If you want the same JavaScript to appear on every post/page of your site, then you can simply paste in the JavaScript itself without the PHP parts at the top and bottom of that snippet, and don’t click the “Execute PHP” option.

    Here’s a more involved tutorial for this stuff:
    http://www.doncaprio.com/2012/11/how-to-add-google-adsense-html-codes-to-genesis-without-a-plugin.html

    If none of those positioning options work for you, then maybe this plugin will do it instead? I’ve never used it and it’s not Genesis-specific but I think it might do what you’re asking:
    http://wordpress.org/extend/plugins/css-javascript-toolbox/

    Hopefully one of these solutions will get you there! :-)

    #41154

    samw
    Participant
    Post count: 53

    Hi

    Thanks so much for taking the time to provide a very detailed reply.

    I have tried the plugin and that seems to do the trick with the exception of wrapping text, but a small issue.  It will be interesting to see how well it performs on a a live site, its debatable on dev.

    Cheers

     

     


    SEO & Online Marketing Consultant

    Metta3 | G+ | LinkedIn

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.