We Keep Coding

How to add a button to submit a form?

I'm completly newbie with javascript but I was able to get this script that I found to work partially. I mean if I type in the first form field and hit 'Enter' the form perform the http request with my options.
I think the script part at the bottom is not working or missing something. Since is using jQuery.
So I want to make this script more simple, just add a button or link to call a action do the search and show the results page.
?><section class="content-page page-produtos">
<div class="wrp-content">
<div class="container box-content">
<h1>Engates</h1>
<form id="form_filtro_produto" action="<?php echo home_url( '/produtos/' ); ?>" method="GET" class="src-group">
<label for="pesquisar">
<p>Pesquisar</p>
<input type="text" name="engate" value="<?php echo $_GET['engate']; ?>" />
</label>
<label for="montador">
<p>Montadora</p>
<select name="montadora">
<option value="">Selecione uma Montadora</option>
<?php
$args = array (
'post_type' => 'engates',
'posts_per_page' => -1,
'meta_key' => 'montadora',
'meta_compare' => 'EXISTS',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_Query($args);
$montadoras = array();
while ($query->have_posts()): $query->the_post();
if(!in_array(get_field('montadora'), $montadoras) && get_field('montadora') != ""){
array_push($montadoras, get_field('montadora'));
?>
<option value="<?php the_field('montadora'); ?>"<?php if($_GET['montadora'] == get_field('montadora')){ ?> selected="selected"<?php } ?>><?php the_field('montadora'); ?></option>
<?php
}
endwhile;
wp_reset_query();
?>
</select>
</label>
<label for="modelo">
<p>Modelo</p>
<select name="modelo">
<option value="">Selecione um Modelo</option>
<?php
$args = array (
'post_type' => 'engates',
'posts_per_page' => -1,
'meta_key' => 'modelo',
'meta_compare' => 'EXISTS',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_Query($args);
$modelos = array();
while ($query->have_posts()): $query->the_post();
if(!in_array(get_field('modelo'), $modelos) && get_field('modelo') != ""){
array_push($modelos, get_field('modelo'));
?>
<option value="<?php the_field('modelo'); ?>"<?php if($_GET['modelo'] == get_field('modelo')){ ?> selected="selected"<?php } ?>><?php the_field('modelo'); ?></option>
<?php
}
endwhile;
wp_reset_query();
?>
</select>
</label>
</form>
</div>
</div> <!-- fim wrp-content -->
<div class="container box-content">
<?php//do_shortcode('[facetwp template="example"]');?>
<?php
$filtro = array();
if($_GET['montadora'] != ""){
$montadora = array(
'key' => 'montadora',
'value' => $_GET['montadora'],
'compare' => '=',
);
array_push($filtro, $montadora);
}
if($_GET['modelo'] != ""){
$modelo = array(
'key' => 'modelo',
'value' => $_GET['modelo'],
'compare' => '=',
);
array_push($filtro, $modelo);
}
if($_GET['ano'] != ""){
$ano = array(
'key' => 'ano',
'value' => $_GET['ano'],
'compare' => '=',
);
array_push($filtro, $ano);
}
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
query_posts(
array(
'post_type' => 'engates',
'posts_per_page' => 8,
'paged' => $paged,
'meta_query' => array($filtro),
's' => $_GET['engate'],
'orderby' => 'meta_value',
'meta_key' => 'modelo',
'order' => 'ASC'
)
);
if(have_posts()):
while(have_posts()): the_post();
?>
<article>
<img width="270" src="<?php echo wp_get_attachment_url(get_post_thumbnail_id(get_the_ID())); ?>" class="attachment-full size-full wp-post-image" alt="" />
<div class="paragraph-group">
<p><em>cod: <?php the_field('codigo'); ?></em></p>
<p><?php the_field('modelo'); ?></p>
<p><?php the_field('montadora'); ?></p>
<p><?php the_field('ano'); ?></p>
<!-- Saiba Mais -->
</div>
</article>
<?php
endwhile;
?>
<div style="clear:both"></div>
<?php
wp_paginate();
else:
echo "<p>Nenhum produto foi encontrado.</p>";
endif;
?>
</div> <!-- fim container -->
</section>
<script>
jQuery(function($){
$('#form_filtro_produto input, #form_filtro_produto select').on('change', function(){
$('#form_filtro_produto').submit();
});
});
</script>

All you need to do is include <button>Submit</button> within the <form> element and it will trigger the form's submit event to your form's action.

How I can create a responsive image carousel and slides custom post type content in WordPress

I want to create a responsive image carousel and slides custom post type content like featured image, title, etc.
I had created custom post type as banner in the following way:
function create_banners_post_type() {
$labels = array(
'name' => __( 'Banners' ),
'singular_name' => __( 'banner' ),
'add_new' => __( 'New banner' ),
'add_new_item' => __( 'Add New banner' ),
'edit_item' => __( 'Edit banner' ),
'new_item' => __( 'New banner' ),
'view_item' => __( 'View banner' ),
'search_items' => __( 'Search banners' ),
'not_found' => __( 'No banners Found' ),
'not_found_in_trash' => __( 'No banners found in Trash' ),
);
$args = array(
'labels' => $labels,
'has_archive' => true,
'public' => true,
'hierarchical' => false,
'supports' => array(
'title',
'editor',
'excerpt',
'custom-fields',
'thumbnail',
'page-attributes'
),
'taxonomies' => array( 'post_tag', 'category'),
);
register_post_type( 'banner', $args );
}
add_action( 'init', 'create_banners_post_type' );
and to display the output on the front page:
// function to show home page banner using a query of banner post type
function home_page_banner() {?>
<?php
$query = new WP_Query( array(
'post_type' => 'banner',
));
if ( $query->have_posts() ) { ?>
<ul>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<li>
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
</li>
<?php
endwhile;?>
</ul>
</div>
<?php
}
wp_reset_postdata();
}
in front page I had inserted this code:
<header id="showcase" class="grid">
<?php
if ( is_front_page() ) {
home_page_banner();
}
?>
</header>
which is creating a ul list and in ul list, each post is coming in li, following is inspect element screenshot:

Try this code
// function to show home page banner using a query of banner post type
function home_page_banner() {?>
<div class="carousel" data-transition="slide">
<?php
$query = new WP_Query( array(
'post_type' => 'banner',
));
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
<?php
endwhile;?>
</div>
<?php
}
wp_reset_postdata();
}

I've never used Owl Carousel before, but any time I have to do a carousel I go to either Slick or Flickity - has basically everything you could ever need.
Flickity JS Carousel
The below is an example of how to include your post content inside of a carousel.
Create the initial query:
<?php
// the query
$recent_posts = new WP_Query( array(
'category_name' => 'posts',
'posts_per_page' => 3,
));
?>
Create your slider
<div class="posts-slider"> <? // this is your wrapper div ?>
<?php if ( $recent_posts->have_posts() ) : ?>
<?php while ( $recent_posts->have_posts() ) : $recent_posts->the_post(); ?>
<div class="recent-post-slide">
<div class="recent-post-content">
<div class="row">
<div class="col-12">
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
Add some jQuery to make Flickity work:
<script>
jQuery(document).ready(function() {
var slider = jQuery('.posts-slider'); // The class name of the wrapper div
slider.flickity({
cellAlign: 'left',
contain: true
});
});
</script>

How to stop a Wordpress ajax load more button from continuously loading the last two posts repeatedly

I set up an ajax load more button in Wordpress. How do I detect that there are no more posts to call and to not reload the same posts? On click it repeatedly grabs the last two posts and loads those. I was having an issue with when posts 3, 4, 5, and 6 were showing initially on the page then clicking the load more button it would call posts 3, 2, and 1 instead of just post 2 and 1. I added an offset of 4. That seems to fix that but it still calls the last two posts if I keep clicking load more. Also is there a way to hide the button if no more posts are detected?
// the pages post query
<?php
$args = array(
'post_type' => 'financial-news',
'post_status' => 'publish',
'posts_per_page' => '4',
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => 1,
);
?>
<?php $my_posts = new WP_Query( $args ); ?>
<?php if ( $my_posts->have_posts() ) : ?>
<?php $wp_query = new WP_Query(); $wp_query->query( $args ); ?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
<div class="blog-post-wrapper one-column">
<div class="post-inner">
<div class="article-image"><img src="<?php the_field('thumb_image'); ?>"/></div>
<div class="article-copy match-height">
<span class="date"><?php the_time('F j, Y'); ?></span>
<h1><?php the_title(); ?></h1>
<p><?php echo wp_trim_words( get_the_content(), 25, '' ); ?></p>
<p><a class="read_more" href="<?php the_permalink(); ?>">Read More</a></p>
</div><!--article-copy-->
</div>
</div><!--blog-post-wrapper-->
<?php endwhile; ?>
</div><!--blog-content-->
<?php endif; ?>
<?php wp_reset_postdata(); // reset the query ?>
<div class="center-link"><div class="loadmore btn orange-btn-outline">Load More</div></div>
// The jS for the load button
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var post_type = 'financial-news';
var posts_per_page = 3;
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': '<?php echo wp_create_nonce("load_more_posts"); ?>',
'type' : 'post',
'post_type' : post_type,
'posts_per_page': posts_per_page,
};
$.post(ajaxurl, data, function(response) {
$('.blog-content').append(response);
page++;
});
});
});
// the functions.php code to load the posts
// blog load more button
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$post_type = $_POST['post_type'];
$posts_per_page = $_POST['posts_per_page'];
$lay_out = $_POST['lay_out'];
$args = array(
'post_type' => $post_type,
'post_status' => 'publish',
'orderby' => 'post_date',
'order' => 'DESC',
'posts_per_page' => $posts_per_page,
'offset' => 4,
'paged' => $paged,
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
<div class="blog-post-wrapper" >
<div <?php post_class('post-inner'); ?> id="post-<?php the_ID(); ?>">
<div class="article-image"><img src="<?php the_field('thumb_image'); ?>"/></div>
<div class="article-copy match-height">
<span class="date"><?php the_time('F j, Y'); ?></span>
<h1><?php the_title(); ?></h1>
<p><?php echo wp_trim_words( get_the_content(), 25, '' ); ?></p>
<p><a class="read_more" href="<?php the_permalink(); ?>">Read More</a></p>
</div><!--article-copy-->
</div>
</div><!--blog-post-wrapper-->
<?php endwhile; ?>
<?php
endif;
wp_die();
}

How to show all tags from posts before loop?

I have a structure like this in my wordpress search.php:
<div class="tags">
<!-- show all tags from posts in here -->
</div>
<div class="posts">
<!-- Wordpress Query loop here -->
<!-- get_the_tags() for each posts -->
<!-- End loop -->
</div>
I'm able to show inside the loop the list of tags for all the posts. But I need to show them on the div with the class "tags" that is outside the loop.
I know that if I want to show them after the loop is easy, I just have to use a global php variable and show them afterwards. But the only way I think I can add those tags before the loop is inserting them on the HTML DOM with javascript.
Is there any other method to do this more easily?.
Full code as requested:
<?php
global $global_tags;
?>
<div class="col-left">
<div class="tags">
<div class="placeholder-tags"></div>
</div>
</div>
<div class="col-right">
<div class="profile-wrapper">
<?php
$tag = single_tag_title( '', false );
$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="profile">
<a href="<?php echo get_permalink(); ?>">
<?php $current_profile = get_field("profile_personal")[0]; ?>
<div class="profile-image">
<img alt="" src="<?php echo $current_profile["profile_image"]['sizes']['thumbnail']; ?>"/><br>
</div>
<div class="profile-name">
<?php echo $current_profile["profile_name"] . ' ' . $current_profile["profile_surname"]; ?>
</div>
<div class="profile-country">
<?php echo $current_profile["profile_country"]; ?><br>
</div>
<?php
$list_tags = get_the_tags();
foreach ( $list_tags as $single_tag) {
$global_tags[] = $single_tag->slug;
}
?>
<?php if ( has_category("bolaber",$post->ID) ) { ?>
<div class="worked-with-us">
●
</div>
<?php } ?>
</a>
</div>
<?php endwhile; ?>
<!-- end of the loop -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'default Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

I came up with a not very elegant or efficient solution, but it works perfectly, I added another loop on the tags placeholder with the same query loop parameters, but without showing anything but the tags.
<?php
global $global_tags;
?>
<div class="col-left">
<div class="tags">
<?php
$tag = single_tag_title( '', false );
$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$list_tags = get_the_tags();
foreach ( $list_tags as $single_tag) {
$global_tags[] = $single_tag->slug;
}
?>
<?php endwhile; ?>
<pre>
<?php
if ( $global_tags ) {
$global_tags = array_unique($global_tags);
foreach ($global_tags as $value) {
echo '</br>#'. $value .'';
}
}
?>
</pre>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
</div>
</div>
<div class="col-right">
<div class="profile-wrapper">
<?php
$tag = single_tag_title( '', false );
$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="profile">
<a href="<?php echo get_permalink(); ?>">
<?php $current_profile = get_field("profile_personal")[0]; ?>
<div class="profile-image">
<img alt="" src="<?php echo $current_profile["profile_image"]['sizes']['thumbnail']; ?>"/><br>
</div>
<div class="profile-name">
<?php echo $current_profile["profile_name"] . ' ' . $current_profile["profile_surname"]; ?>
</div>
<div class="profile-country">
<?php echo $current_profile["profile_country"]; ?><br>
</div>
<?php
$list_tags = get_the_tags();
foreach ( $list_tags as $single_tag) {
$global_tags[] = $single_tag->slug;
}
?>
<?php if ( has_category("bolaber",$post->ID) ) { ?>
<div class="worked-with-us">
●
</div>
<?php } ?>
</a>
</div>
<?php endwhile; ?>
<!-- end of the loop -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'default Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Wordpress loop within loop error

On my parent page, i have a custom page template calling another template:
if( have_posts() ): while( have_posts() ): the_post(); ?>
<div class="wrapper">
<?php get_template_part( 'template', 'page-section' ); ?>
<?php endwhile; endif; wp_reset_postdata(); ?>
Inside template-page-section.php, I have the following:
<?php
/*
Template Name: Page Section
*/
$args = array(
'post_parent' => 9,
'post_type' => 'page',
'orderby' => 'menu_order',
'posts_per_page' => -1,
'order' => 'ASC'
);
$wpq = new WP_Query( $args ); ?>
<?php while ( $wpq->have_posts() ) : $wpq->the_post(); ?>
<?php if ( $post->ID == 101 ) {
include( 'template-slider.php' );
} ?>
<div class="page-section">
<h1><?php the_title(); ?></h1>
<?php /* The loop */ ?>
<?php the_content(); ?>
</div>
<?php endwhile; wp_reset_postdata();?>
Within the template-slider.php, is the following:
<div id="slider-container">
<ul id="slider">
<? $query = get_pages(
array(
'post_type' => 'slides',
'orderby' => 'menu_order',
'posts_per_page' => -1
));
foreach( $query as $post ) {
setup_postdata( $post ); ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail', $thumbsize[0] ); ?>
<li>
<img src="<?php echo $image[0]; ?>">
</li>
<?php } wp_reset_postdata(); ?>
</ul>
</div>
The issue is that once wordpress hits the loop within the slider-template, the information that it echos for the post content is not a child post of the parent, but the parents content.
Can anyone tell me what I'm doing wrong? I cant figure it out!

This is just an untested guess, but try the following:
template-page-section.php
$wpq = get_posts( $args );
if( $wpq ) {
foreach( $wpq as $p )
{
if ( $p->ID == 101 ) {
include( 'template-slider.php' );
}
?>
<div class="page-section">
<h1><?php echo $p->post_title; ?></h1>
<?php echo $p->post_content; ?>
</div>
<?php
}
}
template-slider.php
<div id="slider-container">
<ul id="slider">
<?php
$query_pages = get_pages(
array(
'post_type' => 'slides',
'orderby' => 'menu_order',
'posts_per_page' => -1
));
if( $query_pages )
{
foreach( $query_pages as $pg ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $pg->ID ), 'single-post-thumbnail', $thumbsize[0] ); ?>
<li>
<img src="<?php echo $image[0]; ?>">
</li><?php
}
} ?>
</ul>
</div>
Reference: When should you use WP_Query vs query_posts() vs get_posts()?