How to edit head & body for specific Page

I created a custom slider at http://imageslidermaker.com/v2

I love the way it looks in preview and I’d like to add it to my Home Page. It’s asking me to insert code into the Head, then insert different code into the Body then Create a CSS file.

I have no clue how to add code to the head and body of a page through WordPress, and if I just add it to the head & footer files in IPower (the file system I use) how will it know to only put it on my home page, and where to put it?

As you can see I’m a noob so simple language to explain this would be helpful :slight_smile:

  • Ash
    • WordPress Hacker

    Hello @jarrod Fisk

    Welcome to WPMU community!

    I hope you are well today and thanks for asking the question.

    Well, you can’t simple copy from there and paste in your files. They suggested for normal html websites. Please follow the instructions below:

    I assume your theme-foldername is “mytheme”.

    1. Go to /wp-content/themes/mytheme/ and create a folder called – sliders.

    2. Go to /wp-content/themes/mytheme/sliders/ and create two more folders called – images and files.

    3. Copy my-slider.css and ism-2.0-min.js in /wp-content/themes/mytheme/sliders/files/ folder.

    4. Copy all slider images in /wp-content/themes/mytheme/sliders/images/ folder.

    5. Add the following in your functions.php file:

    add_action( 'wp_enqueue_scripts', 'my_slider_enqueue_style' );
    function my_slider_enqueue_style() {
    wp_enqueue_style( 'slider-stylesheet', trailingslashit( get_template_directory_uri() ) . 'sliders/files/my-slider.css', false );
    wp_enqueue_script( 'slider-script', trailingslashit( get_template_directory_uri() ) . 'sliders/files/ism-2.0-min.js', array( 'jquery' ), '1.0.0', 'true' );
    }

    This is php code, so must be placed inside <?php tag.

    6. Open the home page in Dashboard > Pages > Edit the page, and use this code for slider:

    <div class="ism-slider">
    <ol>
    <li>
    <img src="ism/image/slides/flower-729514_1280.jpg">
    <div class="ism-caption ism-caption-0">My slide caption text</div>
    </li>
    <li>
    <img src="ism/image/slides/beautiful-701678_1280.jpg">
    <div class="ism-caption ism-caption-0">My slide caption text</div>
    </li>
    <li>
    <img src="ism/image/slides/summer-192179_1280.jpg">
    <div class="ism-caption ism-caption-0">My slide caption text</div>
    </li>
    </ol>
    </div>
    <p class="ism-badge"><a class="ism-link" href="http://imageslidermaker.com">generated with ISM</a></p>

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers

    Ash

  • Jarrod Fisk
    • Flash Drive

    It still isn’t working.. I followed the first few steps to a T. I think it may be something in the code for the slider. I included a screenshot of how it looks on my website as well as the code I used on my home page. The code you provided obviously was the code for the slider template, not the one I made. I used the code provided by the slider maker website (the one that says “HTML to paste into body”:wink:

  • Ash
    • WordPress Hacker

    Hello @jarrod Fisk

    First of all your image sources are wrong. When you put in the editor, you need to give full URL, like:

    <img src="http://domain.com/wp-content/themes/themename/images/file.jpg">

    If you send me your FTP and admin login, I can give it a try.

    To send me details, please use our contact form: https://premium.wpmudev.org/contact/

    Select: I have a different question

    Subject: Attn-Ash (this ensures that it will be assigned to me)

    Details:

    1. Send all requested details

    2. Send a link of this thread so that I can track

    3. Send any other relevant link

    I will be happy to take a look :slight_smile:

    Cheers

    Ash

  • Ash
    • WordPress Hacker

    I have checked your site. There are lots of js error, you have to fix those first.

    The slider you downloaded from that site, would you please send me that zip file? Also, remove all instances you have added in the site for the slider, like from header.php or anywhere else.

    I have kept some commented code in your home page in the editor, please do not delete those.

    Let me know once you have done those.

    Cheers

    Ash

  • Jarrod Fisk
    • Flash Drive

    I’ve attached the zip file.

    I believe I’ve removed anything I had previously added regarding the slider.

    I have no clue how to fix js error.

    I’ve added plugins that do that for me and they keep breaking my site so I had to deactivate them.

  • Ash
    • WordPress Hacker

    Hello @jarrod Fisk

    Please check now. You have a script related to accordion slider, but the plugin was not installed. So it was throwing an error and was preventing the slider to be executed.

    I have installed that plugin and now the slider is working fine.

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers

    Ash

  • Jarrod Fisk
    • Flash Drive

    Thanks so much for your help, it looks great :slight_smile:

    One last thing, how come the third slide picture has the strip of gray at the top? I tried cropping the image to make it more narrow, I’ve tried changing the picture, but it still has the blank area at the top.

    I got the first 2 slides images from a stock photo website and the third photo is one that I took myself, could that be why?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.