Adding Boxes

Hi Rehzin. I didn’t see an image in your tinypic link. Can you let me know if it’s there? Thanks.

I am sorry, I uploaded the image again but now in another website.

Here is the link:

https://postimg.org/image/mu7b8p4ft/

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.

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.

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("https://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.

Hi Rehzin, for the sidebar you can style the .widget > h3. It is similar to my blog style.

Thank you guys, I will try and see if it works.

@adiazudin – Good tip. Your site is looking nice.

Thanks @bdbrown, you also help me a lot.

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?

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.

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(); ?>

Sorry, this line need to ignore:

<?php if ( ! is_paged() ) { include ('home-announcement.php'); } ?>

*This for additional widget on first page.

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.

You need to apply CSS in your Child Theme.