I've added to my single-post.php a code to display the post categories above the title, it looks good here:
http://thenoirportrait.com/2014/08/23/review-chanel-perfection-lumiere-velvet/
But not here:
http://thenoirportrait.com/2015/03/04/interior-design-black-home/
I have different post templates. What can I do to make the category change it's position with every post?
I think I should put my category code in the Archives.php but I'm not sure where. I don't want to mess up my code, any help is welcome.
This is what I have at the moment:
<div class="row<?php echo (($behind_title_fw) ? ' full-width' : ''); ?>">
<div class="inner_content">
<div class="row<?php echo (($has_sidebar) ? ' has-sidebar' : ''); ?>">
<div itemscope="" itemtype="http://schema.org/BlogPosting">
<?php if($sidebar_below_title && !$is_endless_template) : ?>
<div class="medium-12">
<?php foreach((get_the_category()) as $category) {
echo $category->cat_name . ' ';
}
?>
<br>
<br>
<article id="post-header-<?php the_ID(); ?>" class="article-header-above" data-postid="<?php echo esc_attr($post->ID); ?>" data-guid="<?php echo esc_attr(get_the_guid($post->ID)); ?>" data-permalink="<?php echo esc_url(get_permalink($post->ID)); ?>">
Thank you
The first post's class has a width of 12:
<div class="row">
<div class="inner_content">
<div class="row">
<div itemscope="" itemtype="http://schema.org/BlogPosting">
REVIEWS <br><br>
<div class="medium-12 column">
...
But the second one, a width of 8:
<div class="row">
<div class="inner_content">
<div class="row">
<div itemscope="" itemtype="http://schema.org/BlogPosting">
INTERIOR DESIGN<br><br>
<div class="medium-8 column">
...
The key to align the second category (or whatever) is by putting it inside the div which defines the column size. Therefore, the category will be always center-aligned with the post:
<div class="row">
<div class="inner_content">
<div class="row">
<div itemscope="" itemtype="http://schema.org/BlogPosting">
<div class="medium-8 column">
INTERIOR DESIGN<br><br>
...
Related
I'm trying to pull an image to show in a slider, using ACF. No matter what I try, it won't work. Here's the backend code:
<?php get_header();?>
<?php $banner = get_field('banner');?>
<!-- Carousel Start -->
<div class="container-fluid p-0 wow fadeIn" data-wow-delay="0.1s">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<?php $image = get_field('slider_image_1'); if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<h1 class="display-2 text-light mb-5 animated slideInDown"><?php echo $banner['headline_1'];?></h1>
Our Services
</div>
</div>
</div>
</div>
</div>
I've tried different codes. Image will not show.
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 a custom post type "case_studies" i want posts from this, to arrange in a following way.
<div class="col-sm-3 nopadding">
IMAGE
</div>
<div class="col-sm-3 ">
TEXT
</div>
<div class="col-sm-3 nopadding">
IMAGE
</div>
<div class="col-sm-3 ">
TEXT
</div>
<!--
Column Ends
3rd & 4th posts
-->
<div class="item">
<div class="col-sm-6 nopadding">
IMAGE
</div>
<div class="col-sm-6">
TEXT
</div>
</div>
<div class="item">
<div class="col-sm-6 nopadding">
IMAGE
</div>
<div class="col-sm-6">
TEXT
</div>
</div>
<!--
Column Ends
-->
Then again first & second post type column after that again 4th & 5th post type column same loop goes on. note that each column ends after 2 posts & styles are diffrent. how can i achieve this
in short odd columns must have 2 posts which wrapped with col-sm-3, even columns also have 2 posts each one wrapper with col-sm-6.
Try this code.
<?php
$loop = new WP_Query( array( 'post_type' => 'case_studies') );
$Inc = 1;
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if($Inc==1){ ?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else if($Inc==2){ ?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else if($Inc==3){ ?>
<div class="item">
<div class="col-sm-6 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-6">
<h2><?php echo get_the_title(); ?></h2>
</div>
</div>
<?php }else if($Inc==4){ ?>
<div class="item">
<div class="col-sm-6 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-6">
<h2><?php echo get_the_title(); ?></h2>
</div>
</div>
<?php } ?>
<?php
if($Inc==4){
$Inc =1;
}
$Inc++;
endwhile;
endif;
wp_reset_postdata();
?>
I have a chunk of content in a textarea that I can call dynamically to the front by using <php the_content ?> See full code below.
The problem is, I dont have an assigned area for the image. (I'm open to options to create one but I think it will be too much effort), anyway, is there anything I can do (JQuery / JS is fine) that I can call the image to fill the: <?php echo $the_content['image'] ?> that you see in my code, which obviously does not work? Meanwhile leaving the actual text part or rest of the content separate.
I am attaching an illustration for a more visual idea of what I am looking for
Here is the entire code for that section
<section class="box classes-box" id="classes_box"><!-- Section Events -->
<div class="container light-grey-background">
<div class="row">
<div class="col-md-6 no-padding">
<div class="boxing-classes" style="background-image: url('<?php echo $the_content['image'] ?>')">
<div class="classes">
<nav class="classes-nav">
<ul class="clean-list toggle-list clearfix">
<?php foreach($slides as $i => $slide): ?>
<li class="classes-menu-item ">
<input type="radio" id="toggle-<?php echo $slide['post']->ID; ?>" name="toggle-helper" autocomplete="off">
<label for="toggle-<?php echo $slide['post']->ID; ?>"><?php echo get_the_title( $slide['post']->ID ) ?></label>
</li>
<?php endforeach; ?>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-6 no-padding ">
<?php foreach($slides as $i => $slide): ?>
<div class="classes-content-block" id="classes_content_<?php echo $slide['post']->ID ?>" style="display:none;">
<header class="padding white-background">
<h2 class="entry-header black-background"><?php echo get_the_title( $slide['post']->ID ) ?></h2>
</header>
<div class="entry-content padding">
<?php echo apply_filters('the_content', $slide['post']->post_content); ?>
<?php if ( !empty( $slide['options']['button'] )): ?>
<div class="white-background">
<a class="read-more text-center red-black-hover" href="<?php echo $slide['options']['button']['link'] ? $slide['options']['button']['link'] : '#'; ?>"><?php echo $slide['options']['button']['link_text'] ? $slide['options']['button']['link_text'] : 'View Timeline' ; ?></a>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
Normally, what people do is to create a Shortcode that will produce the desired HTML, something like:
[image-block src="apple-touch-icon.png" class="all-imgs" id="my-img"]The content[/image-block]
This would be the shortcode:
add_shortcode( 'image-block', function( $atts, $content) {
return sprintf(
'<div class="left"><img src="%1$s" class="%2$s" id="%3$s"></div><div class="right">%4$s</div>',
$atts['src'],
$atts['class'],
$atts['id'],
$content
);
});
And this the output:
See CSS property FLOAT : left|right
<div id=container class="clearfix">
<div class="image-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<img src="images/mypicture.jpg" alt="" class="rwd-image" id="mymage">
</div>
<div class="content-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<p>Lorem Ipsum</p>
</div>
</div>
I am trying to create a loop for a group of divs that are being entered in as Pods via Wordpress admin panel.
I have the Pods setup. I could have them setup improperly, but I believe they are setup correctly. I have one Pod and the info is as follows:
Pods Information:
Label: advisors
Name: advisor
Type: Custom Post Type
Storage Type: Meta
Number of Fields: 2
Field 1 Information:
Label: Advisor Name
Name: advisor_name
Field Type: Plain Text
Field 2 Information:
Label: Advisor Title
Name: advisor_title
Field Type: Plain Text
The HTML I am trying to replicate is:
<div class="small-container text-center advisor-list">
<h1 class="text-center">Header Title</h1>
<div class="row gutter-0 padding-30 text-center vpadding-30 ">
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2>Name</h2>
<h4>Title</h4>
</div>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2>Name</h2>
<h4>Title</h4>
</div>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2>Name</h2>
<h4>Title</h4>
</div>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2>Name</h2>
<h4>Title</h4>
</div>
<button id="showPartners" class="bttn bttn-4 bttn-4a vpadding-30">View Our List of Partners</button>
</div>
This is as far as I have gotten with the PHP:
<div class="small-container text-center advisor-list">
<h1 class="text-center">Header Title</h1>
<div class="row gutter-0 padding-30 text-center vpadding-30 ">
<?php
function get_the_pod($pod_name, $pod_fields, $order = 'name'){
$item_no=0;
$pod = new Pod($pod_name);
$pod->findRecords($order);
while ($pod->fetchRecord()){
foreach ($pod_fields as &$field){
$results[$item_no][str_replace(".guid","",$field)] = $pod->get_field($field);
if($field == end($pod_fields)){$item_no++;}
}
}
return $results;
}
?>
<?php $fields = array('name'); ?>
<?php $advisors = get_the_pod('advisors', 'name DESC'); ?>
<?php foreach($advisors as $advisor){ ?>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2 ><?php echo $item['advisor_name']; ?></h2>
<h4><?php echo $item['advisor_title']; ?></h4>
</div>
<?php } ?>
<button id="showPartners" class="bttn bttn-4 bttn-4a vpadding-30">View Our List of Partners</button>
</div>
</div>
If anyone has any input, it would be greatly appreciated.
Thanks
You are using Pods 1.X methods. Here is much simpler code using Pods 2.X methods.
You will want to check out the docs pages for pods() and pods::find(), which has the infromation about how to set $param for pods(), for more information.
<?php
$param = array( 'orderby' => 't.name' );
$advisors = pods('advisors', $param );
foreach($advisors as $advisor) {
$advisor_name = $advisor->field( 'advisor_name' );
$advisor_title = $advisor->field( 'advisor_title' );
?>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png" />
<h2><?php echo $advisor_name; ?></h2>
<h4><?php echo $advisor_title; ?></h4>
</div>
<?php } //end foreach
?>
Pods posts within loop using core Wordpress loop type and structure, you can use it with your own data values
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php
$team = new Pod('sliders');
$team->findRecords('slider_number ASC');
$total_members = $team->getTotalRows();
?>
<?php if( $total_members>0 ) : ?>
<?php while ( $team->fetchRecord() ) : ?>
<?php
// set our variables
echo $member_id = $team->get_field('id');
echo $member_name = $team->get_field('post_title');
echo $number = $team->get_field('slider_number');
echo $img = $team->get_field('slide_img._img');
?>
<?php endwhile ?>
<?php endif ?>
</div>
</div>
<?php endwhile; endif; ?>