Hi,
There is 3 files involved, index.php, archive.php, search.php
If you already have them in your child theme, you can modify them.
If not, you will need to add them to your child theme for customization.
Find the code <div class="post-list group"> within the file and add your text above it.
Wrap your text with any HTML header tag you like.
For every theme update, you will need to check parent theme files for any code that’s different from your modified template in your child theme.
You will need to update them accordingly, if not your website will not work properly.
Thank you
Thread Starter
AZBros
(@azbros)
Hi Denzel,
I’m sorry, but I’m really a novice when it comes to coding on WordPress. I found the code in each of the files in my child theme. What do I need to type above that line of code to include the words “Recent Articles” above my list of posts? Also, do I need to do it within all three of the files you mention?
Again, I apologize if that’s a dumb question, but I honestly don’t know. I’m trying to learn, though. I’ve received a ton of great advice on this forum and I appreciate everyone’s patience and assistance.
@denzel – not trying to hijack your thread here; just giving @azbros some options.
For the home page you can do it a couple of ways.
1. The quick-and-dirty way. Use the CSS :after pseudo-element to add it at the bottom of the flexslider container:
/* add heading line after flexslider */
#flexslider-featured:after {
content: "Recent Articles";
display: inline-block;
font-size: 32px;
margin-left: 40%;
padding-top: 20px;
}
Quick, and it works, but probably not the best option since it’s tied to the flexslider and the centering is “iffy” in mobile views. But it doesn’t require any theme file mods.
2. Modify index.php in your child theme.
a. Add your title at the top of the loop; that way it won’t be displayed if there aren’t any posts:
<?php if ( have_posts() ) : ?>
<h2 class="my-title post-title">Recent Articles</h2>
I gave it a class of “post-title” so it would use the theme default styling. You could leave that off and give “my-title” your own styling instead.
b. Add this to your child theme css:
/* pull custom title up */
.featured.flexslider {
margin-bottom: 10px;
}
/* align and spacing for custom title */
.my-title {
text-align: center;
margin-bottom: 20px;
}
Thread Starter
AZBros
(@azbros)
Hi bdbrown.
Thanks, I used the 2nd option and it worked perfectly! The margin-bottom code didn’t seem to add any space under the title and above my list of posts. I swapped it out for padding-bottom and that seemed to do the trick. Not sure if that would be the correct way to do things, but it looks okay so far.
One final note. I wanted to add some FontAwesome arrows pointing down on both sides of the “Recent Articles” text. I entered the code <i class=”fa fa-arrow-circle-down” aria-hidden=”true”></i> in front of and behind the words “Recent Articles” in index.php. This displayed the arrows, but they look curved/warped.
What would be causing this? Is this a common thing or did I maybe add the code in the wrong place? If it’s uncommon, I can post a screenshot so you can see what I’m talking about. It’s kind of strange.
It’s because the the theme is interpreting the <i> tag as “italics” and applies this css:
.post-title i {
font-style: italic;
}
Easy way around this is to remove the <i> tags from the title line, then use CSS pseudo-elements to add the icons:
.my-title:before, .my-title:after {
content: "\f0ab";
font-family: FontAwesome;
}
Thread Starter
AZBros
(@azbros)
Great, got it to work now. Thank you!
