adding script to the main page of WP template

  • Resolved clarkbp

    (@clarkbp)


    16 years, 5 months ago

    I am trying to figure out how to add a script to a specific spot on the main page of my site. Here is my URL

    https://thefiresidepost.com/

    I have a youtube player below the lead article section and there is a blank space between the player and the featured article on the right. I want to add headlines from the washington post or something in that space, but when I add the embed code to the index.php, it places the widget that I am using beneath the video player rather than next to it. if I use a </div> tag, it places the widget in the space above the featured articles.

    How do I get the headlines box to fit neatly next to the video player?

Viewing 3 replies - 1 through 3 (of 3 total)

  • First you need to put the two different elements (the youtube video and the news widget) into their own divs. Then you can float those divs so that they appear next to each other, provided there is enough width in your layout to accommodate their combined widths. Some example code taken from your site is listed below. Note: that there was a closing </div> after the news widget which I am going to assume closes some <div> higher on the page. If its a rogue div it could mess up you layout/

    <div style="float:left; width:360px;">
    <div id='vu_ytplayer_vjVQa1PpcFNt0VcsgCCYRHVlmmXabk9CTCGfN1O6PjY='>
        <a href='https://www.youtube.com/browse'>Watch the latest videos on YouTube.com</a>
    </div>
    <script type='text/javascript' src='https://www.youtube.com/watch_custom_player?id=vjVQa1PpcFNt0VcsgCCYRHVlmmXabk9CTCGfN1O6PjY='></script>
</div>

<div style="float:right; width:160px;">
    <object type="application/x-shockwave-flash" data="https://widgets.clearspring.com/o/48613409efac8054/48ee48e4837fade6/48ad83d82ed46058/1fe7732e/-cpid/e5f7fe521b367352" id="W48613409efac805448ee48e4837fade6" width="160" height="300"><param name="movie" value="https://widgets.clearspring.com/o/48613409efac8054/48ee48e4837fade6/48ad83d82ed46058/1fe7732e/-cpid/e5f7fe521b367352" /><param name="wmode" value="transparent" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /></object>
</div>
<div style="clear:both;"></div>

    In the example you should change the example width, 360px, of the youtube video to its actual width. The 160px for the news widget is identified in its code, so I think its right. If the width of the video and the width of the news widget are greater then that area’s width the news widget will cascade down and not float to the right. The clear:both; prevents further elements from floating around those elements.

    Also, you have some invalid code in your template. Search for the code:

    <div
padding-left = 48px

    and take that out. If you wish to assign padding-left directly to a div you can do so like this:

    <div style="padding-left:48px;"></div>

    Hope that helps.

    Thread Starter clarkbp

    (@clarkbp)

    Beautiful.

    Beautiful.

    Thank you.

    Glad to see you got it working.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘adding script to the main page of WP template’ is closed to new replies.