SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i insert HTML and Javascript into Wordpress theme

    I want to add some HTML and Javascript to my wordress theme; this HTML would usually be added to the head of my page just before the </head> and the javascript just before the </body>. As I have no HTML pages in a wordpress theme how would I do this?
    Please go to http://www.jorgemonedero.com/blog/ and click on any of the photograhs - on the single gallery page is a close button (return to index) top right below the social icons - I want to move the close button to the bottom of the page like this - http://clba.nl/sitepoint/test-close-...ion-script.htm.
    I was told to add this in the bottom of the page, just before the </body></html> tag

    <script type="text/javascript">
    /* ===== replacing/creating the close button ===== */

    var allDiv=document.getElementsByTagName('div');
    for (var i=0; i<allDiv.length; i++){
    // insert new close button in the caption line:
    if (allDiv[i].getAttribute('class')=="item-title" || allDiv[i].getAttribute('className')=="item-title"){
    allDiv[i].innerHTML='<a href="http://www.jorgemonedero.com/blog/" title="Close">'
    +'<img id="closebutton" src="http://www.jorgemonedero.com/blog/wp-content/themes/expression/images/close-button.png" alt="" title="Close"></a>'
    +allDiv[i].innerHTML;
    }
    // adapt width of the caption line:
    if (allDiv[i].getAttribute('class')=="preview-content"){
    allDiv[i].style.width=allDiv[i].offsetWidth+60+"px";
    }
    }

    </script>

    And the CSS below In the <head> of the document, just before the </head>:


    <style type="text/css">
    .close-btn { /* close button in old position (if close button is existing) */
    display: none !important;
    }
    #closebutton { /* new close button */
    width: 27px;
    height: 27px;
    margin: 0 30px 0 0;
    padding: 0;
    vertical-align: middle;
    opacity: .5 !important;
    transition: opacity .35s ease-in-out;
    }
    #closebutton:hover,
    #closebutton:focus {
    opacity: 1 !important;
    }

    Unfortunately I have no HTML pages so where can I put these codes?
    The gallery pages are generated/sit in the "single-portfolio.php" (for example: single-portfolio postid-160) and the pages are styled by style.css.

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    936
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wordpress has HTML templates. They are similar to HTML pages, but php is used to draw the content in from the database.

    The theme can be found in this folder "wp-content"->"themes".

    In the directory for the active theme, there should be files called "header.php" and "footer.php". These contain the top and bottom of the markup.

    You can add your code there.

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Eruna,
    I tried that and nothing happened?
    instead of getting rid of the existing button and making a new one would you know how I would move the existing one down to the bottom? I have been told the problem is: The close button element is being obscured because it's hitting the edge of the containing div that has a class of "slider-image". To my mind, the close button shouldn't be inside this element, but then the image title and counter are, and they're not falling foul of the same problem.

    I tried making the element an image rather than a div with a background, but (a) it didn't work and (b) it became modified by the ".full-height img" CSS directive.

  4. #4
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    936
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by indigojones666 View Post
    Hi Eruna,
    I tried that and nothing happened?
    instead of getting rid of the existing button and making a new one would you know how I would move the existing one down to the bottom? I have been told the problem is: The close button element is being obscured because it's hitting the edge of the containing div that has a class of "slider-image". To my mind, the close button shouldn't be inside this element, but then the image title and counter are, and they're not falling foul of the same problem.

    I tried making the element an image rather than a div with a background, but (a) it didn't work and (b) it became modified by the ".full-height img" CSS directive.
    There are two different questions here, and they should be addressed separately. The code may have been correctly inserted but conflict with the existing template. First check the source code to see if your code was added. If it wasn't, you could have edited the wrong theme, there could be multiple headers, etc.. If its there, then the problem is with the code itself.
    Last edited by eruna; Dec 3, 2013 at 13:44. Reason: grammar

  5. #5
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Eruna, Yes the code was added; I only have one theme and there is only one header and one footer.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •