I am currently working on my own personal portfolio website. I've made a custom post type using Pods to create portfolio items and i want to use the wordpress tags as the filter.
I've successfully received the portfolio items and the filters. But how can i make them clickable/filterable ? Everything I've found includes portfolio plugins etc. But I don't want to use that, is just want to create my own simple filterable portfolio.
Can someone help me out ?
Here is the code:
Filters:
$tags = get_tags();
$html = '<div class="post_tags centered-content"> Alles';
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$html .= "<a href='#{$tag->slug}' title='{$tag->name} filter' class='button outline {$tag->slug}'>";
$html .= "{$tag->name}</a>";
}
$html .= '</div>';
echo $html;
Portfolio items:
function getPortfolio(){
global $post;
$portfolioargs = array(
'posts_per_page' => 999,
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'portfolio',
'post_status' => 'publish',
'suppress_filters' => false
);
$portfolioitems = get_posts($portfolioargs);
foreach ($portfolioitems as $portfolioitem) {
$feat_image = wp_get_attachment_image_src( get_post_thumbnail_id($portfolioitem->ID), 'full' );
$tags = wp_get_post_tags($portfolioitem->ID);
echo '<div class="card portfolio">';
echo '<a href="'. get_the_permalink($portfolioitem->ID) .'">';
echo '<figure>';
echo '<img src="'. pods_image_url($feat_image, 'card') .'"/>';
echo '</figure>';
echo '</a>';
echo '<div class="card-title-wrapper">';
echo '<h3>'. $portfolioitem->post_title .'</h3>';
echo '<span class="card-subtitle mdi mdi-tag-outline mdi-15px">';
foreach ( $tags as $tag ) {
echo $tag->name . ', ';
}
echo '</span>';
echo '</div>';
echo '<div class="card-content">';
echo '<p>'. $portfolioitem->post_content .'</p>';
echo '</div>';
echo '<div class="card-actions">';
echo 'Lees meer';
echo 'Bekijk website';
echo '</div>';
echo '</div>';
}
}
Check the screenshot here
In my opinion the best way to make these tags work as a filter is "AJAX".
here i have written your "tags" code to work as a javascript filter . hope it helps.
at first let rewrite your code to show tags , i add a line (created an input to send it with AJAX):
$tags = get_tags();
$html = '<div class="post_tags centered-content">
<input type='hidden' name='tag_filter' value=''>
Alles';
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$html .= "<a title='{$tag->name} filter' class='button outline filterBtn {$tag->slug}'>";
$html .= "{$tag->name}</a>";
}
$html .= '</div>';
echo $html;
then we will have our javascript (jquery) to send the selected tag values:
$('.filterBtn').click(function(){
var selected_tag = $(this).text();
$('input[name="tag_filter"]').val(selected_tag);
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'data_fetch', filter: $('input[name="tag_filter"]').val()},
success: function (data) {
$('#yourResultDIV').html(data);
}
});
})
the next part is our PHP code to produce result base on our selected filter: (in functions.php)
add_action('wp_ajax_data_fetch' , 'resultsLoad');
add_action('wp_ajax_nopriv_data_fetch','resultsLoad');
function resultsLoad(){
$filter = $_POST['filter'];
global $post;
$portfolioargs = array(
'posts_per_page' => 999,
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'portfolio',
'post_status' => 'publish',
'tag' => $filter
);
$portfolioitems = get_posts($portfolioargs);
foreach ($portfolioitems as $portfolioitem) {
$feat_image = wp_get_attachment_image_src( get_post_thumbnail_id($portfolioitem->ID), 'full' );
$tags = wp_get_post_tags($portfolioitem->ID);
echo '<div class="card portfolio">';
echo '<a href="'. get_the_permalink($portfolioitem->ID) .'">';
echo '<figure>';
echo '<img src="'. pods_image_url($feat_image, 'card') .'"/>';
echo '</figure>';
echo '</a>';
echo '<div class="card-title-wrapper">';
echo '<h3>'. $portfolioitem->post_title .'</h3>';
echo '<span class="card-subtitle mdi mdi-tag-outline mdi-15px">';
foreach ( $tags as $tag ) {
echo $tag->name . ', ';
}
echo '</span>';
echo '</div>';
echo '<div class="card-content">';
echo '<p>'. $portfolioitem->post_content .'</p>';
echo '</div>';
echo '<div class="card-actions">';
echo 'Lees meer';
echo 'Bekijk website';
echo '</div>';
echo '</div>';
}
die();
}
I Developing one project and I stuck in small thing which is very small for PHP Expert :D Which i'm not
I'm Trying to make Dropdown list of Custom taxonomies which work on select go to that Custom taxonomies page.
But After lot of search I found Solution But not doing action to go to the selected Custom taxonomies
First I found
<?php wp_dropdown_categories( 'taxonomy=my_custom_taxonomy' ); ?>
Second I found
function fjarrett_custom_taxonomy_dropdown( $taxonomy ) {
$terms = get_terms( $taxonomy );
if ( $terms ) {
printf( '<select name="%s" class="postform">', esc_attr( $taxonomy ) );
foreach ( $terms as $term ) {
printf( '<option value="%s">%s</option>', esc_attr( $term->slug ), esc_html( $term->name ) );
}
print( '</select>' );
}
}
Which I can use when I insert in any page code billow
<?php fjarrett_custom_taxonomy_dropdown( 'my_custom_taxonomy' ); ?>
Credit
https://frankiejarrett.com/2011/09/create-a-dropdown-of-custom-taxonomies-in-wordpress-the-easy-way/
BUT I DON'T KNOW NOW HOW I GONNA MAKE IT WORKING
Hope you can help me to find solution that from above any one solution can I able to make select and go thing.
Thanks in advance
POSSIBLE ANSWER - 1
I Found Possible Answer
<form id="category-select" class="category-select" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<?php
$args = array(
'show_option_none' => __( 'Select category' ),
'show_count' => 1,
'orderby' => 'name',
'name' => 'cat',
'echo' => 0,
'taxonomy' => 'MyCustomTaxonomys',
'value_field' => 'slug'
);
?>
<?php $select = wp_dropdown_categories( $args ); ?>
<?php $replace = "<select$1 onchange='return this.form.submit()'>"; ?>
<?php $select = preg_replace( '#<select([^>]*)>#', $replace, $select ); ?>
<?php echo $select; ?>
<noscript>
<input type="submit" value="View" />
</noscript>
</form>
It Give me URL
www.website.com/?cat=xxx where xxx is my custom taxonomy
But I Want URL
www.website.com/cat/xxx where xxx is my custom taxonomy
Is it possible?
You
could use something like this :
<?php
function fjarrett_custom_taxonomy_dropdown( $taxonomy ) {
$terms = get_terms( $taxonomy );
if ( $terms ) {
printf( '<select name="%s" class="postform">', esc_attr( $taxonomy ) );
foreach ( $terms as $term ) {
printf( '<option value="%s" data-location="%s">%s</option>', esc_attr( $term->slug ), get_term_link(term_id), esc_html( $term->name ) );
}
print( '</select>' );
}
}
?>
Then use your javascript code to redirect depending on the value of the attribute data-location
I did it this way like you say with PHP with wordpres:
<?php function click_taxonomy_dropdown($taxonomy, $title) { ?>
<select name="<?php echo $taxonomy;?>" id="<?php echo $taxonomy;?>">
<option value="-1"><?php echo $title;?></option>
<?php
$terms = get_terms($taxonomy);
foreach ($terms as $term) {
$link = get_term_link( $term, $taxonomy );
if($term->parent == 0){
printf( '<option class="level-1" value="'.$link.'">%s</option>', $term->name );
}
}
echo '</select>';
?>
<?php } ?>
And then with JS:
var dropdown1=document.getElementById("yourtaxonomy");
function onCatChange1(){
if(dropdown1.options[dropdown1.selectedIndex].value>"")
location.href=dropdown1.options[dropdown1.selectedIndex].value
}
The JS just get the ID of your select and then go to value when options are selected
AT End I Found One Alternate Working Solution Writing here so it will help someone needful
<?php
$categories = get_categories('taxonomy=xxxx');
$select = "<select name='' id='cat' class='postform'>n";
$select.= "<option value='-1'>Select category</option>n";
foreach($categories as $category){
if($category->count > 0){
$select.= "<option value='".$category->slug."'>".$category->name."
</option>";
}
}
$select.= "</select>";
echo $select;
?>
<script type="text/javascript">
<!--
var dropdown = document.getElementById("cat");
function onCatChange() {
if (dropdown.options[dropdown.selectedIndex].value != -1) {
location.href = "<?php echo home_url();?>/yyyy/" + dropdown.options[dropdown.selectedIndex].value + "/";
}
}
dropdown.onchange = onCatChange;
-->
</script>
JUST SET Proper XXXX and YYYY Value and solve.
Credit: John B. Hartley
http://www.johnbhartley.com/2012/custom-taxonomy-category-dropdown/
Again Thank you all for your efforts
I'm using a pre made theme for my site. I would like to add an owl carousel to the top of my front page that displays the most popular posts from the last month on my site. The pre made theme already comes with owl carousel. So my question is how can I add the carousel to my front page now? I found the owl carousel widget in the plugins file so I tried adding the widget to my front page but I don't think I added it right because nothing changed. Does anyone have any suggestions for how I could achieve this?
here are my full theme files if needed - https://www.dropbox.com/s/624p2sdn2i0jsqf/novablogshare.zip?dl=0
my custom front-page.php
<?php
get_header();
the_widget("owl_Widget"); //trying to call the owl carousel widget but it is not working
?>
<script>
var now=2; // when click start in page 2
jQuery(document).on('click', '#load_more_btn', function () {
jQuery.ajax({
type: "POST",
url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php",
data: {
action: 'my_load_more_function', // the name of the function in functions.php
paged: now, // set the page to get the ajax request
posts_per_page: 15 //number of post to get (use 1 for testing)
},
success: function (data) {
if(data!=0){
jQuery("#ajax").append(data); // put the content into ajax container
now=now+1; // add 1 to next page
}else{
jQuery("#load_more_btn").hide();
}
},
error: function (errorThrown) {
alert(errorThrown); // only for debuggin
}
});
});
</script>
<section id="ajax"><!-- i have to change div to section, maybe a extra div declare -->
<?php
$the_query = new WP_Query( [
'posts_per_page' => 15, // i use 1 for testing
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => get_query_var('paged', 1) //page number 1 on load
] );
if ($the_query->have_posts()) {
$i = 0;
$j = 0;
while ($the_query->have_posts()) {
$the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php } else { // Small posts ?>
<?php if($j % 2 === 0){ echo '<div class="row">';} ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<div class="two-front-container">
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0){ echo '</div>';}?>
<?php
}
$i++;
}?>
<?php
}?>
</section>
<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
<?php
get_footer();
functions for my front-page
add_action('wp_ajax_my_load_more_function', 'my_load_more_function');
add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function');
function my_load_more_function() {
$query = new WP_Query( [
'posts_per_page' => $_POST["posts_per_page"],
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => get_query_var('paged', $_POST["paged"])
] );
if ($query->have_posts()) {
$i = 0;
$j = 0;
while ($query->have_posts()) {
$query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php } else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<div class="two-front-container">
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}
wp_reset_query();
}else{
return 0;
}
exit;
}
owl-carousel.php (located in plugins folder)
<?php
/*
Plugin Name: Owl Carousel
Description: A simple plugin to include an Owl Carousel in any post
Author: Pierre JEHAN
Version: 0.5.3
Author URI: http://www.pierre-jehan.com
Licence: GPL2
*/
add_theme_support('post-thumbnails');
add_action('init', 'owlcarousel_init');
add_action('wp_print_scripts', 'owl_register_scripts');
add_action('wp_print_styles', 'owl_register_styles');
add_action('widgets_init', 'owl_widgets_init');
add_action('manage_edit-owl-carousel_columns', 'owl_columnfilter');
add_action('manage_posts_custom_column', 'owl_column');
add_action('admin_menu', 'owl_carousel_menu');
add_action('admin_enqueue_scripts', 'owl_carousel_admin_register_scripts');
if (filter_var(get_option('owl_carousel_wordpress_gallery', false), FILTER_VALIDATE_BOOLEAN)) {
add_filter('post_gallery', 'owl_carousel_post_gallery', 10, 2);
}
// Add functions to create a new attachments fields
add_filter("attachment_fields_to_edit", "owl_carousel_attachment_fields_to_edit", null, 2);
add_filter("attachment_fields_to_save", "owl_carousel_attachment_fields_to_save", null, 2);
/**
* Initilize the plugin
*/
function owlcarousel_init() {
$labels = array(
'name' => __('Owl Carousel', 'owl-carousel-domain'),
'singular_name' => __('Carousel Slide', 'owl-carousel-domain'),
'add_new' => __('Add New Slide', 'owl-carousel-domain'),
'add_new_item' => __('Add New Carousel Slide', 'owl-carousel-domain'),
'edit_item' => __('Edit Carousel Slide', 'owl-carousel-domain'),
'new_item' => __('Add New Carousel Slide', 'owl-carousel-domain'),
'view_item' => __('View Slide', 'owl-carousel-domain'),
'search_items' => __('Search Carousel', 'owl-carousel-domain'),
'not_found' => __('No carousel slides found', 'owl-carousel-domain'),
'not_found_in_trash' => __('No carousel slides found in trash', 'owl-carousel-domain'),
);
register_post_type('owl-carousel', array(
'public' => true,
'publicly_queryable' => false,
'exclude_from_search' => true,
'label' => 'Owl Carousel',
'menu_icon' => plugins_url('/owl-carousel/images/owl-logo-16.png'),
'labels' => $labels,
'capability_type' => 'post',
'supports' => array(
'title',
'editor',
'thumbnail'
)
));
$taxonomy_labels = array(
'name' => __('Carousels', 'owl-carousel-domain'),
'singular_name' => __('Carousel', 'owl-carousel-domain'),
'search_items' => __('Search Carousels', 'owl-carousel-domain'),
'popular_items' => __('Popular Carousels', 'owl-carousel-domain'),
'all_items' => __('All Carousels', 'owl-carousel-domain'),
'parent_item' => null,
'parent_item_colon' => null,
'edit_item' => __('Edit Carousel', 'owl-carousel-domain'),
'update_item' => __('Update Carousel', 'owl-carousel-domain'),
'add_new_item' => __('Add New Carousel', 'owl-carousel-domain'),
'new_item_name' => __('New Carousel Name', 'owl-carousel-domain'),
'separate_items_with_commas' => __('Separate carousels with commas', 'owl-carousel-domain'),
'add_or_remove_items' => __('Add or remove carousels', 'owl-carousel-domain'),
'choose_from_most_used' => __('Choose from the most used carousels', 'owl-carousel-domain'),
'not_found' => __('No carousels found.', 'owl-carousel-domain'),
'menu_name' => __('Carousels', 'owl-carousel-domain'),
);
register_taxonomy('Carousel', 'owl-carousel', array(
'labels' => $taxonomy_labels,
'rewrite' => array('slug' => 'carousel'),
'hierarchical' => true,
'show_admin_column' => true,
));
add_image_size('owl_widget', 180, 100, true);
add_image_size('owl_function', 600, 280, true);
add_shortcode('owl-carousel', 'owl_function');
add_filter("mce_external_plugins", "owl_register_tinymce_plugin");
add_filter('mce_buttons', 'owl_add_tinymce_button');
// Add Wordpress Gallery option
add_option('owl_carousel_wordpress_gallery', 'off');
add_option('owl_carousel_orderby', 'post_date');
}
function owl_carousel_menu() {
add_submenu_page('edit.php?post_type=owl-carousel', __('Parameters', 'owl-carousel-domain'), __('Parameters', 'owl-carousel-domain'), 'manage_options', 'owl-carousel-parameters', 'submenu_parameters');
}
function submenu_parameters() {
$isWordpressGallery = (filter_var(get_option('owl_carousel_wordpress_gallery', false), FILTER_VALIDATE_BOOLEAN)) ? 'checked' : '';
$orderBy = get_option('owl_carousel_orderby', 'post_date');
$orderByOptions = array('post_date', 'title');
echo '<div class="wrap owl_carousel_page">';
echo '<?php update_option("owl_carousel_wordpress_gallery", $_POST["wordpress_gallery"]); ?>';
echo '<h2>' . __('Owl Carousel parameters', 'owl-carousel-domain') . '</h2>';
echo '<form action="' . plugin_dir_url(__FILE__) . 'save_parameter.php" method="POST" id="owlcarouselparameterform">';
echo '<h3>' . __('Wordpress Gallery', 'owl-carousel-domain') . '</h3>';
echo '<input type="checkbox" name="wordpress_gallery" ' . $isWordpressGallery . ' />';
echo '<label>' . __('Use Owl Carousel with Wordpress Gallery', 'owl-carousel-domain') . '</label>';
echo '<br />';
echo '<label>' . __('Order Owl Carousel elements by ', 'owl-carousel-domain') . '</label>';
echo '<select name="orderby" />';
foreach ($orderByOptions as $option) {
echo '<option value="' . $option . '" ' . (($option == $orderBy) ? 'selected="selected"' : '') . '>' . $option . '</option>';
}
echo '</select>';
echo '<br />';
echo '<br />';
echo '<input type="submit" class="button-primary owl-carousel-save-parameter-btn" value="' . __('Save changes', 'owl-carousel-domain') . '" />';
echo '<span class="spinner"></span>';
echo '</form>';
echo '</div>';
}
/**
* List of JavaScript / CSS files for admin
*/
function owl_carousel_admin_register_scripts() {
wp_register_style('owl.carousel.admin.styles', plugin_dir_url(__FILE__) . 'css/admin_styles.css');
wp_enqueue_style('owl.carousel.admin.styles');
wp_register_script('owl.carousel.admin.script', plugin_dir_url(__FILE__) . 'js/admin_script.js');
wp_enqueue_script('owl.carousel.admin.script');
}
/**
* List of JavaScript files
*/
function owl_register_scripts() {
wp_register_script('js.owl.carousel', plugins_url('/owl-carousel/js/owl.carousel.js'));
wp_register_script('js.owl.carousel.script', plugins_url('/owl-carousel/js/script.js'));
wp_enqueue_script('jquery');
wp_enqueue_script('js.owl.carousel');
wp_enqueue_script('js.owl.carousel.script');
}
/**
* List of CSS files
*/
function owl_register_styles() {
wp_register_style('style.owl.carousel', plugins_url('/owl-carousel/css/owl.carousel.css'));
wp_register_style('style.owl.carousel.theme', plugins_url('/owl-carousel/css/owl.theme.css'));
wp_register_style('style.owl.carousel.transitions', plugins_url('/owl-carousel/css/owl.transitions.css'));
wp_register_style('style.owl.carousel.styles', plugins_url('/owl-carousel/css/styles.css'));
wp_enqueue_style('style.owl.carousel');
wp_enqueue_style('style.owl.carousel.theme');
wp_enqueue_style('style.owl.carousel.transitions');
wp_enqueue_style('style.owl.carousel.styles');
}
function owl_register_tinymce_plugin($plugin_array) {
$plugin_array['owl_button'] = plugins_url('/owl-carousel/js/owl-tinymce-plugin.js');
return $plugin_array;
}
function owl_add_tinymce_button($buttons) {
$buttons[] = "owl_button";
return $buttons;
}
/*
* Initialize Owl Widget
*/
function owl_widgets_init() {
register_widget("owl_Widget");
}
class owl_Widget extends WP_Widget {
public function __construct() {
parent::__construct('owl_Widget', 'Owl Carousel', array('description' => __('A Owl Carousel Widget', 'text_domain')));
}
public function form($instance) {
if (isset($instance['title'])) {
$title = $instance['title'];
} else {
$title = __('Widget Carousel', 'text_domain');
}
if (isset($instance['category'])) {
$carousel = $instance['category'];
} else {
$carousel = 'Uncategorized';
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('category'); ?>"><?php _e('Carousel:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('category'); ?>" name="<?php echo $this->get_field_name('category'); ?>" type="text" value="<?php echo esc_attr($carousel); ?>" />
</p>
<?php
}
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = strip_tags($new_instance['title']);
$instance['category'] = strip_tags($new_instance['category']);
return $instance;
}
public function widget($args, $instance) {
extract($args);
$title = apply_filters('widget_title', $instance['title']);
echo $before_widget;
if (!empty($title))
echo $before_title . $title . $after_title;
echo owl_function(array(category => $instance['category'], singleItem => "true", autoPlay => "true", pagination => "false"));
echo $after_widget;
}
}
/**
* Add custom column filters in administration
* #param array $columns
*/
function owl_columnfilter($columns) {
$thumb = array('thumbnail' => 'Image');
$columns = array_slice($columns, 0, 2) + $thumb + array_slice($columns, 2, null);
return $columns;
}
/**
* Add custom column contents in administration
* #param string $columnName
*/
function owl_column($columnName) {
global $post;
if ($columnName == 'thumbnail') {
echo edit_post_link(get_the_post_thumbnail($post->ID, 'thumbnail'), null, null, $post->ID);
}
}
/**
* Adding our images custom fields to the $form_fields array
* #param array $form_fields
* #param object $post
* #return array
*/
function owl_carousel_attachment_fields_to_edit($form_fields, $post) {
// add our custom field to the $form_fields array
// input type="text" name/id="attachments[$attachment->ID][custom1]"
$form_fields["owlurl"] = array(
"label" => __("Owl Carousel URL"),
"input" => "text",
"value" => get_post_meta($post->ID, "_owlurl", true)
);
return $form_fields;
}
/**
* Save images custom fields
* #param array $post
* #param array $attachment
* #return array
*/
function owl_carousel_attachment_fields_to_save($post, $attachment) {
if (isset($attachment['owlurl'])) {
update_post_meta($post['ID'], '_owlurl', $attachment['owlurl']);
}
return $post;
}
/**
* Plugin main function
* #param type $atts Owl parameters
* #param type $content
* #return string Owl HTML code
*/
function owl_function($atts, $content = null) {
extract(shortcode_atts(array(
'category' => 'Uncategoryzed'
), $atts));
$data_attr = "";
foreach ($atts as $key => $value) {
if ($key != "category") {
$data_attr .= ' data-' . $key . '="' . $value . '" ';
}
}
$lazyLoad = array_key_exists("lazyload", $atts) && $atts["lazyload"] == true;
$args = array(
'post_type' => 'owl-carousel',
'orderby' => get_option('owl_carousel_orderby', 'post_date'),
'order' => 'asc',
'tax_query' => array(
array(
'taxonomy' => 'Carousel',
'field' => 'slug',
'terms' => $atts['category']
)
),
'nopaging' => true
);
$result = '<div id="owl-carousel-' . rand() . '" class="owl-carousel owl-carousel-' . sanitize_title($atts['category']) . '" ' . $data_attr . '>';
$loop = new WP_Query($args);
while ($loop->have_posts()) {
$loop->the_post();
$img_src = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), get_post_type());
$meta_link = get_post_meta(get_post_thumbnail_id(get_the_ID()), '_owlurl', true);
$result .= '<div class="item">';
if ($img_src[0]) {
$result .= '<div>';
if (!empty($meta_link)) {
$result .= '<a href="' . $meta_link . '">';
}
if ($lazyLoad) {
$result .= '<img class="lazyOwl" title="' . get_the_title() . '" data-src="' . $img_src[0] . '" alt="' . get_the_title() . '"/>';
} else {
$result .= '<img title="' . get_the_title() . '" src="' . $img_src[0] . '" alt="' . get_the_title() . '"/>';
}
if (!empty($meta_link)) {
$result .= '</a>';
}
// Add image overlay with hook
$slide_title = get_the_title();
$slide_content = get_the_content();
$img_overlay = '<div class="owl-carousel-item-imgoverlay">';
$img_overlay .= '<div class="owl-carousel-item-imgtitle">' . $slide_title . '</div>';
$img_overlay .= '<div class="owl-carousel-item-imgcontent">' . wpautop($slide_content) . '</div>';
$img_overlay .= '</div>';
$result .= apply_filters('owlcarousel_img_overlay', $img_overlay, $slide_title, $slide_content, $meta_link);
$result .= '</div>';
} else {
$result .= '<div class="owl-carousel-item-text">' . get_the_content() . '</div>';
}
$result .= '</div>';
}
$result .= '</div>';
/* Restore original Post Data */
wp_reset_postdata();
return $result;
}
/**
* Owl Carousel for Wordpress image gallery
* #param string $output Gallery output
* #param array $attr Parameters
* #return string Owl HTML code
*/
function owl_carousel_post_gallery($output, $attr) {
global $post;
if (isset($attr['orderby'])) {
$attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
if (!$attr['orderby'])
unset($attr['orderby']);
}
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => ''
), $attr));
$id = intval($id);
if ('RAND' == $order)
$orderby = 'none';
if (!empty($include)) {
$include = preg_replace('/[^0-9,]+/', '', $include);
$_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));
$attachments = array();
foreach ($_attachments as $key => $val) {
$attachments[$val->ID] = $_attachments[$key];
}
}
if (empty($attachments))
return '';
// Add item number if not defined
if (!isset($attr['items'])) {
$attr['items'] = '1';
}
$data_attr = "";
foreach ($attr as $key => $value) {
if ($key != "category") {
$data_attr .= ' data-' . $key . '="' . $value . '" ';
}
}
$output .= '<div id="owl-carousel-' . rand() . '" class="owl-carousel" ' . $data_attr . '>';
foreach ($attachments as $id => $attachment) {
$img = wp_get_attachment_image_src($id, 'full');
$meta_link = get_post_meta($id, '_owlurl', true);
$title = $attachment->post_title;
$output .= "<div class=\"item\">";
if (!empty($meta_link)) {
$output .= "<a href=\"" . $meta_link . "\">";
}
$output .= "<img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" alt=\"$title\" />\n";
if (!empty($meta_link)) {
$output .= "</a>";
}
$output .= "</div>";
}
$output .= "</div>";
return $output;
}
what I'm trying to get the carousel to look like (whowhatwear.com)
Would I want my code to look something like this?
<div id="slider">
<?php
$carousel_cat = get_theme_mod('carousel_setting','1');
$carousel_count = get_theme_mod('count_setting','4');
$month = date('m');
$year = date('Y');
$new_query = new WP_Query( array('posts_per_page' => $carousel_count, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC','monthnum'=>$month,'year'=>$year ));
?>
<?php if ( $new_query->have_posts() ) : ?>
<?php while ( $new_query->have_posts() ) : $new_query->the_post(); ?>
<div class="item">
<?php the_post_thumbnail('popular-posts'); ?>
<h2><a class="popular-category"
<?php
$categories = get_the_category();
if ( ! empty( $categories ) ) {
echo '' . esc_html( $categories[0]->name ) . '';
}
?></a></h2>
<p>
<a class="popular-excerpt" href="<?php the_permalink(); ?>"><?php echo get_the_excerpt(); ?></a>
</p>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e(); ?></p>
<?php endif; ?>
</div>
#user6738171 I believe you do not need to the_widget("owl_Widget"); Just build the html you would like to show(using php) and then call the carousel with JQuery like so:
jQuery(document).ready(function($){
$(".homepage-slides").owlCarousel({
items: 1,
nav: true,
dots: false,
autoplay: true,
loop: true
});
});
Please read documentation for the correct structure of carousel items https://github.com/OwlCarousel2/OwlCarousel2. If you need help for building the carousel let me know. :-)
Something like this:
<?php
?>
<div class="homepage-slides">
<div>
<?php the_post_thumbnail('thumbnail', array('class' => 'thumbnail')); ?>
<?php the_title(); ?>
<?php the_excerpt(); ?>
</div>
</div>
<?php
And the jquery from above. Inside the loop of course
Try this code it loops through the posts with the custom query you provided and puts them out accordingly. The only thing you should have to do is calculate how many posts you want to show and edit the carousel count.
<?php
$month = date('m');
$year = date('Y');
$new_query = new WP_Query( array('posts_per_page' => $carousel_count, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC','monthnum'=>$month,'year'=>$year ));
?>
<?php if ( $new_query->have_posts() ) : ?>
<div class="homepage-slides">
<?php while ( $new_query->have_posts() ) : $new_query->the_post(); ?>
<div>
<?php the_post_thumbnail('thumbnail', array('class' => 'thumbnail')); ?>
<?php the_title(); ?>
<?php the_excerpt(); ?>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php else : ?>
<p><?php _e(); ?></p>
<?php endif; ?>
<script>
jQuery(document).ready(function($){
$(".homepage-slides").owlCarousel({
items: 4,
nav: true,
dots: false,
autoplay: true,
loop: true
});
});
</script>
So i have a shortcode that creates a filtered dropdown, as well as adds 6 custom blog posts. I have some javascript that i want to add after all the dom elements get added. How do i do that. I really just want invoke a javascript function post shortcode execution. Do i just set a timer and once something is found do it, or is there a bit better approach to this?
jQuery(document).ready(function(){
/* CREATE ISOTOPE on init */
window.$announcement_isotope = jQuery('.announcement_section').isotope();
window.$announcement_isotope.isotope({
// Isotope options
itemSelector: '.post_grid',
resizable: true,
layoutMode: "fitRows",
transformsEnabled: false,
isOriginLeft: jQuery( '.rtl' ).length ? false : true
});
});
I am getting an error because it can't found .announcement_section because that is being created in the shortcode.
this is the shortcode code:
function render_announcement_section($atts){
extract( shortcode_atts( array(
'term' => '',
), $atts ) );
/***********GET PARENT Filters' ID*********/
$parentTerm=get_term_by('slug',$term,'category');
$parentID = $parentTerm->term_id;
/***************** FILTER ********************/
$filter_output .= '<div id="search-container">
<form class="form-wrapper cf">
<input type="text" name="s" placeholder="Search here..." required>
<button class="fa fa-search" type="submit"></button>
</form>
</div>';
$filter_output .= '<div class="filter_wrapper">';
$filter_output .= '<div class="filter_header">Filter By';
$filter_output .= '<div class="updateButton">Update</div>';
$filter_output .= '</div>'; // filter_header
// FLOATING OBJECTS
$filter_output .= '<div class="filterDivider"></div>';
// Include the post categories as css classes for later useage with filters
$terms = get_terms( 'category', array(
'orderby' => 'count',
'hide_empty' => 'true',
'exclude' => array(1,190),
)
);
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
$filter_output .= '<div class="filter_container filter_category" >';
$filter_output .= '<h4>Topics</h4>';
$filter_output .= '<ul class="filters">';
foreach ( $terms as $child_term ) {
$filter_output .= '<li class="filter"><label><input type="checkbox" value="'.$child_term->slug.'">'.$child_term->name.'</label></li>';
}
$filter_output .= '<li class="filter_all"><label><input type="checkbox" value="Select All">Select All</label></li>';
$filter_output .= '</ul>';
$filter_output .= '</div>'; // END OF .filter_container
};
$types = get_terms( 'post_tag', array(
'orderby' => 'none',
)
);
if ( ! empty( $types ) && ! is_wp_error( $types ) ){
$filter_output .= '<div class="filter_container filter_tag">';
$filter_output .= '<h4>Types</h4>';
$filter_output .= '<ul class="filters">';
foreach ( $types as $type ) {
$filter_output .= '<li class="filter filter-announcements '.$type->slug.'"><label><input type="checkbox" value="'.$type->slug.'">'.$type->name.'</label></li>';
}
$filter_output .= '<li class="filter_all"><label><input type="checkbox" value="Select All">Select All</label></li>';
$filter_output .= '</ul>';
$filter_output .= '</div>'; // END OF .filter_container
};
$filter_output .= '</div>'; // end of .filter_wrapper
/*********** POSTS ****************/
$args = array(
'posts_per_page' => 6,
'post_type' => 'post',
'category__in' => array(187,186,183,182,184),
'orderby' => 'date',
'order' => 'DESC',
'paged' => get_query_var('paged')
);
$cpt_query= new WP_Query($args);
$output .= '<div class="announcement_container">'; // OUTER CONTAINER
$output .= $filter_output;
$output .= '<div class="announcement_section announcment_section_'.$term.'">';
foreach ( $cpt_query->posts as $post )
{
$output .= post_factory($post);
}
$output .= '</div>'; // END of .announcment_section
$output .= '</div>'; // END of OUTER CONTAINER .announcement_container
wp_reset_query();
return $output;
}
add_shortcode('add_announcement_section', 'render_announcement_section');
Here is the shortcode i use to add JS file to each page independently.
function add_js_from_theme_folder( $atts )
{
extract(shortcode_atts(array(
), $atts));
foreach($atts as $value)
{
$return_string .='<script type="text/javascript" src="'.get_stylesheet_directory_uri().'/'.$value.'"></script>';
}
return $return_string;
}
add_shortcode( 'add_js', 'add_js_from_theme_folder');
Here is the website giving me issues : http://www.challenger.org/news-and-media/
Thanks for the support!
Well my biggest issue was thh enqueueing of JS files. Turns out if i register all my js files from the beginning and then just enqueue them in a shortcode when i need them it all works out marvelously. Than you William Patton for walking me through this, i guess i just needed to talk it out!
//Register
function theme_enqueue_styles() {
wp_enqueue_style( 'avada-parent-stylesheet', get_template_directory_uri() . '/style.css' );
wp_register_script( 'news-and-media', get_stylesheet_directory_uri().'/js/news_and_media.js');
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
// ENQUEUE
function enqueue_js( $atts )
{
extract(shortcode_atts(array(
), $atts));
foreach($atts as $value)
{
wp_enqueue_script($value);
}
}
add_shortcode( 'add_js_handle', 'enqueue_js');
// [add_js_handle val1="news-and-media" val2="etc"]