Can you please advise which is the most appropriate way to append classes dynamically to the 's below based on the ID of the post?
The goal is to add a class to some of the div's depending on the ID of the post being even or odd.
<div class="service__preview">
<div class="row mb-5">
<div class="col-4">
<div class="row">
<div class="col-5 // here I want to dynamically add order-2 if get_the_ID() is even">
<div class="service__preview service__preview-id">
<?php echo get_the_ID() + 1;?>
</div>
</div>
<div class="col-7 // here I want to dynamically add order-1 if get_the_ID() is even">
<div class="service__preview service__preview-icon">
<div class="icon__container icon__container-3x">
<div class="icon__container icon__container-2x">
<div class="icon__container icon__container-1x">
<i class="<?php echo get_post_meta($post->ID, 'service_icon', true); ?> fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<a class="service__preview service__preview-title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
<p class="service__preview service__preview-description"><?php the_content(); ?></p>
<a class="service__preview service__preview-link" href=" <?php the_permalink(); ?>"><p>Learn more</p></a>
</div>
</div>
Looking forward to your suggestions.
FYI: the project is a WordPress template.
Related
I'm building a site in Wordpress that featured a list of events (posts) at can be categorized into different cities (Categories).
I'm aiming to be able to filter these events (posts) by the city (Category) in which they appear.
How do I filter the events by category?
Any help would be greatly appreciated, thank you.
Wordpress Categories assigned to Event posts
Event = cat4
City A = cat6
City B = cat5
Uncategorized = cat7
<div class="row justify-content-center row-padding" id="brands">
<div class="col-9">
<div class="row justify-content-center">
<div class="col-10">
<div class="animatedParent animateOnce">
<?php if( get_field('brands_title') ):?>
<h1 class="mb-3 animated fadeInUpShort"><span><?php the_field('events_title');?></span></h1>
<?php endif;?>
<?php if( get_field('brands_intro') ):?>
<h4 class="mb-5 animated fadeInUpShort"><?php the_field('events_intro');?></h4>
<?php endif;?>
</div>
</div>
<div class="col-1">
</div>
<div class="col-1 align-self-center animatedParent animateOnce" style="z-index:99;">
<div class="dropdown animated fadeInUpShort">
<button class="btn filter-button dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Filter by City
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">City A</a></li>
<li><a class="dropdown-item" href="#">City B</a></li>
<li><a class="dropdown-item" href="#">Uncategorized</a></li>
</ul>
</div>
</div>
</div>
<div class="row justify-content-center animatedParent animateOnce" data-sequence="100">
<?php
$brandPosts = new WP_Query('cat=4&posts_per_page=99');
if ($brandPosts->have_posts()) {
$i=1;
while ($brandPosts->have_posts()) {
$brandPosts->the_post();
?>
<div class="col-4 animated fadeIn mb-5 pb-3" data-id="<?php echo $i; ?>">
<div class="row justify-content-center">
<div class="col-12 text-center">
<img alt="<?php the_title(); ?>" src="<?php the_post_thumbnail_url(); ?>" class="img-fluid rounded-circle mb-3">
</div>
</div>
<div class="row">
<div class="col-10 offset-2">
<h2 class="mb-0"><?php the_title(); ?></h2>
<p><?php echo excerpt(16); ?></p>
See More
</div>
</div>
</div>
<?php
$i++;
}
} else {
//echo 'No content found';
}
wp_reset_postdata();
?>
</div>
</div>
</div>
Why not create a custom WordPress template for example country-posts-archive.php and implement a custom post query with the desired filters.
$categories_args = array(
'orderby' => 'menu_order', //prefered order
'taxonomy' => 'product_cat', // the taxonomy we want to get terms of
'exclude' => '17, 69', //exclude something
);
and then use it in a wp post loop, also you can play around in orderby.php
Or, simply non-coding way just use side Plugin, for example:
https://wordpress.org/plugins/blog-designer/
Also you can do it in a bit tricky way, populate dropdown with links to archive pages e.g.
www.website.com/category/your-category
Hellow,
im trying to code a custom theme for my wordpress site. im trying to output 5 of my posts and i want to wrap them into a link. however when i foreach() through the posts and want to wrap my html in an tag with the permalink it wont work.
The code i wrote:
<?php
global $post;
$myposts = get_posts( array(
'posts_per_page' => 5,
) );
if ( $myposts ) {
foreach ( $myposts as $post ) :
setup_postdata( $post ); ?>
<div class="container-fluid">
<a class="post-link" href="<?php echo the_permalink();?>">
<div class="post-post p-5">
<div class="row">
<div class="col-md-12">
<?php the_category('<p></p>'); ?>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3><?php the_title(); ?></h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<small><?php the_author(); ?></small>
</div>
</div>
</div>
</a>
</div>
<?php
endforeach;
wp_reset_postdata();
}
?>
But the code which ends up on the site is complete junk and it closes the a tag before the next div. what did i do wrong?
The code which lands on the site:
<div class="container-fluid">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
<div class="post-post p-5">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
<div class="row">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
<div class="col-md-12">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
Allgemein </div>
</div>
<div class="row">
<div class="col-md-12">
<h3>öööööö</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<small>root</small>
</div>
</div>
</div>
</div>
WordPress' the_permalink() function prints the link with the tags.
Use get_the_permalink() function instead of the_permalink() for "echo"ing the link wherever needed.
It looks like you are trying to place an anker inside an anker this is not allowed, the output of your html is likely parsed / interpreted by your browser try looking at the sourcecode instead of the html after parsing by your browser. in chrome you can do so by visiting view-source:http://yourdomain.com
Not sure for other browsers, you can try right clicking in the page and select view source
I have custom post type of doctors. When the name is clicked it will take to the single page of the doctor. Below there is a small div which displays a number of posts. I dont want the post which is already displayed at the top to be at the bottom.
this is the code i have done:
<?php foreach($dr as $doc){ ?>
<div class="col-md-4">
<img src="<?php echo get_the_post_thumbnail_url($doc->ID);?>" class="img-reposive img-circle dc-img mb50" alt="" />
</div>
<div class="col-md-8">
<div class="dr-single-box">
<h3 class="dr-single-tile"><?php echo $doc->post_title; ?></h3>
<div class="sub-tile"><?php echo get_post_meta($doc->ID,'Department',true); ?></div>
<div class="dc-single-social">
<p><?php echo $doc->post_content; ?></p>
make an appointment
<div class="row">
<div class="col-md-4">
<h3 class="mb10">Qualifications</h3>
<p><?php echo get_post_meta($doc->ID,'Qualifications',true); ?></p>
</div>
the bottom portion looks like this :
<?php $arg=array('post_type'=>'doctors','post_status'=>'publish','posts_per_page'=>4,'offset'=>1) ;
$doctor_data=get_posts($arg);
/*var_dump($doctor_data);*/ ?>
<div class="lightbg ptb80">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1 class="heading-title">Doctors</h1>
</div>
</div>
<div class="row">
<?php foreach($doctor_data as $doctor) { ?>
<div class="col-lg-3 col-md-3">
<div class="dc-style-box">
<img src="<?php echo get_the_post_thumbnail_url($doctor->ID); ?>" class="img-responsive" alt="Doctor 1" />
<div class="dc-style-inner">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
<h5><?php echo $doctor->post_title; ?></h5>
<span><?php echo get_post_meta($doctor->ID,'Department',true);?></span>
</div>
</div>
</div>
can anyone shed some light to guide me ? ?
<?php
$cur = get_the_ID();
$arg=array('post_type'=>'doctors','post_status'=>'publish','posts_per_page'=>4,'offset'=>1, 'post__not_in' => $cur) ;
$doctor_data=get_posts($arg);
/*var_dump($doctor_data);*/ ?>
<div class="lightbg ptb80">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1 class="heading-title">Doctors</h1>
</div>
</div>
<div class="row">
<?php foreach($doctor_data as $doctor) { ?>
<div class="col-lg-3 col-md-3">
<div class="dc-style-box">
<img src="<?php echo get_the_post_thumbnail_url($doctor->ID); ?>" class="img-responsive" alt="Doctor 1" />
<div class="dc-style-inner">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
<h5><?php echo $doctor->post_title; ?></h5>
<span><?php echo get_post_meta($doctor->ID,'Department',true);?></span>
</div>
</div>
</div>
Hi, You should add 'post__not_in' to exclude current post to be fetched in second loop. Try this code. Let me know if you need any more assistance.
Thanks.
According to your comment you wish to display random posts therefore use below $arg instead of yours.
$arg = array('post_type'=>'doctors',
'post_status'=>'publish',
'posts_per_page'=>4,
'offset'=>1,
'orderby' => 'rand'
);
I'm developing a website in wordpress and I want to load more news when scrolling but I already have a html structure and when I put ajax load more it put own structure and I don' want that.
I'm using the Ajax Load More plugin.
So, How can I use Ajax load more with this html structure:
<?php
$posts = get_posts(['cat' => get_cat_ID("news")]);
foreach($posts as $post){
setup_postdata($post);
?>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="news-link" href="<?php the_permalink() ?>">
<div class="news">
<div class="image">
<?php the_post_thumbnail('thumbnail') ?>
<div class="mask">
<div class="icon">
<i class="icon-plus"></i>
</div>
</div>
</div>
<div class="title">
<span>
<?php the_title(); ?>
</span>
</div>
<div class="excerpt">
<p class="date">
<?php echo get_the_date('Y-m-d'); ?>
</p>
</div>
<div class="excerpt">
<p>
<?php the_excerpt(); ?>
</p>
</div>
</div>
</a>
</div>
<?php
wp_reset_postdata();
} ?>
If i put this shortcode it shows but not with the structure that i want.
[ajax_load_more id="7279302844" container_type="div" post_type="post" category="news"]
Thank you
how to retrieve data from mysql by id to another page?
Example:
<div class="col-md-12">
<div class="row">
<?php while($posts = mysqli_fetch_assoc($featured)): ?>
<div class="col-xs-12 col-md-6">
<div class="thumbnail">
<img src="<?=$posts['image']; ?>" alt="<?=$posts['title']; ?>">
<span class="pull-right"><?=$posts['date_info'];?></span>
<div class="caption">
<h3><?=$posts['title']; ?></h3>
<p><?php echo substr($posts['description'],0,300); ?></p>
<p>More..</p>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
When i click More button, it would be display more information in another page.