I am new in Wordpress so I hope I will be very explicit in the following description. Right now I`m trying to create something like https://getbootstrap.com/docs/5.1/components/navs-tabs/ but in Wordpress using bootstrap 5. In the tabs title I want to show the title of the post and in the tab content will be the_content().Thanks in advance !
The ul needs to be outside of the while loop so that you only have a single navigation component. Right now it is creating a separate navigation for every oracion. Try the following:
<div class="col-md-9">
<?php
$wpb_all_query = new WP_Query(array(
'post_type' => 'post',
'category_name' => 'orar',
'post_status' => 'publish',
)); ?>
<?php if ($wpb_all_query->have_posts()) : ?>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<?php while ($wpb_all_query->have_posts()) :
$wpb_all_query->the_post(); ?>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false"><?php $wpb_all_query->the_title(); ?></button>
</li>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"><?php $wpb_all_query->the_content(); ?></div>
</div>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php
else : ?>
<p><?php ('Sorry, no posts matched your criteria.'); ?></p>
<?php
endif; ?>
</div>
Related
I'm trying to display a list of taxonomy terms in bootstrap tabs.
Listing the terms as below, but need some help to assign into the tabs.
Using #dipmala 's guide, I came upto following. But still can't figure out a method to separate child terms into relevant tabs. Currently the issue is all inside the foreach loop.
<?php $sup_terms = get_terms("supplier_categoties", array("orderby" => "slug", "parent" => 0, "hide_empty" => false)); ?>
<ul class="nav nav-tabs sup_cats" role="tablist">
<?php foreach($sup_terms as $key => $sup_term) : ?>
<li role="presentation">
<?php echo $sup_term->name; ?>
</li>
<script type="text/javascript">
jQuery(".sup_cats li:first").addClass("active");
</script>
<?php
$sup_c_terms = get_terms("supplier_categoties", array("orderby" => "slug", "parent" => $sup_term->term_id, "hide_empty" => false));
if($sup_c_terms) :
foreach($sup_c_terms as $key => $sup_c_term) :
$tabcontent .='<div role="tabpanel" class="tab-pane" id="'.$sup_term->slug.'">';
$tabcontent .= $sup_c_term->name;
$tabcontent .='</div>';
endforeach;
endif;
endforeach;
?></ul>
<div class="tab-content sup_cats_inner">
<div role="tabpanel" class="tab-pane" id="<?php $sup_term->slug ?>">
<?php echo $tabcontent; ?>
<script type="text/javascript">
jQuery('.sup_cats_inner > :first-child').addClass("active");
</script>
Following code will helpful.
<?php $sup_terms = get_terms("supplier_categoties", array("orderby" => "slug", "parent" => 0, "hide_empty" => false)); ?>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<?php foreach($sup_terms as $key => $sup_term) : ?>
<li role="presentation" class="active"><?php echo $sup_term->name; ?></li>
<?php
$tabcontent .=' <div role="tabpanel" class="tab-pane active" id="'.$sup_term->slug.'">...</div>'; // dynamic tab content
endforeach; ?> </ul>
<!-- Tab panes -->
<div class="tab-content">
<?php echo $tabcontent; ?>
</div>
The pagination for this wordpress theme I am coding, don't seem to be working, any one with a better ideal? thank you in advance.
Below is my full code, I am kind of confused, had tried using a plugin and calling out the shortcode wp-pagenavi but its not working either, I would appreciate any help.
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('post_type' => 'post', 'posts_per_page' => 10, 'paged' => $paged);
$query = new WP_Query($args);
if( $query->have_posts() ) :
while( $query->have_posts() ) : $query->the_post(); ?>
<div class="media">
<div class="media-left">
<div class="hovereffect">
<?php the_post_thumbnail();?>
<div class="overlay">
<h2>Share</h2>
<p class="icon-links">
<a href="#">
<span class="fa fa-twitter"></span>
</a>
<a href="#">
<span class="fa fa-facebook"></span>
</a>
<a href="#">
<span class="fa fa-instagram"></span>
</a>
</p>
</div>
</div>
</div>
<div class="media-body">
<h4 class="media-heading"><?php the_title()?></h4>
<p class="media-author"><b><?php the_author()?></b> - <?php echo get_the_date(); ?></p>
<?php the_content();?>
</div>
</div>
<?php endwhile;?>
<!-- pagination -->
<?php next_posts_link(); ?>
<?php previous_posts_link(); ?>
<?php else : ?>
<!-- No posts found -->
<?php endif; ?>
You have to use $query->max_num_pages in the second parameter of next_posts_link as you can see here
// next_posts_link() usage with max_num_pages
next_posts_link( 'Older Entries', $the_query->max_num_pages );
previous_posts_link( 'Newer Entries' );
For my WordPress theme I need help from an expert. Here is my nav-list html
Example:
//Here is my WP code:
<li>
<?php
$category_men = get_the_category_by_id($catmen['content-cat-one']);
$content_one =new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => 1,
'category_name' => $category_men
));
while($content_one->have_posts()) : $content_one->the_post(); ?>
<a href="<?php echo get_category_link( $catmen['content-cat-one'] ); ?>#<?php echo get_cat_ID($category_men); ?>" >Men Category</a>
<?php endwhile; ?>
</li>
<ul class="nav nav-tabs">
<li>Men Category</li>
</ul>
<div class="tab-pane active" id="men">
</div>
<div class="tab-pane active" id="<?php echo get_cat_ID($category_men); ?>">
The result comes out: //localhost/my-themes/category/featured/#5
I do not want the result above, I want //localhost/my-themes/category/featured/
How to overcome these problems?
Replace this code,
<a href="<?php echo get_category_link( $catmen['content-cat-one'] ); ?>#<?php echo get_cat_ID($category_men); ?>" >Men Category</a>
with the code snippet bellow.
Men Category
my problem is that i am using my own custom single-product.php page and its working as i am wanting because i have used loop to show single product contents according to mine needs ...
but no the only issue i an facing is that i could not get "add to cart" button code any where there ? and now my add to cart button is missing that made me totally unable to add product to cart ...
here is mine complete code <div class="shop-info">
<?php query_posts( array( 'post_type' => product, 'posts_per_page' => 1) ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2>
<?php the_title(); ?>
</h2>
<span class="check"></span>
<span class="stock">IN STOCK</span>
<span class="right-code">
<span class="code">CODE: </span>
<span class="number"><?php echo $product->get_sku(); ?></span>
</span>
<img src="<?php bloginfo('template_url'); ?>/images/shop-line.png" alt=""/>
<span class="price">$<?php $product = new WC_Product( get_the_ID() );
echo $price = $product->price; ?></span>
<span class="total">QUANTITY: </span>
<span class="select">
00
<span class="arrow"></span>
</span>
<img src="<?php bloginfo('template_url'); ?>/images/shop-line.png" alt=""/>
<div class="product-single-content">
<p class="product-detail">
<?php the_content(); ?>
</p>
</div>
<div class="add-buttons">
<a class="add-to-cart" href="<?php echo $product->single_add_to_cart_text(); ?>">ADD TO BASKET/ BORROW</a>
<a class="add-to-cart pink" href="">ADD TO WISH LIST</a>
</div>
<div class="social-links">
<ul class="social-networks">
<li>facebook</li>
<li><a class="twitter" href="#">twitter</a></li>
<li><a class="play" href="#">play</a></li>
</ul>
</div>
<?php endwhile; endif; ?>
</div>
in code above and in div class button's section my own buttons as anchors named as "ADD TO BASKET/BORROW" placed and i want once that anchor is clicked this item should be added to cart ... any one there to help me out of this please ... ??? :(
Replace
<a class="add-to-cart" href="<?php echo $product->single_add_to_cart_text(); ?>">ADD TO BASKET/ BORROW</a>
with
<?php do_action('woocommerce_simple_add_to_cart'); ?>
And if you want to change add to cart text then add below code to your theme's functions.php :
add_filter( 'woocommerce_product_single_add_to_cart_text', 'your_custom_cart_button_text' );
function your_custom_cart_button_text(){
return __( 'ADD TO BASKET/ BORROW', 'woocommerce' );
}
NOTE: It won't add for the variable products.
This is driving me crazy.
Need some help with this, please.
This is basically a bootstrap carousel inside a modal.
I figure some things out, everything's working, but now i need help to control the "data-slide-to" to define which slide opens on the modal window.
Here's what i have so far:
query_posts( array ( 'category_name' => 'video', 'posts_per_page' => -1 ) );
// The Loop
while ( have_posts() ) : the_post();?>
<div class="span6">
<?php the_post_thumbnail(); ?>
<div id="modalVideo-<? the_ID();?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="myCarousel-<? the_ID();?>" class="carousel slide">
<div class="carousel-inner">
<?php
$the_query = new WP_Query(array(
'category_name' =>'video',
'posts_per_page' => 1
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item active">
<?php the_content();?>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php
$the_query = new WP_Query(array(
'category_name' =>'video',
'offset' => 1
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item">
<?php the_content();?>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<a class="carousel-control left" href="#myCarousel-<? the_ID();?>" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel-<? the_ID();?>" data-slide="next">›</a>
</div>
<button class="btn" data-dismiss="modal" aria-hidden="true">X</button>
</div>
</div>
<?php endwhile;
// Reset Query
wp_reset_query();
?>
Any help would be much appreciated.
Thanks