Title: Adding Boxes
Last modified: August 24, 2016

---

# Adding Boxes

 *  Resolved [Rehzin](https://wordpress.org/support/users/rehzin/)
 * (@rehzin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/)
 * Hi guys,
 * This is a wonderful website and I am thrilled by the support you all give to 
   help each other.
 * I am wondering if it is possible somehow to add boxes (like the Sidebar Top Boxes)
   on the website.
 * To give a clear example I am sharing this picture:
 * [http://tinypic.com/view.php?pic=1zqvr4l&s=8#.VSP-9fnF_eQ](http://tinypic.com/view.php?pic=1zqvr4l&s=8#.VSP-9fnF_eQ)
 * This is my website: [http://www.livefaith.org](http://www.livefaith.org)
 * Thank you very much.

Viewing 15 replies - 1 through 15 (of 26 total)

1 [2](https://wordpress.org/support/topic/adding-boxes-1/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-boxes-1/page/2/?output_format=md)

 *  [bdbrown](https://wordpress.org/support/users/bdbrown/)
 * (@bdbrown)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988263)
 * Hi Rehzin. I didn’t see an image in your tinypic link. Can you let me know if
   it’s there? Thanks.
 *  Thread Starter [Rehzin](https://wordpress.org/support/users/rehzin/)
 * (@rehzin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988314)
 * I am sorry, I uploaded the image again but now in another website.
 * Here is the link:
 * [http://postimg.org/image/mu7b8p4ft/](http://postimg.org/image/mu7b8p4ft/)
 *  [bdbrown](https://wordpress.org/support/users/bdbrown/)
 * (@bdbrown)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988319)
 * The short answer is “yes”, you can put just about anything anywhere. The question
   becomes what is the best way to do it given what you’re trying to accomplish.
   The “Recent Post” box below the featured image is relatively easy if you’re ok
   modifying the theme php files. On the side, are those going to be in a sidebar,
   used for widget headings? Or are these stand-alone boxes with no sidebar? Trying
   to get an idea of what you have planned.
 *  Thread Starter [Rehzin](https://wordpress.org/support/users/rehzin/)
 * (@rehzin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988416)
 * It would be for the recent post box at first. It would be awesome to accomplish
   that and thank you for be always prompt to help.
 *  [bdbrown](https://wordpress.org/support/users/bdbrown/)
 * (@bdbrown)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988437)
 * Give this a try and see how it works:
    1. Copy index.php from the parent theme
   to your child theme. 2. At the top of the file, insert a new <div> for your box
   between “featured” and “have_posts”. The <p> element will be used to overlay 
   the text on the box image. If your image already has the text you can omit that.
 *     ```
       <?php get_template_part('inc/featured'); ?>
   
       <div class="my-recent-posts-box">
         <p>Recent Posts</p>
       </div>
   
       <?php if ( have_posts() ) : ?>
       ```
   
 * 3. Add some css to set the box background image and style the heading:
 *     ```
       /* custom heading box */
       .my-recent-posts-box {
         background-image: url("http://path_to_your_image.jpg");
         background-repeat: no-repeat;
         background-color: #00f;  /* blue */
         width: 100%;
         height: auto;
         margin: 20px 0;
       }
       .my-recent-posts-box p {
         color: #fff;
         font-weight: bold;
         margin-left: 20px;
       }
       ```
   
 * You can combine the three background properties into one:
 *     ```
       background: #00f url("http:/path_to_your_image.jpg") no-repeat;
       ```
   
 * Note: the box background color is there only as a backup in case the image doesn’t
   display for some reason.
 *  [Adi Azudin](https://wordpress.org/support/users/adiazudin/)
 * (@adiazudin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988459)
 * Hi Rehzin, for the sidebar you can style the **.widget > h3**. It is similar 
   to [my blog](http://blog.adiazudin.com) style.
 *  Thread Starter [Rehzin](https://wordpress.org/support/users/rehzin/)
 * (@rehzin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988460)
 * Thank you guys, I will try and see if it works.
 *  [bdbrown](https://wordpress.org/support/users/bdbrown/)
 * (@bdbrown)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988461)
 * [@adiazudin](https://wordpress.org/support/users/adiazudin/) – Good tip. Your
   site is looking nice.
 *  [Adi Azudin](https://wordpress.org/support/users/adiazudin/)
 * (@adiazudin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988462)
 * Thanks [@bdbrown](https://wordpress.org/support/users/bdbrown/), you also help
   me a lot.
 *  Thread Starter [Rehzin](https://wordpress.org/support/users/rehzin/)
 * (@rehzin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988464)
 * Hi bdbrown,
 * I tried to do as you said:
 * > <?php get_header(); ?>
   > <section class=”content”>
   >  <?php get_template_part(‘inc/page-title’); ?>
   >  <div class=”pad group”>
   >  <?php get_template_part(‘inc/featured’); ?>
   > **<?php get_template_part(‘inc/featured’); ?>**
   > <div class=”my-recent-posts-box”>
   >  <p>Recent Posts</p> </div>
   > <?php if ( have_posts() ) : ?>
   >  <?php if ( have_posts() ) : ?>
   >  <?php if ( ot_get_option(‘blog-standard’) == ‘on’ ): ?>
   >  <?php while ( have_posts()):
   > the_post(); ?> <?php get_template_part(‘content-standard’); ?>
 * But something went wrong with the website and I had to remove it. Is there anything
   I am missing?
 *  [bdbrown](https://wordpress.org/support/users/bdbrown/)
 * (@bdbrown)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988465)
 * With the code I posted:
 *     ```
       <?php get_template_part('inc/featured'); ?>
   
       <div class="my-recent-posts-box">
         <p>Recent Posts</p>
       </div>
   
       <?php if ( have_posts() ) : ?>
       ```
   
 * I said:
 * > insert a new <div> for your box between “featured” and “have_posts”.
 * The “featured” and “have_posts” lines in the code I posted were just reference
   points for where to add the new <div> in the file. You should only add the three
   lines of the new <div>, not the entire code block. Adding the entire code block
   doubles-up the first and last lines and, as you experienced, would cause problems.
 *  [Adi Azudin](https://wordpress.org/support/users/adiazudin/)
 * (@adiazudin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988467)
 * These are my code in index.php. Your solution similar to this:
 *     ```
       <?php get_header(); ?>
   
       <section class="content">
   
       	<?php get_template_part('inc/page-title'); ?>
   
       	<div class="pad group">
   
       		<?php if ( ! is_paged() ) { include ('home-announcement.php'); } ?>
   
       		<?php get_template_part('inc/featured'); ?>
   
       		<div class="my-recent-posts-box">
       		  <p>Recent Posts&nbsp;&nbsp;<i class="fa fa-caret-down"></i></p>
       		</div>
   
       		<?php if ( have_posts() ) : ?>
   
       			<?php if ( ot_get_option('blog-standard') == 'on' ): ?>
       				<?php while ( have_posts() ): the_post(); ?>
       					<?php get_template_part('content-standard'); ?>
       				<?php endwhile; ?>
       			<?php else: ?>
       			<div class="post-list group">
       				<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
       					<?php get_template_part('content'); ?>
       				<?php if($i % 2 == 0) { echo '</div><div class="post-row">'; } $i++; endwhile; echo '</div>'; ?>
       			</div><!--/.post-list-->
       			<?php endif; ?>
   
       			<?php get_template_part('inc/pagination'); ?>
   
       		<?php endif; ?>
   
       	</div><!--/.pad-->
   
       </section><!--/.content-->
   
       <?php get_sidebar(); ?>
   
       <?php get_footer(); ?>
       ```
   
 *  [Adi Azudin](https://wordpress.org/support/users/adiazudin/)
 * (@adiazudin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988468)
 * Sorry, this line need to ignore:
 *     ```
       <?php if ( ! is_paged() ) { include ('home-announcement.php'); } ?>
       ```
   
 * *This for additional widget on first page.
 *  Thread Starter [Rehzin](https://wordpress.org/support/users/rehzin/)
 * (@rehzin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988478)
 * Thank you for helping me! I hope I can do the same at some point.
 * I tried to apply the code but the text “Recent Posts” is the only thing showing
   up yet, without the box. So I am trying to figure out what I am doing wrong because
   I am new in all of this.
 *  [Adi Azudin](https://wordpress.org/support/users/adiazudin/)
 * (@adiazudin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/#post-5988479)
 * You need to apply CSS in your Child Theme.

Viewing 15 replies - 1 through 15 (of 26 total)

1 [2](https://wordpress.org/support/topic/adding-boxes-1/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-boxes-1/page/2/?output_format=md)

The topic ‘Adding Boxes’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/hueman/3.7.27/screenshot.png)
 * Hueman
 * [Support Threads](https://wordpress.org/support/theme/hueman/)
 * [Active Topics](https://wordpress.org/support/theme/hueman/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/hueman/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/hueman/reviews/)

## Tags

 * [boxes](https://wordpress.org/support/topic-tag/boxes/)

 * 26 replies
 * 3 participants
 * Last reply from: [Rehzin](https://wordpress.org/support/users/rehzin/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/adding-boxes-1/page/2/#post-5988505)
 * Status: resolved