Array wordpress php - php

I want to create a portfolio in wordpress.
It is working properly but I would like to see the categories of the portfolio in h3 under the h2 title.
Other question.
Now the link will only work on the title h2, I wish it were all over the caption as link.
any advice on the code are welcome! Thank you so much
<?php
$args = array( 'post_type' => 'portfolio', 'posts_per_page' => -1 );
$loop = new WP_Query( $args );
$terms = get_the_terms( $post->ID, 'portfolio-categories' );
if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();
foreach ( $terms as $term ) {
$links[] = $term->name;
}
$tax_links = join( " ", str_replace(' ', '-', $links));
$tax = strtolower($tax_links);
else :
$tax = '';
endif;
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="row-masonry">';
echo '<div class="item">';
echo '<div class="well portfolio-item no-gutter">';
echo '<div class="thumbnail no-gutter">'. get_the_post_thumbnail() .'</div>';
echo '<div class="caption">';
echo '<div class="vertical-align">';
$link = get_the_permalink();
echo "<a href=$link>";
echo '<h2>'. get_the_title() .'</h2>';
I want to see here the portfolio image category in h3
echo "</a>";
echo '</div>'; /*close caption*/
echo '</div>'; /*close caption*/
echo '</div>';
echo '</div>';
endwhile;
echo '</div>';
echo '</div>';
echo '</div>';
?>
</div><!-- #page -->

This should work for you. You can google how to get the category for a post. It will yield your answer - but this will work.
<?php
$args = array( 'post_type' => 'portfolio', 'posts_per_page' => -1 );
$loop = new WP_Query( $args );
$terms = get_the_terms( $post->ID, 'portfolio-categories' );
if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();
foreach ( $terms as $term ) {
$links[] = $term->name;
}
$tax_links = join( " ", str_replace(' ', '-', $links));
$tax = strtolower($tax_links);
else :
$tax = '';
endif;
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="row-masonry">';
echo '<div class="item">';
echo '<div class="well portfolio-item no-gutter">';
echo '<div class="thumbnail no-gutter">'. get_the_post_thumbnail() .'</div>';
echo '<div class="caption">';
echo '<div class="vertical-align">';
$link = get_the_permalink();
echo "<a href=$link>";
echo '<h2>'. get_the_title() .'</h2>';
// GET THE CATEGORY -- Returns an array of all categories
// $categories = get_the_category();
$categories = get_the_terms( get_the_ID(), 'portfolio-categories' ); // for custom taxnomies
// If not an empty array then show the first category set
if ( ! empty( $categories ) ) {
echo "<h3>" . esc_html( $categories[0]->name ) ."</h3>";
}
echo "</a>";
echo '</div>'; /*close caption*/
echo '</div>'; /*close caption*/
echo '</div>';
echo '</div>';
endwhile;
echo '</div>';
echo '</div>';
echo '</div>';
?>
</div><!-- #page -->

Related

Woocommerce Product categories as tabs

I have writtern a function which shows my woocommerce product categories as tabs and related products as tab content.
`<?php
$product = wc_get_product( $post->ID );
if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' );
}
$categories = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => false,
) );
echo '<div class="tabs-container">';
echo '<ul class="tabs">';
foreach ( $categories as $category ) {
echo '<li class="tab">' . $category->name . '</li>';
}
echo '</ul>';
foreach ( $categories as $category ) {
$args = array(
'post_type' => 'product',
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $category->slug,
),
),
);
$query = new WP_Query( $args );
echo '<div id="' . $category->slug . '" class="tab-content car">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="post-cont">';
if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>
<img src="<?php echo $attachment[0] ; ?>" class="card-image" />
<?php } ?> <br>
<div class="post-details">
<div class="post-title">
<?php the_title(); ?>
</div>
<div class="shop-button-cont">
<div class="shop-button"><?php echo 'Shop Now'; ?></div>
<div class="sale-prise">
<?php echo $price = get_post_meta( get_the_ID(), '_sale_price', true);?>
</div>
<div class="reg-prise">
<?php echo $sale = get_post_meta( get_the_ID(), '_regular_price', true); ?>
</div>
</div>
</div><?php
echo '</div>';
}
echo '</div>';
}
echo '</div>';
wp_reset_postdata();
?>
<script>document.addEventListener("DOMContentLoaded", function() {
var tabs = document.querySelectorAll(".tabs li");
var tabContents = document.querySelectorAll(".tab-content");
tabs.forEach(function(tab) {
tab.addEventListener("click", function() {
var tabId = this.querySelector("a").getAttribute("href");
tabContents.forEach(function(content) {
content.style.display = "none";
});
document.querySelector(tabId).style.display = "flex";
tabs.forEach(function(tab) {
tab.classList.remove("active");
});
this.classList.add("active");
});
});
});</script>
`
but when we load the page all the tabs are closed, but i want to add a tab which shows all the product and is active by default when page is load.
is there any way to achive this? and if you want to change the whole fuction with a better function than it is also welcomed
Edit:
<?php
$product = wc_get_product( $post->ID );
if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' );
}
$categories = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => false,
) );
echo '<div class="tabs-container">';
echo '<ul class="tabs">';
echo '<li class="tab active">All</li>';
foreach ( $categories as $category ) {
echo '<li class="tab">' . $category->name . '</li>';
}
echo '</ul>';
echo '<div id="all" class="tab-content car">';?>
// Query and display all products here
<h1>Prodcuts</h1>
<div class="post-intro">Kuch Saste mai dikahu madam? <img src="https://images.all-free-download.com/images/graphicwebp/road_tested_208353.webp" alt=""></div>
<?php
// Set the number of posts to fetch and the offset (i.e. how many posts to skip)
$num_posts = 3;
$offset = 0;
$product = wc_get_product( $post->ID );
$price = get_post_meta( get_the_ID(), '_regular_price', true);
// $price will return regular price
$sale = get_post_meta( get_the_ID(), '_sale_price', true);
// $sale will return sale price
// Create a new instance of the WP_Query class
$posts = new WP_Query( array(
'post_type' => 'product', // Fetch only posts (not pages or other post types)
'posts_per_page' => $num_posts, // Set the number of posts to fetch
'offset' => $offset // Set the offset (how many posts to skip)
) );
// Check if the query has posts
if ( $posts->have_posts() ) {
// Loop through the posts and output their data
while ( $posts->have_posts() ) {
$posts->the_post(); ?>
<div class="post-cont">
<?php if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>
<img src="<?php echo $attachment[0] ; ?>" class="card-image" />
<?php } ?><br>
<div class="post-details">
<div class="post-title">
<?php the_title(); ?>
</div>
<div class="shop-button-cont">
<div class="shop-button"><?php echo 'Shop Now'; ?></div>
<div class="sale-prise">
<?php echo $price = get_post_meta( get_the_ID(), '_sale_price', true);?>
</div>
<div class="reg-prise">
<?php echo $sale = get_post_meta( get_the_ID(), '_regular_price', true); ?>
</div>
</div>
</div>
</div>
<?php
}
} else {
}
// Reset the post data after the query
wp_reset_postdata();
?>
</div>
<?php echo '</div>';
foreach ( $categories as $category ) {
$args = array(
'post_type' => 'product',
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $category->slug,
),
),
);
$query = new WP_Query( $args );
echo '<div id="' . $category->slug . '" class="tab-content car">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="post-cont">';
if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>
<img src="<?php echo $attachment[0] ; ?>" class="card-image" />
<?php } ?> <br>
<div class="post-details">
<div class="post-title">
<?php the_title(); ?>
</div>
<div class="shop-button-cont">
<div class="shop-button"><?php echo 'Shop Now'; ?></div>
<div class="sale-prise">
<?php echo $price = get_post_meta( get_the_ID(), '_sale_price', true);?>
</div>
<div class="reg-prise">
<?php echo $sale = get_post_meta( get_the_ID(), '_regular_price', true); ?>
</div>
</div>
</div><?php
echo '</div>';
}
echo '</div>';
}
echo '</div>';
wp_reset_postdata();
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
var tabs = document.querySelectorAll(".tabs li");
var tabContents = document.querySelectorAll(".tab-content");
tabs.forEach(function(tab) {
tab.addEventListener("click", function() {
var tabId = this.querySelector("a").getAttribute("href");
if (tabId === "#all") {
tabContents.forEach(function(content) {
content.style.display = "none";
});
} else {
tabContents.forEach(function(content) {
content.style.display = "none";
});
document.querySelector(tabId).style.display = "flex";
}
tabs.forEach(function(tab) {
tab.classList.remove("active");
});
this.classList.add("active");
});
});
});
</script>
You can add 'active' class in the PHP on one of the li tags.
echo '<div class="tabs-container">';
echo '<ul class="tabs">';
foreach ( $categories as $category ) {
$active_class = ( $category->slug === 'first-category' ) ? 'active' : '';
echo '<li class="tab ' . $active_class . '">' . $category->name . '</li>';
}
echo '</ul>';
Or you can use javascript to add the active class after the page is loaded.
// Get the list of tabs
var tabsList = document.querySelector('.tabs');
// Get the first tab
var firstTab = tabsList.firstElementChild;
// Add the "active" class to the first tab
firstTab.classList.add('active');

Posts by tag - Creating a reset

I have a rather neat filter tag that will narrow down results in a specific post category to just the posts within that category that have the selected tag.
I am struggling to get the stock 'select tag...' option to reset the filter and show all results again - so once a user selects a tag the only way to reset the list is by refresh.
Here is my filter within the function.php script:
// CASE STUDY FILTER
function my_filters(){
$args = array(
'orderby' => 'date',
'order' => $_POST['date']
);
if( isset( $_POST['tagfilter'] ) ):
$args['tax_query'] = array(
array(
'taxonomy' => 'post_tag',
'field' => 'id',
'terms' => $_POST['tagfilter']
)
);
$query = new WP_Query( $args );
if( $query->have_posts() ):
while( $query->have_posts() ):
$query->the_post();
echo "<article class=\"post-box " . get_post_class() . "\">";
echo "";
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
echo "<div class=\"cs-image\" style=\"background-image: url('" . $url . "')\"></div>";
$case_study = get_field('case_study_page_content');
if( $case_study ):
echo "<div class=\"cs-text-container\">";
while( have_rows('case_study_page_content') ): the_row();
$case_study_title = get_sub_field('title');
$case_study_author = get_sub_field('author');
echo "<h2>" . $case_study_title . "</h2>";
echo "<p>" . $case_study_author . "</p>";
endwhile;
echo "</div>";
endif;
echo "</article>";
endwhile;
wp_reset_postdata();
else :
echo 'No case studies found';
endif;
die();
endif;
}
add_action('wp_ajax_customfilter', 'my_filters');
add_action('wp_ajax_nopriv_customfilter', 'my_filters');
// END CASE STUDY FILTER
The form that this takes input from is here:
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="advanced-filterform">
<?php
if( $terms = get_terms( 'post_tag', 'orderby=name' ) ) :
echo '<select class="tagfilter" name="tagfilter"><option>Select tag...</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
endforeach;
echo '</select>';
endif;
?>
<button>Apply filters</button>
<input type="hidden" name="action" value="customfilter">
</form>
As simply as possible without creating a tag on every post - how can I implement this.

Getting Featured Image as a Background Image

I have a code in my page.php file that creates a list of child pages. I want every li to have a background-image added by Featured image function. Here is the entire code I have
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
<?php
if (is_page('eventsphotography')) {
$query = new WP_query('pagename=eventsphotography');
$eventsphotography_id = $query->queried_object->ID;
//The loop
if($query->have_posts() ) {
while($query->have_posts() ) {
$query->the_post();
the_content();
}
}
/* Get the children of the eventsphotography page */
$args = array (
'post_parent' => $thePostID,
'post_parent' => $eventsphotography_id,
'order' => 'ASC'
);
$eventsphotography_query = new WP_query($args);
//The Loop
if($eventsphotography_query->have_posts() ) {
echo '<ul class="events-list">';
while($eventsphotography_query->have_posts() ){
$eventsphotography_query->the_post();
$background = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '<li style="background:url(' . $background[0] . '); background-repeat:no-repeat; background-size:cover;">';
echo '<div class="events-centered">';
echo '<a href="' . get_permalink() . '">';
echo '<h4>' . get_the_title() . '</h4>';
echo '</a>';
echo '<div class="view-events-details">';
echo '<a href="' . get_permalink() . '">';
echo '<h5>View Images</h5>';
echo '</a>';
echo '</div>';
echo '</div>'; /* end of events-centered */
echo '</li>';
}
echo'</ul>';
}
}
?>
I only need help for these lines:
$background = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
AND
echo '<li style="background:url(' . $background[0] . '); background-repeat:no-repeat; background-size:cover;">';
Here's the screenshot of the result of my code:
http://oi68.tinypic.com/10xzdhl.jpg
I marked the first <li> with a red rectangle. As I said before, I want URL of the featured image to be placed in <li style="background:url(URL of the featured image)">
I have found a solution. First, I created a new WP_Query:
$subs = new WP_Query( array( 'post_parent' => $post->ID, 'post_type' => 'page', 'meta_key' => '_thumbnail_id'));
Then in my loop I added this lines:
if($eventsphotography_query->have_posts() && $subs->have_posts()) {
echo '<ul class="events-list">';
while($eventsphotography_query->have_posts() && $subs->have_posts()){
$eventsphotography_query->the_post();
$subs->the_post();
echo '<li>';
echo get_the_post_thumbnail($post->ID);
...rest of the code...

how to echo/display the custom field value of a specific custom field name?

I have tried this code:
<?php
query_posts(array(
'meta_key' => 'custom_cat',
'meta_value' => 'creative',
'post_type' => 'page'
));
echo '<ul id="creative_services" class="clearfix row">';
if ( have_posts() ) while ( have_posts() ) : the_post();
echo '<li class="col-md-3">';
echo '<a class="popover-dismiss" data-toggle="popover" title="';
echo $post->post_title;
echo '" data-placement="bottom" data-content="';
echo $post->post_content;
echo '"><i class="';
get_post_meta( get_the_ID(), 'fa_icon' );
echo '"></i></a>';
echo '<h3>';
the_title();
echo '</h3>';
endwhile;
echo '</ul>';
wp_reset_query(); ?>
to display the custom field value as a class name, but the value is not displaying. Please help me find the problem or solution to display the custom field value as class name. I'm having hard time to debug this codes because i'm not a programmer, i'm a designer, still in the process of exploring wordpress.
Try adding echo before get_post_meta( get_the_ID(), 'fa_icon' );
so it would be:
<?php
query_posts(array(
'meta_key' => 'custom_cat',
'meta_value' => 'creative',
'post_type' => 'page'
));
echo '<ul id="creative_services" class="clearfix row">';
if ( have_posts() ) while ( have_posts() ) : the_post();
echo '<li class="col-md-3">';
echo '<a class="popover-dismiss" data-toggle="popover" title="';
echo $post->post_title;
echo '" data-placement="bottom" data-content="';
echo $post->post_content;
echo '"><i class="';
echo get_post_meta( get_the_ID(), 'fa_icon' );
echo '"></i></a>';
echo '<h3>';
the_title();
echo '</h3>';
endwhile;
echo '</ul>';
wp_reset_query(); ?>

PHP's MOD autogenerates rows bootstrap & wordpress

I have this code in my wordpress. Is in the collection.php
This code makes rows when there are 3 posts and when there are 3 posts the closes.
When I have 3, 6 or 9 posts works fine but the problem is when I have 4 or 5 posts because the doesn't close and the code stays open.
Anyone can help me. I appreciate this very much.
Regards
$i = 0;
if ( have_posts() ) : while ( have_posts() ) : the_post();
$i++;
if($i%3 == 1){echo '<div class="row">'; }
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
echo '<div class="col-md-4">';
echo '<a href="';
echo the_permalink();
echo '">';
echo wp_get_attachment_image( $attachment->ID, 'full' );
echo '</a>';
echo '<h3 class="category-title"><a href="';
echo the_permalink();
echo '">';
echo the_title();
echo '</a></h3>';
echo '</div>';
}
}
if($i%3 == 0){echo '</div>';}
endwhile; endif;
if($i%3 == 0){echo '</div>';}
endwhile; endif;
change to :
if($i%3 == 0){echo '</div>';}
endwhile; endif;
if($i%3 != 0){echo '</div>';}

Categories