Hi friends am new here. hope I get help soon. I have a code and i have been trying to use it and display a div on homepage and hide on other pages but this has refused to work leaving me with no chance of performing this action I want. Please can some guide me? the code
<?php
if (is_home()) { ?>
<div class="nk-trending"> </div>
<?php } ?>
my site is tophits.ng
Hi @ysgmesh,
I went to your site and saw a āTrending Postā navigation bar that didnāt display on other pages. The code seems to not have any syntax errors.
If itās still not working, perhaps it is where the PHP snippet is injecting the div element inside of the HTML.
Is the āTrending Postā link what you are targeting?
Where is it in the HTML? (WordPress sites are large.)
Thank you for the reply. I have the Trending and latest on homepage with another latest below them. so what I want to achieve is when clicked on Latest tab it will switch to the latest and when clicked on next page the whole div will disappear making way for the latest post page number 2 to show up.the code I have for the homepage is this
<ul class="sections-wrapper">
<div><span><div style=" color:#fff; font-size: 17px; " class="kittab tablink"> <li id="tabs2""> <span class="a active"><div class="sections-wrapper">
<input id="tabs-2" class="posts-section-link trending-posts-input" type="radio" name="tabs" checked="">
<label for="tabs-2"> TRENDING POST </label></span></li></div> </span>
<div class="kittab tablink"><li id="tabs1" "> <span class="b"> <input id="tabs-1" class="posts-section-link latest-posts-input" type="radio" name="tabs">
<label for="tabs-1">LATEST POST<span class="new-label">new</span></label></span> </li></div></div>
</ul> </div> </div> </div>
<div class="a" style="display:none">
<div id="tabs-1" class="tabContent">
<div style="margin-top: -10px;" class="block_post">
<div id="content">
<ul class="disclosure table group ul-list-1" id="trendingContainer">
<li>
<?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
$args = array( 'posts_per_page' => '2','paged' => $paged ); query_posts( $args );
$recent_posts = new WP_Query($args);
while( $recent_posts->have_posts() ) :
$recent_posts->the_post() ?>
<li class="category_list">
<div class="cat-post-thumb">
<a class="the-post-link">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('thumbnail') ?>
<?php endif ?> </div><div class='cat-post-text'>
<a href="<?php echo get_permalink() ?>"><?php the_title() ?>
</a>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); # reset post data so that other queries/loops work ?> <div class="a"><?php
{
echo '<li class="">', cfct_misc('nav-list'),'</li>';
echo '</ul>';
}
?></div>
</div>
</div>
</div>
<div class="b">
<div id="tabs-2" class="tabContent">
<div id="content">
<ul class="disclosure table group ul-list-1" id="trendingContainer">
<?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
query_posts('meta_key=post_views_count&posts_per_page=20&orderby=meta_value_num&
order=DESC');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li class="category_list">
<div class="cat-post-thumb">
<a class="the-post-link">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('thumbnail') ?>
</a>
</div>
<?php endif ?>
<div class='cat-post-text'>
<a href="<?php the_permalink(); ?>"><?php the_title();
?></a>
</li>
<?php
endwhile; endif;
wp_reset_query();
?>
</ul></div> </div>
</div> </div></div> </div> </div>```so my plan is to hide the div holding the trending posts and pull only the ālatest postā when clicked for page two and the rest.
Iām still a little confused about what divs are supposed to go where.
I have now only been looking for the divs to change when I click around on your tabs.
Hereās my first take before someone else chimes in. Iām not an expert, but Iām just trying to sound this out with you.
When I click the āTrendingā or āLatestā ālinksā (which are label elements), the page does not re-load which would trigger the PHP, a server-side object-oriented language, to execute. The way this is set up (You should consider changing the labels to anchor links instead of form elements like labels.), it would seem that you need to run some JavaScript on the client-side to get the timing correct of when you are trying to have this PHP executed.
So, my hypothesis is that you will be removing a bit of this PHP and solely converting it in to JavaScript. 
ā¦and the WordPress HTML is too confusing to know where to target the clicks. I think you need to switch to anchor elements and add an ID to the specific element to trigger the event (#trending-post for instance). It needs to be re-written as anchor links instead of radio form elements masquerading as links nested on top of spans on top of divs (too confusing).
For example, an idea for your new JavaScript file to run on the page:
$("#trending-post").on("click", function(event) {
$("#latest-posts").css("display", "none");
/* plus animation and whatever else you want to do */
});
Neat website. 
-ty 
am laughing. See I am just so passionate about music and I want my site to look good just like you see on some major naija music sites. I have javascript beneath those codes too. But look at what I want to achieve. Its a framework from the popular āCarrington mobile themeā. To be honest with you the theme is confusing but I try to find my way in any scenario to get the look I desire. If you have time please check the behavior of naijaloaded.com.ng thats what am looking at. I want my homepage tophits.ng so have same kind of behaviour before I can add other posible features on my head. Do you see that? thanks for your timeā¦am just not too good with codes
Change this:
<div><span><div style=" color:#fff; font-size: 17px; " class="kittab tablink"> <li id="tabs2""> <span class="a active"><div class="sections-wrapper">
<input id="tabs-2" class="posts-section-link trending-posts-input" type="radio" name="tabs" checked="">
<label for="tabs-2"> TRENDING POST </label></span></li></div> </span>
ā¦to something like this:
<div>
<a href="#" id="trending-posts" style="color:#fff; font-size: 17px;" onclick="yourJavaScriptFunction()">TRENDING POST</a>
</div>
ā¦and change the targets in the WordPress CSS file to target the <a> elements within the <ul> container (instead of label elements now).
I think I understand a little better now.
When the visitor clicks to page 2 of the latest posts, are you trying to make the entire green bar disappear or just the ālatest postsā link?
That page does refresh, so PHP could run at that point.
Iām really just thinking out loud here.
you are now getting a better picture of it. I want to hide the entire div together with the green bar. If I hide it I am sure any click on the next page will get latest post template thus removing the trending. I dont want the trending post to appear in other pages except on homepage. You are really good to understand this to this level. Thanks. I will like if you can help. I have tried using normal css that I know very well but it isnt working for me this time around. I refused to learn java script and its causing me so much harm I dont even know if I can learn it at this my age
Okay, hereās the first thing.
You need to make a habit of validating your code with this website: https://validator.w3.org/
I put your site code in there just for a benchmark, and hereās what it returned:
I know the WordPress software really just supplies all the markup, but this is kind of wacky. Thatās a lot of errors that need to be eliminated (maybe not all at onceā¦ but itās a priority).
Hereās a stray quotation mark from the code you posted:
<li id="tabs2"">
So, go through the page validation report and fix some of the errors.
Secondly, you need to have a new HTML structure for a much lower amount of divs in the part of the page that you are wanting to change with the PHP scripts.
<div id="trending-post-navbar">
<a href="#">TRENDING POSTS</a>
<a href="#">LATEST POSTS</a>
</div>
Something like this is all thatās necessary, but you need to post for us the CSS stylesheet that WordPress generates. You had targeted <label> elements as if the links were forms, and the targeting needs to be changed for this target:
#trending-post-navbar {
/* new code you need to write */
}
#trending-post-navbar a {
/* new code you need to write */
}
I think you have a working understanding of the PHP that you need to accomplish this. In fact, it looks like you may already have working code for what you are trying to accomplish. What you need is a greater understanding of the HTML & CSS in my opinion. Itās good to use WordPress for the sake of uploading a post with relative ease, but it gives bloated code that is hard to read that makes it confusing to understand the code. All you need is to simplify how the HTML / CSS is structured, and I think things will really be a lot more clear for you. Youāve done a fair job on the PHP, it would seem.
Youāre welcome for the time. 
People here did the same for me and asked for nothing back.
Thanks very much but really i wasnt getting error on wordpress unlike when I do code on blogspot where any error will not allow you to submit your codes. This is a bit confusing to me but you remember is a popular theme Carrington that I am working with. If I can plead with you a little can I send you a bit of the code for the page or the theme I have customized so you can see how it is structured? Thanks. for now I am trying out what you sent me to know if I can get it. I dont mind spending the whole of today to get the site looking good to my liking. If I have had one like you on my list of friend I know learning more about web design could have been a dream come true.
I just learned to detail any code i use even using to organise my files properly. Thanks
You should be able to view the CSS file in your WordPress control panel. We need you to upload the CSS styles for the code around those <label> elements, but my point is that you need to erase those and make new ones that are simple. That way, you can easily isolate which div you are going to hide on page 2 and beyond like you want to.
Earlier, you already uploaded the code. This is how your HTML looks:
<div><span><div style=" color:#fff; font-size: 17px; " class="kittab tablink"> <li id="tabs2""> <span class="a active"><div class="sections-wrapper">
<input id="tabs-2" class="posts-section-link trending-posts-input" type="radio" name="tabs" checked="">
<label for="tabs-2"> TRENDING POST </label></span></li></div> </span>
This code does not make any sense. If you can edit the HTML and CSS files for the WordPress template, you need to erase this and supply something that a human can read similar to what I posted above.
The problem is that those files are not in one place. its scattered over so many places. And that is how the framework I showed you earlier was strutured. Maybe I will have to get all of them and put in one file but if I can get this working I will be glad.
The current css for that looks like
<style>
.home a:visited {
text-decoration: none;
color: green !important;
}
.wp-pagenavi { text-align: left;
height: auto;
border-top: solid 1px green;
background: white;
border-bottom: solid 1px white;}
.kitcom { text-align:right;
margin: 8px; margin-bottom:-3px;
}
.kittab {
display: inline-block;
background: #;
text-decoration: none;
color: #444; list-style: none;
font-size: 13px;
padding-right: 7px;
padding-bottom: 4px;
text-transform: uppercase;
font-weight: bold;
padding-top: 4px;
padding-left: 7px;}
.kittab:hover {
background: ;
color: #555;
}
.kittab:visited {
background: ;
color: green;
}
.kittab:active {
background: ;
color: green;
}
.kittab a{
text-decoration: none;
color: green;
}
.input#tabs-2.posts-section-link + label:before {border-bottom:solid 3px yellow;}
ul.table.disclosure {
margin: 5px 3px 3px 3px;
padding: 0;
border: none;
background: transparent;
}
ul.table.disclosure.ul-list-1 {
margin-top: 10px;
}
ul.table.disclosure li, ul.table li.disclosure {
background: #fff;
display: flex;
clear: both;
margin: 0px 5px 5px 5px !important;
position: relative;
padding: 0 !important;
}
/*ul.table.disclosure.ul-list-1 {
overflow-y: scroll;
height: 400px;
scroll-behavior: smooth;
}
ul.table.disclosure.ul-list-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
ul.table.disclosure.ul-list-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
ul.table.disclosure.ul-list-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}*/
ul#trendingContainer.table.disclosure li:nth-child(1),
ul#trendingContainer.table.disclosure li:nth-child(2),
ul#trendingContainer.table.disclosure li:nth-child(3),
ul#trendingContainer.table.disclosure li:nth-child(4),
ul#trendingContainer.table.disclosure li:nth-child(5),
ul#trendingContainer.table.disclosure li:nth-child(6),
ul#trendingContainer.table.disclosure li:nth-child(7),
ul#trendingContainer.table.disclosure li:nth-child(8),
ul#trendingContainer.table.disclosure li:nth-child(9),
ul#trendingContainer.table.disclosure li:nth-child(10),
ul#trendingContainer.table.disclosure li:nth-child(11),
ul#trendingContainer.table.disclosure li:nth-child(12),
ul#trendingContainer.table.disclosure li:nth-child(13),
ul#trendingContainer.table.disclosure li:nth-child(14),
ul#trendingContainer.table.disclosure li:nth-child(15),
ul#trendingContainer.table.disclosure li:nth-child(16),
ul#trendingContainer.table.disclosure li:nth-child(17),
ul#trendingContainer.table.disclosure li:nth-child(18),
ul#trendingContainer.table.disclosure li:nth-child(19),
ul#trendingContainer.table.disclosure li:nth-child(20)
{
display: flex !important;
}
#content {
position: relative;
}
#more-trending-button span.more-trending-button-content {
margin-top: auto;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
}
#more-trending-button span.more-trending-button-content span {
background: #000;
color: #fff;
padding: 5px 15px;
margin-bottom: 5px;
display: inline-block;
}
ul.table.disclosure .sticky-link a {
padding: 12px 25px 12px 35px;
line-height: 1.7 !important;
}
ul.table.disclosure a {
/*background: none !important;*/
/*font-size: 14px;*/
/*font-family: Rosario;*/
}
ul.ul-list-1.table.disclosure .category_list .cat-post-thumb {
margin: 0px;
}
ul.ul-list-1.table.disclosure .category_list .cat-post-thumb {
height: 95px;
width: 80px;
}
ul.table.disclosure .category_list .cat-post-thumb {
background-size: cover;
background-position: center;
float: left;
margin: 0px;
width: 95px;
flex: 0 0 95px;
height: 90px;
overflow: hidden;
display: flex;
justify-content: center;
position: relative;
}
ul.ul-list-1.table.disclosure .category_list .cat-post-text {
display: flex;
flex-direction: column;
justify-content: center;
height: 65px;
}
ul.table.disclosure .category_list .cat-post-text {
padding: 0 0 0 15px;
margin: auto;
flex-direction: column;
justify-content: center;
height: auto;
flex: 5;
resize: vertical;
}
ul.ul-list-1.table.disclosure .category_list .cat-post-text a {
padding: 0 25px 0 0;
color: green;
font-weight: 600;
}
ul.table.disclosure .category_list .cat-post-text a {
padding: 15px 25px 15px 5px;
font-weight: 600;
font-family: 'Roboto Condensed';
font-family: Helvetica;
font-family: 'Telkom123-Regular', sans-serif;
color: #000;
font-size: 13px;
text-align: left;
}
ul.table.disclosure a, ul.table li.disclosure a {
background: url(../img/disclosure.png) no-repeat right center;
padding: 15px;
}
ul.table.disclosure a {
/* background: none !important; */
/* font-size: 14px; */
/* font-family: Rosario; */
}
ul.table.disclosure a, ul.table li.disclosure a {
border: 0;
display: block;
padding: 5px 10px;
text-decoration: none;
}
ul.table.disclosure li:after {
content: " ";
display: block;
clear: both;
}
ul.table li {
border-bottom: 1px solid #ccc;
padding: 15px;
}
ul.table {
clear: both;
color: #999;
list-style: none;
margin: 0;
}
ul.table li {
border-bottom: 1px solid #ccc;
padding: 15px;
}
</style>
<div id="content">
<style type="text/css">
.mobile-trending-row {
margin: 0 -3px;
}
.row:after {
clear: both;
display: table;
content: " ";
}
.col-3 {
width: 25%;
float: left;
}
.col-12 {
width: 100%;
}
.mobile-trending-wrapper {
padding: 10px 10px;
margin: 5px 10px;
background: #fff;
border: 1px solid #000;
}
.mobile-trending-wrapper span {
}
.mobile-trending-wrapper .trending-title {
display: inline-block;
background: #000;
color: #fff;
padding: 3px 10px;
font-size: 1.0em;
font-weight: 600;
border-radius: 0px;
margin-bottom: 3px;
text-shadow: 2px 1px 3px #000000;
}
.mobile-trending-wrapper .trending-single {
padding: 3px;
box-sizing: border-box;
}
.mobile-trending-wrapper .trending-single a {
font-size: 11px;
display: block;
background: #f0f0f0;
padding: 5px;
min-height: 135px;
}
.mobile-trending-wrapper .trending-single a img {
border: 1px solid #000;
}
.mobile-trending-wrapper .trending-single a span {
display: block;
color: #8c8c8c;
}
#content>.sections-wrapper::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(89, 169, 21, 0.2);
/* left: -100%; */
/* right: -300%; */
bottom: -3px;
z-index: -1;
height: 46px;
background-image: linear-gradient(-90deg, green, green);
}
display:block;
height:46px;
width:805px;
element.style {
}
input.posts-section-link {
display: none;
}
.sections-wrapper {
text-align: center;
}
input#tabs-2.posts-section-link:checked + label {
padding-left: 0;
}
input#tabs-2.posts-section-link + label {
border-radius: 0 5px 5px 0;
border-left: 0;
margin-left: -20px;
margin-right: 40px;
padding-left: 25px;
}
input#tabs-1.posts-section-link + label {
border-radius: 5px 0 0 5px;
border-right: 0;
position: relative;
padding-left: 25px;
}
input.posts-section-link + label {
background: none;
color: #fff;
text-shadow: none;
font-size: 1.1rem;
border: none;
border-radius: 0;
padding: 0px 0px;
height: 46px;
line-height: 43px;
margin-bottom: -2px;
font-weight: 900;
margin: 0;
position: relative;
}
user agent stylesheet
label {
cursor: default;
}
.sections-wrapper {
text-align: center;
}
input#tabs-1.posts-section-link + label:before {
content: "";
display: block;
position: absolute;
top: 11px;
left: 0;
width: 30px;
height: 30px;
background: ##url(https://.gif);
background-size: 20px;
background-repeat: no-repeat;
}
input#tabs-2.posts-section-link:checked + label:before {
display: none;
}
input#tabs-2.posts-section-link + label:before {
content: "";
display: block;
position: absolute;
top: 11px;
left: 0;
width: 30px;
height: 30px;
background: url(https://.gif);
background-size: 20px;
background-repeat: no-repeat;
}
input.posts-section-link:checked + label:after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
height: 5px;
background: #FFEB3B;
}
input#tabs-1.posts-section-link + label .new-label {
background: url(new.png) no-repeat;
background-size: contain;
background: #f00;
z-index: -1;
color: #ffffff;
height: 35px;
width: 35px;
height: auto;
width: auto;
position: absolute;
right: -34px;
top: 2px;
font-size: 14px;
text-transform: lowercase;
display: block;
line-height: 17px;
line-height: 13px;
/* background: #fff; */
font-weight: 400;
padding: 3px;
border-radius: 0;
}
input.posts-section-link:checked + label {
color: #c3ff72;
text-shadow: none;
background: none;
margin: 0 -3px;
border-radius: 0 !important;
}
input.posts-section-link + label {
border: 1px solid #6acb1a;
background: none;
color: #549c19;
padding: 5px 10px;
display: inline-block;
border-radius: 5px 5px;
margin: 10px 0 15px 0;
min-width: 130px;
box-sizing: border-box;
font-weight: 600;
text-transform: uppercase;
}
user agent stylesheet
label {
cursor: default;
}
.sections-wrapper {
text-align: center;
}
input.posts-section-link:checked + label:after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
height: 5px;
background: #FFEB3B;
}
display:block;
height:5px;
width:138.172px;
input#tabs-1.posts-section-link + label {
border-radius: 5px 0 0 5px;
border-right: 0;
position: relative;
padding-left: 25px;
}
input.posts-section-link + label {
background: none;
color: #fff;
text-shadow: none;
font-size: 13px;
border: none;
border-radius: 0;
padding: 0px 0px;
height: 46px;
line-height: 43px;
margin-bottom: -2px;
font-weight: 900;
margin: 0;
position: relative;
}
input#tabs-1.posts-section-link + label:before {
content: "";
display: block;
position: absolute;
top: 11px;
left: 0;
width: 30px;
height: 30px;
background: url(ht.gif);
background-size: 20px;
background-repeat: no-repeat;
}
b.active {background: url(/.gif)!important;}
</style>
This is the theme author url
he did a wonderful job but it has so many errors truly. You can check the framework to see the error https://wordpress.org/themes/carrington-mobile/
Here is the script controlling it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('span.a, span.b').click(function() {
if (!$(this).hasClass('active')) {
$('span.a, span.b').removeClass('active');
$(this).addClass('active');
$('div.a, div.b').toggle();
}
$('div.a, div.b').css("visibility","visible")
});
</script>
Okay.
I was hoping that someone else would drop in because Iām not an expert at all on PHP or WordPress templates. It looks like itās just me.
Thatās great to see the JavaScript, but I donāt think this issue goes beyond PHP and HTML/CSS.
It looks like you are approaching this by checking for the home page and adding the div there.
<?php
if (is_home()) { ?>
<div class="nk-trending"> </div>
<?php } ?>
Then, my next thought is about the class, nk-trending. That class is not in the stylesheet and also has nothing to do with the elements you are trying to remove on everything but the homepage. It is the <ul> with a class of sections-wrapper that you want to inject on your home page.
<ul class="sections-wrapper"> <!-- HIDE ME, not nk-trending -->
<div><span><div style=" color:#fff; font-size: 17px; " class="kittab tablink"> <li id="tabs2""> <span class="a active"><div class="sections-wrapper">
<input id="tabs-2" class="posts-section-link trending-posts-input" type="radio" name="tabs" checked="">
<label for="tabs-2"> TRENDING POST </label></span></li></div> </span>
<div class="kittab tablink"><li id="tabs1" "> <span class="b"> <input id="tabs-1" class="posts-section-link latest-posts-input" type="radio" name="tabs">
<label for="tabs-1">LATEST POST<span class="new-label">new</span></label></span> </li></div></div>
</ul> </div> </div> </div>
It may only work to adjust the PHP to remove the sections-wrapper by changing its class when the visitor is not on the home page:
<?php
if (!is_home()) { ?>
preg_replace('#<div class="hidden">(.*?)</div>#', ' ', $incoming_data);
<?php } ?>
(I donāt even think this is exactly right, but I do think you can use preg_replace() to find the class and change it to a new class called hidden.)
and add in to your CSS files:
.hidden { display:none; }
Again, nk-trending is nowhere (unless you can show me in that confusing code where it is and what it has to do with sections-wrapper (the real element container that you want to hide).
I wish I had a more direct answer for you, but WordPress code is nearly impossible to read.
Are you saying that if you corrected some of the validation errors (like the obvious āā typos and stuff) that the scripts would not allow it to work or something? I know nothing about WordPress, but I know why it would make sense for people to use a CMS.
Hello friend. I was able to get this working. I hard to go back to carrington theme and pick the tab used by the developer to show recent post ad pages and from there it was easier for me to achieve that. Please do you have time to check for me. I am trying to get a specific word styled differently whenever it appears in a post I make. I know about the use of span but I want this to happen automatically with a predefined style for the exact word. Please is this possible? Am not too good on Javascript.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.