Adding a slideshow to the main page of wordpress

I’m trying to create WordPress theme for a website, and want to add a slideshow to the index.php. Since I don’t want to show posts on the index and only show the slideshow, can I just remove the WordPress Loop? Or I need to keep it? If I have to keep it, how can I do to only show the slideshow?

Thanks.

Related posts

Leave a Reply

4 comments

  1. I wouldn’t mess with the index.php page just to remove the loop for the front page. You should create a new file called home.php, copy all content from index.php and remove the loop there. home.php will be used as your homepage and if you ever want to use the normal index.php then you still have it available.

    You can even create a custom page template which is very easy to do.

    1. Create a new file titled what ever you would like. I would use something like template-home.php
    2. add a comment /*Template Name: Home Page*/.
    3. Copy over content from another file such as page.php and make the preferred edits
    4. Create a new page and choose the page template under page attributes.
    5. Go to settings>Reading and choose a static page for you homepage and choose the page you just created.
  2. You can remove the wordpress loop if you’re not needing to retrieve posts or replies, etc.

    ** However, I don’t recommend doing that as you may want to pull images from specific pages which would require the loop

  3. You can add Your own HTML and JS one Just follow these steps
    1- Create a new HTML file using notepad (save it as slideshow.html) and past this code in it

        <html>
          <head>
    
              <title>Image Slideshow</title>
    
                  <style type="text/css">
    
                      /* All Styles Optional */
    
                       * {
                font-family:calibri,arial;
                    font-size:16pt;
                    }
    
                    div#show {
                    background-color:#efefe7;
                    width:400px;
                    margin:0; padding:2px;
                    border:1px solid #909090;
                    }
    
                    div#show table input,  div#show4 table input {
                    outline-style:none;
                    }
    
                    </style>
    
                    <!--[if IE]>
                    <style type="text/css">
                    div#show table td, div#show4 table td {
                    height:21px;
                    }
                    </style>
                    <![endif]-->
    
                    <script src="swissarmy.js" type="text/javascript"></script>
    
                    <script src="slideshow.js" type="text/javascript"></script>
    
                    </head>
    
                    <body style="margin:0; padding:0;">
    
                    <div id="show"><script type="text/javascript">new                                                                                                                                      
                     inter_slide(slideShow)</script></div>
                   </body>
    
                   </html>
    

    2- Then create a new file with notepad and save it as swissarmy.js and past this in it “here is the code

    3- create another file with notepad and save it as slideshow.js and replace the images urls with the urls inside it Here is the Code

    4- put all of these files in one folder and open the slideshow.js then replace the images with your own images and texts with the text you want
    5- open the HTML file and it will work