Title: Adding a custom image grid
Last modified: June 18, 2020

---

# Adding a custom image grid

 *  [ladlewithlove](https://wordpress.org/support/users/ladlewithlove/)
 * (@ladlewithlove)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/adding-a-custom-image-grid/)
 * Hi,
 * In my homepage, just above the blog list, I want to add a block which will have
   2-3 images and text title on bottom that when clicked will open the blogs from
   that text category.
 * How can this be done.
 * Thanks.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadding-a-custom-image-grid%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [Fotis](https://wordpress.org/support/users/markwaregr/)
 * (@markwaregr)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/adding-a-custom-image-grid/#post-13002416)
 * Hi there,
    Currently this is a feature of our PRO version only. I am sorry. You
   could replicate this though. Create a new sidebar [https://www.cssigniter.com/kb/how-do-i-add-a-new-sidebar-widgetized-area/](https://www.cssigniter.com/kb/how-do-i-add-a-new-sidebar-widgetized-area/)
   and add it in header.php under ` <div id=”site-content”>`
 * like this
 *     ```
       <div class="container">
       <div class="row">
       <?php dynamic_sidebar( 'your-sidebar-id' ); ?>
       </div>
       </div>
       ```
   
 * Then in your new sidebar add your images and text from Appearance->Widgets using
   any widget you want or simple HTML widgets.
    If you decide to proceed with this
   modification I would suggest you create a child theme, copy over the files you
   are editing and make the modifications there. This will allow your changes to
   survive future theme updates. If you directly edit the theme’s files, all changes
   will be lost once you update.
 * Have a look at this guide to learn more about child themes and how to create 
   one [http://www.cssigniter.com/ignite/beginners-guide-child-themes/](http://www.cssigniter.com/ignite/beginners-guide-child-themes/)
   
   Let me know if you need additional help with this.
 *  Thread Starter [ladlewithlove](https://wordpress.org/support/users/ladlewithlove/)
 * (@ladlewithlove)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/adding-a-custom-image-grid/#post-13003076)
 * sorry but unable to follow this. also this looks like we are adding a side bar.
   but what i want to do is on my home page instead of the the slider, i want to
   replace it with 3 static images (joined side by side like 3 blog categories).
   When each of the image is clicked it should open the respective blog category
   feed.
 *  Thread Starter [ladlewithlove](https://wordpress.org/support/users/ladlewithlove/)
 * (@ladlewithlove)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/adding-a-custom-image-grid/#post-13005690)
 * hi,
 * i did all the steps as suggested. created a child theme. create a new side bar
   in functions.php. Added the same in index.php. But I am unable to see it in Appearance-
   > Widgets. No changes observed. Pls guide how can i find it.
 *  [Fotis](https://wordpress.org/support/users/markwaregr/)
 * (@markwaregr)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/adding-a-custom-image-grid/#post-13006327)
 * Hi there,
    Well creating a sidebar might be complex, so just open header.php
 *     ```
       <div class="container">
       <div class="row">
       <div class="col-md-4">
       <a href="your-link-1"><img src="your-image-URL-1"/></a>
       </div>
       <div class="col-md-4">
       <a href="your-link-2"><img src="your-image-URL-2"/></a>
   
       </div>
       <div class="col-md-4">
       <a href="your-link-3"><img src="your-image-URL-3"/></a>
   
       </div>
       </div>
       </div>
       ```
   
 * after
    `<div id=”site-content”>`
 * Let me know if this worked for you.
    -  This reply was modified 5 years, 12 months ago by [Fotis](https://wordpress.org/support/users/markwaregr/).
 *  Thread Starter [ladlewithlove](https://wordpress.org/support/users/ladlewithlove/)
 * (@ladlewithlove)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/adding-a-custom-image-grid/#post-13006947)
 * Hey thanks for the help. Tried it. It work. Couple of follow up questions.
    1.
   I want this only in the home page and not every page. How do i do that? 2. Also
   there is some gap between the images. How can that be altered?
 * And out of curiosity.. why did i not get the custom sidebar that I had created
   in the widget area? I somewhere read it could be due to plugins. But I disabled
   all the plugins and checked. Still no luck !
 *  Thread Starter [ladlewithlove](https://wordpress.org/support/users/ladlewithlove/)
 * (@ladlewithlove)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/adding-a-custom-image-grid/#post-13006996)
 * If i disable the slider, then there is no space between the top menu and the 
   images. How can i add some padding?
 *  [Fotis](https://wordpress.org/support/users/markwaregr/)
 * (@markwaregr)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/adding-a-custom-image-grid/#post-13007347)
 * Hi,
    you can add this
 *     ```
       .home #site-content{
       padding-top:40px;
       }
       ```
   
 * in your custom CSS box under Customize-▸Additional CSS to add some padding

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

The topic ‘Adding a custom image grid’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/olsen-light/1.7.1/screenshot.png)
 * Olsen Light
 * [Support Threads](https://wordpress.org/support/theme/olsen-light/)
 * [Active Topics](https://wordpress.org/support/theme/olsen-light/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/olsen-light/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/olsen-light/reviews/)

 * 7 replies
 * 2 participants
 * Last reply from: [Fotis](https://wordpress.org/support/users/markwaregr/)
 * Last activity: [5 years, 12 months ago](https://wordpress.org/support/topic/adding-a-custom-image-grid/#post-13007347)
 * Status: not resolved