I'm trying to create 3 columns with bootstrap and Wordpress. I want my category posts to be in 3 columns. But instead of 3 columns, when I view the category page, they're in one column, stacked on top of each other. What am I doing wrong? This is my archive.php template
<?php if(have_posts() ): while(have_posts()): the_post();?>
<div class="container">
<div class="row">
<div class="col-md-4 post-card">
<?php if(has_post_thumbnail()):?>
<a href="<?php the_permalink();?>"><img src="<?php the_post_thumbnail_url('blog-small');?>" alt="<?php the_title();?>" class="img-fluid mb-3 img-thumbnail">
<?php endif;?>
<a href="<?php the_permalink();?>"><h2 class="h2 text-center mb-3"><?php the_title();?></h2>
Read more
</div>
</div> </div>
Related
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.
I think that some help will be appreciated. I have this code that will load two template part for a wordpres custom theme:
<div class="row m-0">
<?php get_template_part('assets/main', 'news'); ?>
<?php get_template_part('assets/side', 'news'); ?>
</div>
As you can see under the hood I'm using bootstrap 4 so it's supposed that the content will align itself inside the same row.
I have a col-8 inside the main-news.php and a col-4 inside the side-news.php so I supposed that I will have the contents aligned, but this will not happen and my layout will break.
this is the code inside the main.news.php teplate part:
<?php $main_news = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'main-news', 'posts_per_page' => 4) ); ?>
<!-- main -->
<div class="col-sm-12 col-md-8 col-lg-8 mt-2">
<p class="text-uppercase font-weight-bold mb-0 section-title"><?php _e('Last news') ?></p>
</div>
<?php if( $main_news->have_posts() ): while( $main_news->have_posts() ): $main_news->the_post(); ?>
<div class="col-sm-12 col-md-8 col-lg-8 mt-2 mb-2">
<div class="card rounded-0 p-0">
<img class="card-img-top w-100 h-100 rounded-0" src="<?php echo the_post_thumbnail_url(); ?>" />
<div class="card-img-overlay news-overlay">
<a class="h4 stretched-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
</div>
</div>
<?php endwhile; endif; wp_reset_postdata() ?>
this is the content of side-news.php
<?php $middle_news = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'market-news', 'posts_per_page' => 4 ) ); ?>
<div class="col-sm-12 col-md-4 col-lg-4">
<p class="text-uppercase font-weight-bold mb-0 section-title"><?php _e('Side news') ?></p>
</div>
<?php if( $middle_news->have_posts() ): while( $middle_news->have_posts() ): $middle_news->the_post(); ?>
<div class="col-sm-12 col-md-4 col-lg-4 mt-2 mb-2">
<img class="img-fluid w-100" src="<?php echo the_post_thumbnail_url(); ?>" />
<a class="h4 stretched-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
How I can fix the layout to have the col-8 and the col-4 on the same row line?Maybe I need to nest the loops or what?
See the scree to understand what's happening now
your mistake is inside the main-news.php file.
look, you defined these (col-sm-12 col-md-8 col-lg-8 ) for your first div tag in the main-news.php file so your div takes those columns and then you defined these (col-sm-12 col-md-8 col-lg-8 ) columns for the div tag inside of the loop at the same file so both divs take more than 12 columns just inside the main-news.php file whereas you defined (col-sm-12 col-md-4 col-lg-4) for the div inside of the side-news.php file again so these definitions break your code.
Solution: You should delete the columns definition from one of the divs inside the main-news.php file.
GOOD LUCK!!!
In wordpress i developed one theme heaving one portfolio section i applied lazy load.
i am facing problem with images not shown in proper manner(proper size).
enter image description here
<div class="col-lg-4 col-md-6 portfolio-item <?php echo strtolower($tax); ?>">
<div class="portfolio-wrap">
<img src="<?php the_field('image_loader', 'option'); ?>" data-echo="<?php echo $url; ?>" class="img-fluid " alt="">
<div class="portfolio-info">
<h4><?php the_title();?></h4>
<div>
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</div>
</div>
</div>
</div>
js file name echo.min.js
https://drive.google.com/drive/folders/1DHLLdv3CTEmukndqy8f-EUln6uYddcYy
reference youtube
https://www.youtube.com/watch?v=wUz6KYREkWM&t=654s
I've almost finished my first custom theme for a website. I've created some custom post type to manage a portfolio and a staff member section. No problem with the code, but the client asked if is it possible to change the staff images when an user hover on it. Is there any way to achieve this in wordpress?
Here is a sample of my code
<div class="team-boxed">
<?php
$args = array(
'post_type' => 'team'
);
$team = new WP_Query($args);
?>
<div class="intro">
<h2 class="text-center text-uppercase" id="">Team</h2>
</div>
<div class="row people">
<?php if( $team->have_posts() ): while( $team->have_posts() ): $team->the_post(); ?>
<div class="col-md-6 col-lg-4 item">
<div class="box">
<div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic"></div>
<h3 class="team-name"><?php the_title(); ?></h3>
<p class="description text-center"><?php echo get_the_content(); ?></p>
<div class="social"><i class="fab fa-facebook"></i><i class="fab fa-twitter"></i><i class="fab fa-instagram"></i></div>
</div>
</div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>
</div>
Simplest way would be to output that like this. If you have ALT image stored in custom meta for example you can use that as SECOND IMAGE.
<img src="FIRST IMAGE" onmouseover="this.src='SECOND IMAGE'" onmouseout="this.src='FIRST IMAGE'" />
Other options include outputting some additional CSS or JS. But you can also use general JS with data attributes maybe to handle that with more options, animations etc.
I am using 'Advanced Custom Fields' and i have created an archive page to display posts from a custom post type of 'property_sales'
this is the full template
<article <?php post_class(); ?>>
<header>
<h2 class="entry-title"><?php the_title(); ?></h2>
</header>
<div class="location">
<?php the_field('location')?>
</div>
<div class="photoframe">
<img class="responsive" src="<?php the_field('property_image')?>" />
</div>
<div class="price">£
<?php the_field('price')?>
</div>
<div class="entry-summary">
<p>Added on <?php get_template_part('templates/property-meta'); ?></p>
</div>
<div class="rightmovelink">
View Full Listing
</div>
<div class="clear">
</article>
I was wondering what code I need to put in the tag in order to link to the post each image is associated with?
Try this one
<div class="photoframe">
<img class="responsive" src="<?php the_field('property_image')?>" />
</div>