So, i was wondering if there's a way to target a specific value in a <?php the_field('title'); ?> loop.
I'm iterating over a result set of people on a site. If title equals CEO it should display in another row.
<?php
/*
Template Name: Personal
*/
?>
<?php get_header(); ?>
<div id="main" class="fullpage" style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/fullpagebg.png);">
<section class="banner innerBanner">
<div class="container">
<div class="bannerContent">
<h1>Vår <strong>personal</strong></h1>
</div>
</div>
</section>
<section class="padtop0">
<div class="container-fluid">
<div class="productsMain">
<div class="row justify-content-center">
<?php
$loop = new WP_Query( array( 'post_type' => 'Persons') );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
<div class="personalbox" style="background-color: #f3f3f3; background-image: url(<?php echo get_field('bild'); ?>); background-size: <?php echo $background_size; ?>;">
<div class="personalbox-description">
<h4 style="color:#000000 !important;"><strong><?php the_field('Namn'); ?></strong></h4>
<h6 style="color:#000000 !important;;"><?php the_field('title'); ?></h6>
<br>
<h6 style="color:#000000 !important;"><strong>Telefon:</strong> <?php the_field('telefon'); ?></h6>
<h6 style="color:#000000 !important;"><strong>Mailt:</strong> <?php the_field('e-post'); ?></h6>
</div>
</div>
</a>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
Related
So I'm converting bootstrap site to Wordpress and post cards don't want to stack horizontally... I know there should be foreach loop which will loop through posts but I don't know how to set it up...
<?php while(have_posts()) {
the_post();
?>
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
</div>
</section>
<?php } ?>
while is also a loop. Inside the loop, you can just put the repeated code. As I've understood your code than you need to something like this:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
?>
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
Also, better to move code for one block to another file for example partials/post.php:
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
And update your current file:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
get_template_part( 'partials/post' );
} ?>
</div>
</div>
</section>
I'm trying to display a custom post type ' products' here:
The issue is, in the close future they will have 7 products which will leave one on a row on its own.
Is there a way I can alter the number of columns dynamically, So if there are 6 and under product it displays the posts I 3 columns, but if there are 7 items, it will display the posts section in 4 columns etc etc...
Or, is there a way I can allow the user to choose how many columns it displays in manually from the backend? I guess using something like Advanced Custom fields.
Ill be using a bootstrap based grid with a layout like this:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
so if either needs to change this structure dynamically based on the number of posts OR based on the number a user selects from a dropdown in the backend, to:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
Can anyone point me in the right direction to achieve this? I'm wondering if I'm overthinking it or indeed under-thinking it!
Thanks so much for looking!
PS - Heres what's I'm trying currently but it's not working...
<div class="container-flex our-products-strip">
<div class="lines-background-overlay" style="background-image: url(<?php bloginfo('stylesheet_directory'); ?>/images/background-stripes2.png);"></div>
<div class="container strip-padding">
<h2>Our Products</h2>
<hr class="hr-blue-more-bottom-space">
<div class="row justify-content-center">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $data = new WP_Query(array( 'post_type' => 'products' ));?>
<?php if(count($data) < 6 ){?>
<div class="col-md-6 col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<a href="<?php the_permalink(); ?>">
<div class="click-overlay"></div>
</a>
<div class="logo">
<?php
$image = get_field('logo_light');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<?php }
else{ ?>
<div class="col-md-3 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<a href="<?php the_permalink(); ?>">
<div class="click-overlay"></div>
</a>
<div class="logo">
<?php
$image = get_field('logo_light');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<?php } ?>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
</div>
</div>
If you are using php then definitely you can put if condition to perform the check
below is the example
<?php if(count($data) <= 6){?>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
<?php }
else{ ?>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<? } >
I have some code below, and the pagination seems to be failing after the second page. I'm sure that I've done something wrong on one of the loops.
Can someone sanity check my code below for me?
<?php get_header();?>
<!-- Carousel -->
<div class="container fullwidth">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background:url(<?php echo esc_url( home_url( '/' ) ); ?>wp-content/uploads/2018/09/testphoto.jpg);">
<div class="container">
<div class="carousel-caption microstory">
<h1>Backstage Blog</h1>
</div>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div>
</div>
<!-- End Carousel -->
<!-- Posts -->
<div class="container paddingtop paddingbottom">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
// are we on page one?
if(1 == $paged) { ?>
<div class="row row-eq-height paddingbottom">
<?php $query = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=1' ); ?>
<?php if ( $query->have_posts() ) :?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-6 col-md-6 col-sm-6 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage"><?php the_post_thumbnail('full'); ?></div>
<div class="blog-column">
<div class="titledatemain">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time('F jS, Y'); ?></li>
</ul>
<p><?php the_excerpt(); ?></p>
</div>
Read More
</div>
</div>
</div>
<?php endwhile;?>
<?php endif; ?>
<?php $query2 = new WP_Query( 'post_type=advert&order=DESC&orderby=date&posts_per_page=1' ); ?>
<?php if ( $query2->have_posts() ) :?>
<?php while ( $query2->have_posts() ) : $query2->the_post();
$advert_url = get_post_meta($post->ID, 'url', true);
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); ?>
<div class="col col-lg-6 col-md-6 col-sm-6 col-xs-12 postpaddingbottom">
<a href="<?php echo $advert_url ?>"><div class="col-lg-12 col-xs-12 advertbox" style="background:url(<?php echo $featured_img_url ?>);">
</div></a>
</div>
<?php endwhile; endif; ?>
</div>
<?php
$query = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=3&offset=1&paged='. $paged ); ?>
<?php if ( $query->have_posts() ) :?>
<div class="row row-eq-height paddingbottom">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-4 col-md-4 col-sm-4 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage blogimagesmall" style="background:url(<?php the_post_thumbnail_url('full'); ?>);"></div>
<div class="blog-colum">
<div class="titledate">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time( 'F jS, Y' ); ?></li>
</ul>
</div>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<?php endif; ?>
<?php } else { ?>
<?php
$query = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=12&offset=4&paged='. $paged ); ?>
<?php if ( $query->have_posts() ) :?>
<div class="row row-eq-height paddingbottom">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-4 col-md-4 col-sm-4 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage blogimagesmall" style="background:url(<?php the_post_thumbnail_url('full'); ?>);"></div>
<div class="blog-colum">
<div class="titledate">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time( 'F jS, Y' ); ?></li>
</ul>
</div>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<?php
wp_reset_postdata();
endif; ?>
<?php } ?>
<div class="row paddingbottom">
<div class="pagenav">
<div class="alignleft"><?php previous_posts_link('Newer Posts', $query- >max_num_pages) ?></div>
<div class="alignright"><?php next_posts_link('Older Posts', $query->max_num_pages) ?></div>
</div>
</div>
</div>
<!-- End Posts -->
<?php get_footer();?>
I'm sure that there is just a mistake in my loop. I have essentially got a different layout on the first page to the rest of the pages (as you will see).
It just seems that after page 2, when you go to the 3rd page, it just keeps displaying the 2nd page content.
Any help would be great.
Here is the updated code:
<?php /* Template Name: Blog Page */ ?>
<?php get_header();?>
<!-- Carousel -->
<div class="container fullwidth">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background:url(<?php echo esc_url( home_url( '/' ) ); ?>wp-content/uploads/2018/09/testphoto.jpg);">
<div class="container">
<div class="carousel-caption microstory">
<h1>Backstage Blog</h1>
</div>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div>
</div>
<!-- End Carousel -->
<!-- Posts -->
<div class="container paddingtop paddingbottom">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
// are we on page one?
$query = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=12&paged='. $paged );
if(1 == $paged) { ?>
<?php if ( $query->have_posts() ) { ?>
<div class="row row-eq-height paddingbottom">
<?php $temp_query2 = $wp_query2; ?>
<?php $query3 = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=1' ); ?>
<?php while ( $query3->have_posts() ) : $query3->the_post(); ?>
<div class="col col-lg-6 col-md-6 col-sm-6 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage"><?php the_post_thumbnail('full'); ?></div>
<div class="blog-column">
<div class="titledatemain">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time('F jS, Y'); ?></li>
</ul>
<p><?php the_excerpt(); ?></p>
</div>
Read More
</div>
</div>
</div>
<?php endwhile; ?>
<?php $wp_query2 = $temp_query2; ?>
<?php $temp_query = $wp_query; ?>
<?php $query2 = new WP_Query( 'post_type=advert&order=DESC&orderby=date&posts_per_page=1' ); ?>
<?php while ( $query2->have_posts() ) : $query2->the_post();
$advert_url = get_post_meta($post->ID, 'url', true);
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); ?>
<div class="col col-lg-6 col-md-6 col-sm-6 col-xs-12 postpaddingbottom">
<a href="<?php echo $advert_url ?>"><div class="col-lg-12 col-xs-12 advertbox" style="background:url(<?php echo $featured_img_url ?>);">
</div></a>
</div>
<?php endwhile; ?>
<?php $wp_query = $temp_query; ?>
</div>
<div class="row row-eq-height paddingbottom">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-4 col-md-4 col-sm-4 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage blogimagesmall" style="background:url(<?php the_post_thumbnail_url('full'); ?>);"></div>
<div class="blog-colum">
<div class="titledate">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time( 'F jS, Y' ); ?></li>
</ul>
</div>
</div>
</div>
</div>
<?php endwhile;
rewind_posts();
}?>
</div>
<?php } else { ?>
<div class="row row-eq-height paddingbottom">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-4 col-md-4 col-sm-4 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage blogimagesmall" style="background:url(<?php the_post_thumbnail_url('full'); ?>);"></div>
<div class="blog-colum">
<div class="titledate">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time( 'F jS, Y' ); ?></li>
</ul>
</div>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<?php wp_reset_postdata(); ?>
<?php } ?>
<div class="row paddingbottom">
<div class="pagenav">
<div class="alignleft"><?php previous_posts_link('Newer Posts', $query->max_num_pages) ?></div>
<div class="alignright"><?php next_posts_link('Older Posts', $query->max_num_pages) ?></div>
</div>
</div>
</div>
<!-- End Posts -->
<?php get_footer();?>
You should see i'm now running one loop which is nice.. but I have put the first post in its own loop within a loop to show the first post. The issue i'm having now is that I want to on the main loop and only on the first page, have an offset of 1. But I can't work out how to do this just on the first page :(
Here is showing only last created post when i am clicking on readmore button of post.
remember i have called all posts on another template(our_program.php inplace of index.php) all posts are showing well but on single.php here is only only one recent post showing when i am clicking on read more of any post. my single.php code is below
<?php $args = array( 'post_type' => 'post');
query_posts($args);
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<section class="talent-development" id="telent-development">
<div class="container">
<div class="row">
<div class="section-content-text clearfix">
<div class="col-sm-12">
<h2><?php the_title(); ?></h2>
</div>
<div class="col-sm-5">
<div class="ourProgramImg">
<?php if( has_post_thumbnail()){
the_post_thumbnail();
}
?>
</div>
</div>
<div class="col-sm-7">
<div class="ourProgramContent">
<p>
<?php the_content();?>
</p>
</div>
</div>
</div>
<!--<div class="col-sm-6">
<div class="section-content-img">
<img src="img/sec.jpg" alt="" title="" />
</div>
</div>-->
</div>
</div>
</section>
<?php endwhile; else: ?>
<p> Not post Found </p>
<?php endif; ?>
and post page(permalink) code below
<?php $args = array( 'post_type' => 'post');
query_posts($args);
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<section class="talent-development" id="telent-development">
<div class="container">
<div class="row">
<div class="section-content-text clearfix">
<div class="col-sm-12">
<h2><?php the_title(); ?></h2>
</div>
<div class="col-sm-5">
<div class="ourProgramImg">
<?php if( has_post_thumbnail()){
the_post_thumbnail();
}
?>
</div>
</div>
<div class="col-sm-7">
<div class="ourProgramContent">
<p>
<?php echo substr(get_the_excerpt(), 0, 400); //the_content();?>
</p>
Read More
</div>
</div>
</div>
<!--<div class="col-sm-6">
<div class="section-content-img">
<img src="img/sec.jpg" alt="" title="" />
</div>
</div>-->
</div>
</div>
</section>
<?php endwhile; else: ?>
<p> Not post Found </p>
<?php endif; ?>
I'm working on a wordpress theme, and i want to be able to apply a css change to all pages instead of just one page, for example, the frontpage only is applying changes on the front page, i want to be able to call this in the functions.php, however im not so sure how to call it.
In a nutshell, how to call css in a php function, in the functions.php file
Any Suggestions ?
template-frontpage.php
<?php
/**
* Template Name: Front Page
*
* #package Eli
*/
get_header();
$hero = cs_get_option('hero_image');
?>
<style type="text/css">
.hero:before{
background-color:<?php echo cs_get_option('hero_color_picker');?>;
}
.hero:after{
background-color:<?php echo cs_get_option('hero_color_picker');?>;
}
a{
color: <?php echo cs_get_option('link_color');?>;
}
footer a{
color:<?php echo cs_get_option('link_color');?>; ;
}
</style>
<div class="row">
<div class="hero" style="background-image:url(<?php echo $hero; ?>); width:100%; min-height:350px; background-size: cover;">
<div class="container">
<div class="col-md-12">
<header class="hero-text">
<?php if (get_field('hero_title') ):?>
<h1 style="color:#fff;"><?php the_field('hero_title'); ?></h1>
<?php endif;?>
<?php if (get_field('hero_span') ):?>
<span><?php the_field('hero_span'); ?></span>
<?php endif;?>
<?php if (get_field('hero_span_2') ):?>
<span id="move"><?php the_field('hero_span_2'); ?></span>
<?php endif;?>
</header>
</div>
</div>
</div>
</div>
<section class="section-home">
<div class="row">
<div class="container">
<div class="line"></div>
<?php if (get_field('content_block_left') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_icon'); ?>
<?php the_field('content_block_left'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left2') ):?>
<div id="cbl" class="col-md-4 col-xs-12 ">
<?php the_field('content_block_left_2_icon'); ?>
<?php the_field('content_block_left2'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left3') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_3_icon'); ?>
<?php the_field('content_block_left3'); ?>
</div>
<?php endif;?>
</div>
</div>
</section>
<div class="section-about">
<div class="row">
<h1>Beat Your Rivals</h1>
<div class="line"></div>
<div class="container">
<?php if (get_field('image_left') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<img src="<?php echo the_field('image_left'); ?>" width:"400px" height:"300px">
</div>
<?php endif;?>
<?php if (get_field('caption_text') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<?php the_field('caption_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image2 = get_field('test_image');
?>
<div class="section-test" style="background-image:url(<?php echo $image2['url'];?>); width:100%; min-height:300px; background-size: cover;">
<div class="row">
<div class="container">
<?php if (get_field('test_text') ):?>
<div id="cbl3" class="col-md-12 col-xs-12">
<?php the_field('test_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<div class="about-us">
<div class="row">
<div class="container">
<?php if (get_field('about_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('about_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image3 = get_field('cons_image');
?>
<div class="consult">
<div class="row">
<div class="my-block-left" style="background-image:url(<?php echo $image3['url'];?>); background-size: cover;" >
<div class="container">
<?php if (get_field('consult_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('consult_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
</div>
<?php if (get_field('contact_us') ):?>
<div class="contact-us">
<div class="row">
<div class="container">
<h1 class="contact-h1">Contact Us</h1>
<div class="line"></div>
<div class="col-md-12 col-xs-12">
<?php the_field('contact_us'); ?>
</div>
</div>
</div>
</div>
<?php endif;?>
<?php get_footer(); ?>
Not sure if you want to know how to enqueue css or how to limit css to specific pages so
To include styles use in your function.php
function site_styles() {
wp_register_style( 'global-css', get_template_directory_uri() . '/assets/css/global.css');
wp_register_style( 'frontpage-only-css', get_template_directory_uri() . '/assets/css/frontpage.css');
}
add_action('init', 'site_styles');
than you can decide where to use or not those styles
// is_front_page()
// is_page(XX) - is page id XX
// is_single() && get_post_type()="custom_post_type" - single for custom posts
// more about conditional tags: https://codex.wordpress.org/Conditional_Tags
function enqueue_styles() {
if ( is_front_page() ) {
wp_enqueue_style( 'frontpage-only-css' );
} else {
wp_enqueue_style( 'global-css' );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );