Community Forums › Forums › Archived Forums › General Discussion › add javascript inside a single post in exact position
Tagged: java script in single post
- This topic has 4 replies, 2 voices, and was last updated 11 years, 9 months ago by
samw.
-
AuthorPosts
-
May 14, 2013 at 3:35 am #40830
samw
MemberHello 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
May 14, 2013 at 11:14 am #40881essaysnark
ParticipantDo 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?
May 15, 2013 at 12:54 am #40955samw
MemberHi
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 125x125 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
May 15, 2013 at 10:43 am #41035essaysnark
ParticipantHi 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:// places a JavaScript banner on Post #x <?php if (is_single(YOURPOSTIDHERE)) { ?> <script type="text/javascript">YOUR JAVASCRIPT HERE</script> <?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.htmlIf 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! 🙂
May 16, 2013 at 2:52 am #41154samw
MemberHi
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
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.