Run a javascript function after a wordpress shortcode executes - javascript

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"]

Related

How can I create a filterable portfolio in PHP (wordpress)?

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();
}

Wysiwyg is not working in the group field wordpress codestar framwork

I am trying to add one+ more item with Wysiwyg editor in group field with codestar framework metabox option,but it is not working . I tried to figure out solution,but i found that when i rename class of below hidden section, it hidden section get's appear and it works or editor function works correctly for this current item only. but also when i delete this hidden section with saving two or more item ....
Hidden Section:
echo '<div class="cs-group cs-group-'. $el_class .'-adding hidden">';
echo '<h4 class="cs-group-title">'. $acc_title .'</h4>';
echo '<div class="cs-group-content">';
foreach ( $fields as $field ) {
$field['sub'] = true;
$unique = $this->unique .'[_nonce]['. $this->field['id'] .']['. $last_id .']';
$field_default = ( isset( $field['default'] ) ) ? $field['default'] : '';
echo cs_add_element( $field, $field_default, $unique );
}
echo '<div class="cs-element cs-text-right cs-remove">
<a href="#" class="button cs-warning-primary cs-remove-group">'.
esc_html__( 'Remove', 'cs-framework' ) .'</a>
</div>';
echo '</div>';
echo '</div>';
Appeared Full Section:
echo '<div class="cs-groups cs-group-'. $el_class .'-addings hiddens">';
echo '<h4 class="cs-group-title">'. $acc_title .'</h4>';
echo '<div class="cs-group-content">';
foreach ( $fields as $field ) {
$field['sub'] = true;
$unique = $this->unique .'[_nonce]['. $this->field['id'] .']['. $last_id .']';
$field_default = ( isset( $field['default'] ) ) ? $field['default'] : '';
echo cs_add_element( $field, $field_default, $unique );
}
echo '<div class="cs-element cs-text-right cs-remove">
<a href="#" class="button cs-warning-primary cs-remove-group">'.
esc_html__( 'Remove', 'cs-framework' ) .'</a>
</div>';
echo '</div>';
echo '</div>';
echo '<div class="cs-groups cs-accordion">';
if( ! empty( $this->value ) ) {
foreach ( $this->value as $key => $value ) {
$title = ( isset( $this->value[$key][$field_id] ) ) ? $this->value[$key][$field_id] : '';
if('page_type_section' == $field_id) {
$title = get_the_title($this->value[$key][$field_id]);
}
if ( is_array( $title ) && isset( $this->multilang ) ) {
$lang = cs_language_defaults();
$title = $title[$lang['current']];
$title = is_array( $title ) ? $title[0] : $title;
}
$field_title = ( ! empty( $search_id ) ) ? $acc_title : $field_title;
echo '<div class="cs-group cs-group-'. $el_class .'-'. ( $key + 1 ) .'">';
echo '<h4 class="cs-group-title">'. $field_title .': '. $title .'</h4>';
echo '<div class="cs-group-content">';
foreach ($fields as $field ) {
$field['sub'] = true;
$unique = $this->unique . '[' . $this->field['id'] . ']['.$key.']';
$value = ( isset( $field['id'] ) && isset( $this->value[$key][$field['id']] ) ) ? $this->value[$key][$field['id']] : '';
echo cs_add_element( $field, $value, $unique );
}
echo '<div class="cs-element cs-text-right cs-remove">
<a href="#" class="button cs-warning-primary cs-remove-group">'.
esc_html__( 'Remove', 'cs-framework' ) .'</a>
</div>';
echo '</div>';
echo '</div>';
}
}
echo '</div>';
echo ''. $this->field['button_title'] .'';
echo wp_kses_post($this->element_after());
for the first item it works correctly, others not work. i have also inspected it, with inspect option. For the first item it is getting classes id or other thing, but then for the others are not getting or working.Any help...
I solved.
Open cs-framework/fields/wysiwyg/wysiwyg.php
// Replace
wp_editor( $field_value, $field_id, $settings );
// to with
wp_editor( $field_value, $field_id.rand(0,20), $settings );

How to use images to change dropdown selection?

what I'm trying to accomplish is to have image thumbnails replace the dropdown box in a woocommerce variation product page. The way I went to trying to get that to work is when a user clicks on an variation product image, the (will be hidden) dropdown box will change to the correct value just as if the user had interacted with the dropdown box itself. the file I'm working with is variable.php.
Here is a snippet of the code. All my custom codes start with the option tag loop just before the closing Select tag.
$loop = 0; foreach ( $attributes as $name => $options ) : $loop++; $countimg = 0;?>
<select id="<?php echo esc_attr( sanitize_title( $name ) ); ?>" name="attribute_<?php echo sanitize_title( $name ); ?>" >
<option value=""><?php echo __( 'Choose an option', 'woocommerce' ) ?>…</option>
<?php
if ( is_array( $options ) ) {
if ( isset( $_REQUEST[ 'attribute_' . sanitize_title( $name ) ] ) ) {
$selected_value = $_REQUEST[ 'attribute_' . sanitize_title( $name ) ];
} elseif ( isset( $selected_attributes[ sanitize_title( $name ) ] ) ) {
$selected_value = $selected_attributes[ sanitize_title( $name ) ];
} else {
$selected_value = '';
}
// Get terms if this is a taxonomy - ordered
if ( taxonomy_exists( $name ) ) {
$orderby = wc_attribute_orderby( $name );
switch ( $orderby ) {
case 'name' :
$args = array( 'orderby' => 'name', 'hide_empty' => false, 'menu_order' => false );
break;
case 'id' :
$args = array( 'orderby' => 'id', 'order' => 'ASC', 'menu_order' => false, 'hide_empty' => false );
break;
case 'menu_order' :
$args = array( 'menu_order' => 'ASC', 'hide_empty' => false );
break;
}
$terms = get_terms( $name, $args );
$count = 1;
foreach ( $terms as $term ) {
if ( ! in_array( $term->slug, $options ) )
continue;
echo '<option id="' . $count . '" value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . '>' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</option>';
$count++;}
} else {
foreach ( $options as $option ) {
echo '<option id="' . $count . '" value="' . esc_attr( sanitize_title( $option ) ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $option ), false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</option>';
$count++;}
}
}
?>
</select>
<div>
<?php foreach ( $available_variations as $available_variation ) {
$countimg++;
$image_links = $available_variation['image_link'];
echo '<img id="' . $countimg . '" src="' . $image_links . '" onclick="selectVariationOption(this.id)" style="height:65px; margin-bottom:5px;">';
}?>
</div>
<script>
function selectVariationOption(clicked_id) {
document.getElementById("<?php echo esc_attr( sanitize_title( $name ) ); ?>").selectedIndex = clicked_id;
}
</script>
<?php
if ( sizeof($attributes) == $loop )
echo '<a class="reset_variations" href="#reset">' . __( 'Clear selection', 'woocommerce' ) . '</a>';
?>
<?php endforeach;?>
</div>
</div>
What I did here was I added a numerical ID to the option tags and increases with each additional option available. I then showed the available image variations and added a numerical ID that looped to match the corresponding option ID. Finally, I used a simple javascript that when an image is clicked, the dropdown box changes to the correct selectedIndex. The problem is, the page doesn't react to the changes as if the dropdown box was directly interacted with. In short, nothing happens but the dropdown box changing visual value. I want it so that clicking on the image would be the exact same as clicking on an option in the dropdown box.
Let me know if you need more clarification or information. Thanks in advance!
Using the Variation Swatches and Photos plugin worked. Just had to go in and edit the plugin's variable.php to show all the information that was missing from my original variable.php file. Now I just have to spend a couple hours editing each product.

NAN Error When Adding Percentage Sign to JS

On one of my websites, www.makememodern.com, there is a section (What We Do) that displays numbers that rapidly increase until they reach a defined number. I am wanting to place the "%" with the larger orange numbers, but it results with "NAN".
Here is what I found in the Shortcode.php file related to this section:
function rocknrolla_milestone_box_shortcode( $atts, $content = null ){
extract( shortcode_atts(array(
"count" => '500',
"title" => ''
), $atts) );
$rnr_milestone_box = '<div class="milestone-counter" data-perc="'. $count .'">';
$rnr_milestone_box .= '<span class="milestone-count highlight">'. $count .'</span>';
$rnr_milestone_box .= '<h6 class="milestone-details">'. $title .'</h6>';
$rnr_milestone_box .= '</div>';
return $rnr_milestone_box;
}
I found this in the scripts.js file that is related to the section I'm having trouble with:
jQuery('.milestone-counter').appear(function() {
jQuery('.milestone-counter').each(function(){
dataperc = jQuery(this).attr('data-perc'),
jQuery(this).find('.milestone-count').delay(6000).countTo({
from: 0,
to: dataperc,
speed: 2000,
refreshInterval: 100
});
$rnr_milestone_box .= '<span class="milestone-count highlight"><span class="milestone-count-percent">'. $count .'</span>%</span>';
...
jQuery(this).find('.milestone-count-percent').delay(6000).countTo({
This is the easiest hack I can think of without any JS wrangling..see if this works.
function rocknrolla_milestone_box_shortcode( $atts, $content = null ){
extract( shortcode_atts(array(
"count" => '500',
"title" => ''
), $atts) );
$rnr_milestone_box = '<div class="milestone-counter" data-perc="'. $count .'">';
$rnr_milestone_box .='<span class="milestone-count highlight">'. $count .'</span>';
$rnr_milestone_box .='<span class="highlight" style="font-family: \'Open Sans\', \'Times New Roman\', Times, serif;font-size: 80px;line-height: 1.2;padding: 0;margin-bottom: 20px;position: relative;font-weight:700;text-transform: uppercase;letter-spacing: -0.02em;">%</span>';
$rnr_milestone_box .= '<h6 class="milestone-details">'. $title .'</h6>';
$rnr_milestone_box .= '</div>';
return $rnr_milestone_box;
}

Change date format advanced custom fields wordpress

Hi I am working with advanced custom fields with wordpress and im trying to fix the date to show : 24/01/201 instead of 01/24/2013
I have been looking at the ACF site but I can't seem to find why it is doing this.
please find attached my code :)
<?php
// start query
$query_args = array(
// number of featured items to show
'posts_per_page' => '-1',
'post_type' => 'product',
);
$args = array(
'meta_key' => 'time_&_date',
'orderby' => 'meta_value_num',
'order' => 'DESC'
);
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) : $the_query->the_post();
$date = DateTime::createFromFormat('Ymd', get_field('time_&_date'));
echo $date->format('M d, Y');
endwhile;
// start loop
$wp_query = new WP_Query($query_args);
if ($wp_query->have_posts()) {
echo '<ul class="eventslist">';
echo '</br>';
echo '</br>';
// start while
while($wp_query->have_posts()) : $wp_query->the_post();
$_product = new jigoshop_product(get_the_ID());
echo '<li>';
// Event container
echo '<a href="'.get_permalink().'">';
// Event title
echo '<div class="loop_title lightlinksnounderline"> <span>•</span>' . the_title('','',false);
echo '</a>';
echo '</div>';
echo '<h3 class="field_title_loop">Date &amp Time: '; the_field('time_&_date');
echo '</h3>';
echo '<div class="cart_button">' ; do_action('jigoshop_after_shop_loop_item', $post, $_product );
echo '</div>';
echo '</li>';
echo '<div class="price_cart">' ; do_action('jigoshop_after_shop_loop_item_title', $post, $_product);
echo '</div>';
echo '</br>';
echo '<div class="cart_line">';
echo '</div>';
// end while
endwhile;
echo '</ul>';
// end loop
// reset query
wp_reset_query();
}
?>
shouldn't your $date->format be (d M Y) for this?

Categories