Here's a working example of where we are: http://fpusa.drunk.kiwi/product/ship-your-idea-2/
I am trying to create 'swatches' for a user to click, which would than change the value of the hidden select box woocommerce uses to grab the variation data.
Is there a specific way to tell woocommerce to read the value of the select box?
Everything works as expected but the javascript event which changes the variation id and gets everything ready to add to cart never happens.
Note: I hide the wc_dropdown with d-none because I thought it would minimize a custom solution.
Variable.php - Calls fpusa_product_attribute_button();
<?php foreach ( $attributes as $attribute_name => $options ) : ?>
<tr class="">
<td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
<td class="value">
<?php
fpusa_product_attribute_button( $options, $attribute_name, $product );
wc_dropdown_variation_attribute_options( array(
'options' => $options,
'attribute' => $attribute_name,
'product' => $product,
'class' => 'd-none',
));
echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
?>
</td>
</tr>
<?php endforeach; ?>
fpusa_product_attribute_button()
function fpusa_product_attribute_button( $options, $attribute_name, $product ){
if( ! empty( $options ) ) : ?>
<div id="var_btn" class="d-flex">
<?php foreach( $options as $option ): ?>
<button type="button" class="d-flex btn justify-content-center align-items-center border mx-1" data-key="<?php echo $attribute_name ?>" data-value="<? echo $option ?>">
<?php echo $option; ?>
</button>
<?php endforeach; ?>
</div> <?php
endif;
}
Functions.js
$('#var_btn button').click(function(){
let attribute = $(this).attr('data-key');
let option = $(this).attr('data-value');
console.log( attribute, option );
$('#' + attribute).val( option );
});
All I had to do is simply trigger the change event on the <select> was passing the selected option to.
$('#var_btn button').click(function(){
let attribute = $(this).attr('data-key');
let option = $(this).attr('data-value');
console.log( attribute, option );
$('#' + attribute).val( option ).change();
});
Related
I have a simple post loop with buttons that list all possible categories. The categories are listed as following:
<div class="filter-nav">
<?php
global $post;
$cat_args=array(
'post_type' => 'post',
);
$categories=get_categories($cat_args);
foreach($categories as $category) {
echo '<button type="button" data-category="' . $category->slug . '">' . $category->name . '</button>';
}
?>
</div>
And a WP loop as following:
<?php
$args = array(
'post_type' => 'post',
'orderby' => 'date',
'order' => 'ASC',
'status' => 'publish',
'posts_per_page' => -1,
);
$post = new WP_Query($args);
?>
<?php if ( $post->have_posts() ) { ?>
<div class="feed-slider">
<?php
while ($post->have_posts()) {
$post->the_post(); ?>
<div class="feed-column">
<?php if ( has_post_thumbnail() ) { ?>
<div class="feed-thumb">
<div class="image-overlay transition"></div>
<?php the_post_thumbnail( 'medium_large' ); ?>
</div>
<?php } ?>
<div class="feed-meta">
<p class="feed-categories">
<?php foreach ( ( get_the_category() ) as $category ) {
echo $category->cat_name . ' ';
} ?>
</p>
<h3 class="quicksand font-bold transition"><?php the_title(); ?></h3>
</div>
</div>
<?php
wp_reset_postdata();
}; ?>
</div>
<?php } else { ?>
<p class="no-content">Nothing found!</p>
<?php } ?>
What would be the approach to be done so that when one of the categories buttons is clicked, the loop is run one more time, filtering it with only the selected category?
I've created a custom WP-Query with the possibility to load more posts on button click with AJAX. Everything works fine. Now I'd like to hide the button if there are less or exactly four posts. The button should also disappear if there are all posts loaded with AJAX.
I'd be very thankful if somebody could help me! Thank you in advance.
My PHP:
<div class="masonry category-single-magazin__inner entry-content">
<?php $args = array('category_name' => 'magazin', 'posts_per_page' => '4', 'paged' => 1, 'orderby'=> 'date', 'order' => 'DESC'); $custom_query = new WP_Query( $args ); while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<article class="object <?php if ( get_field( 'beitragsfarbe' ) == 1 ) { echo 'object--blue'; } else { echo 'object--yellow'; } ?>" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>">
<div class="lazy object__inner" data-src="<?php echo get_the_post_thumbnail_url(); ?>">
<div class="overline">
<h6>
<?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag->name . ' '; }}?>
</h6>
</div>
<div class="object__inner__text content-no-margin">
<h4>
<?php the_title(); ?>
</h4>
<p class="textlink" href="<?php the_permalink(); ?>">Mehr erfahren</p>
</div>
</div>
</a>
</article>
<?php endwhile ?>
</div>
<button class="load-more reload-masonry button-full button-full--yellow">
<div class="button-full__inner">Mehr anzeigen</div>
</button>
<script type="text/javascript">
jQuery(document).ready(function() {
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
var pageNumber = <?php echo count_cat_post('magazin')/4; ?>;
$('.load-more').on('click', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': '<?php echo wp_create_nonce("load_more_posts"); ?>',
};
$.post(ajaxurl, data, function(response) {
$('.masonry').append(response);
page++;
});
});
if (page == (parseInt(pageNumber) - 1)) {
$('.load-more').hide();
}
});
</script>
My functions.php:
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$args = array(
'category_name' => 'magazin',
'posts_per_page' => '4',
'paged' => $paged,
'orderby'=> 'date',
'order' => 'DESC'
);
$custom_query = new WP_Query( $args ); while ( $custom_query->have_posts() ) : $custom_query->the_post() ?>
<article class="object <?php if ( get_field( 'beitragsfarbe' ) == 1 ) { echo 'object--blue'; } else { echo 'object--yellow'; } ?>" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>">
<div class="lazy-ajax object__inner" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>')">
<div class="overline"><h6><?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag->name . ' '; }}?></h6></div>
<div class="object__inner__text content-no-margin">
<h4><?php the_title(); ?></h4>
<p class="textlink" href="<?php the_permalink(); ?>">Mehr erfahren</p>
</div>
</div>
</a>
</article>
<?php endwhile ?>
<?php wp_die();}
I will not write whole code but here is the possible solution. First you need to know how many pages of post are there, you can get total number of post by using following Wordpress function
<?php
$count_posts = wp_count_posts();
/*this function only works with post type is post .
if you using for categories first you need to find how many
post are there in that categories.*/
?>
If you divide total count_post by number of post per page you will get total number of page.
Now you can simply check it in your javascript like this.
var pageNumber = <?php echo (wp_count_posts()/4); ?>
//make sure pageNumber is number not string can use javascript parseInt function
jQuery(document).ready(function() {
if(page==(parseInt(pageNumber)-1)){
//send ajax request to get last page post but hide the button
}
});
I hope this will help you. Let me know if anything is not clear.
Solved it by myself. Although thank you for guiding me to the solution!
I've created a function for this with jQuery counting the visible posts:
function hideButton(){
var poststotal = <?php echo count_cat_post('magazin'); ?>;
var postsvisible = $('.masonry > article').length;
if (poststotal == postsvisible) {
$('.load-more').addClass('hidden');
}
};
I am using a WordPress plugin that provides a front end editor to create a custom post type (directory). When I create a new directory listing the page redirects back to the /listings/my-listings/, however when I edit an existing listing and click the save button it dose not redirect. The page page instead refreshes and adds a # to the end of the URL (/listings/edit-listing/#). Could anyone look at this and help me to tweak the php or provide a javascript/jquery to redirect me back to the /listings/my-listings/?
I believe it has something to do with the .submit class at the bottom of the code...
Code:
<?php
get_header();
/**
* The template for displaying the Add/edit listing page.
* You can override this file in your active theme.
*
* #license GNU General Public License (Version 2 - GPLv2) {#link
http://www.gnu.org/licenses/gpl-2.0.html}
*/
global $wp_query, $wp_taxonomies, $post, $post_ID, $CustomPress_Core,
$Directory_Core;
$listing_data = '';
$selected_cats = '';
$error = get_query_var('dr_error');
$post_statuses = get_post_statuses(); // get the wp post status list
$options = $Directory_Core->get_options('general');
$allowed_statuses = $Directory_Core->get_options('general'); // Get the ones we allow
$allowed_statuses['moderation'] = (empty($allowed_statuses['moderation']) ) ? array('publish' => 1, 'draft'=> 1 ) : $allowed_statuses['moderation']; // Get the ones we allow
$allowed_statuses = array_reverse(array_intersect_key($post_statuses, $allowed_statuses['moderation']) ); //return the reduced list
//Are we adding a Listing?
if (is_page($Directory_Core->add_listing_page_id)) {
//Make an auto-draft so we have a post id to connect attachemnts to. Set global $post_ID so media editor can hook up. Watch the case
$post_ID = wp_insert_post( array( 'post_title' => __( 'Auto Draft' ), 'post_type' => $Directory_Core->post_type, 'post_status' => 'auto-draft' ) );
$listing_data = get_post($post_ID, ARRAY_A );
$listing_data['post_title'] = ''; //Have to have a title to insert the auto-save but we don't want it as final.
$editing = false;
}
//Or are we editing a listing?
if(is_page($Directory_Core->edit_listing_page_id)){
$listing_data = get_post( $_REQUEST['post_id'], ARRAY_A );
$post_ID = $listing_data['ID'];
$editing = true;
}
$post = get_post($post_ID);
if ( isset( $_POST['listing_data'] ) ) $listing_data = $_POST['listing_data'];
require_once(ABSPATH . 'wp-admin/includes/template.php');
require_once(ABSPATH . 'wp-admin/includes/media.php');
require_once(ABSPATH . 'wp-admin/includes/post.php');
$editor_settings = array(
'wpautop' => true, // use wpautop?
'media_buttons' => true, // show insert/upload button(s)
'textarea_name' => 'listing_data[post_content]', // set the textarea name to something different, square brackets [] can be used here
'textarea_rows' => 10, //get_option('default_post_edit_rows', 10), // rows="..."
'tabindex' => '',
'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".
'editor_class' => 'required', // add extra class(es) to the editor textarea
'teeny' => false, // output the minimal editor config used in Press This
'dfw' => false, // replace the default fullscreen with DFW (needs specific css)
'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
);
$listing_content = (empty( $listing_data['post_content'] ) ) ? '' : $listing_data['post_content'];
wp_enqueue_script('set-post-thumbnail');
?>
<script type="text/javascript" src="<?php echo $Directory_Core->plugin_url . 'ui-front/js/jquery.tagsinput.min.js'; ?>" ></script>
<script type="text/javascript" src="<?php echo $Directory_Core->plugin_url . 'ui-front/js/media-post.js'; ?>" ></script>
<script type="text/javascript" src="<?php echo $Directory_Core->plugin_url . 'ui-front/js/ui-front.js'; ?>" >
</script>
<?php if ( !empty( $error ) ): ?>
<br /><div class="error"><?php echo $error . '<br />'; ?></div>
<?php endif; ?>
<div class="dr_update_form">
<form class="standard-form base" method="post" action="#" enctype="multipart/form-data" id="dr_update_form" >
<input type="hidden" id="post_ID" name="listing_data[ID]" value="<?php echo ( isset( $listing_data['ID'] ) ) ? $listing_data['ID'] : ''; ?>" />
<input type="hidden" name="post_id" value="<?php echo ( isset( $listing_data['ID'] ) ) ? $listing_data['ID'] : ''; ?>" />
<?php if(post_type_supports('directory_listing','title') ): ?>
<div class="editfield">
<label for="title"><?php _e( '<strong>Agent Name:</strong>', $Directory_Core->text_domain ); ?></label>
<input class="required" type="text" id="title" name="listing_data[post_title]" value="<?php echo ( isset( $listing_data['post_title'] ) ) ? esc_attr($listing_data['post_title']) : ''; ?>" />
<p class="description"><?php _e( 'Enter agents name here.', $Directory_Core->text_domain ); ?></p>
</div>
<?php endif; ?>
<!-- Start Add Featured Image / Agent Headshot-->
<?php if(post_type_supports('directory_listing','thumbnail') && current_theme_supports('post-thumbnails') ): ?>
<div class="editfield">
<div><strong>Agent Headshot:</strong></div>
<?php if(empty($options['media_manager']) ): ?>
<?php if(has_post_thumbnail()) the_post_thumbnail('thumbnail'); ?><br />
<script type="text/javascript">js_translate.image_chosen = '<?php _e("Feature Image Chosen", $Directory_Core->text_domain); ?>';</script>
<span class="upload-button">
<?php $class = ( empty($options['field_image_req']) && !has_post_thumbnail() ) ? 'required' : ''; ?>
<input type="file" name="feature_image" size="1" id="image" class="<?php echo $class; ?>" />
<button type="button" class="button"><?php _e('Add Agent Headshot', $Directory_Core->text_domain); ?></button>
</span>
<br />
<?php else: ?>
<div id="postimagediv">
<div class="inside">
<?php
$thumbnail_id = get_post_meta( $post_ID, '_thumbnail_id', true );
echo _wp_post_thumbnail_html($thumbnail_id, $post_ID);
?>
</div>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<!-- End Add Featured Image / Agent Headshot-->
<!-- Start Taxonimy, Category and custom All Services-->
<?php
//get related hierarchical taxonomies
$taxonomies = get_object_taxonomies('directory_listing', 'objects');
$taxonomies = empty($taxonomies) ? array() : $taxonomies;
//Loop through the taxonomies that apply
foreach($taxonomies as $taxonomy):
if( ! $taxonomy->hierarchical) continue;
$tax_name = $taxonomy->name;
$labels = $taxonomy->labels;
//Get this Taxonomies terms
$selected_cats = array_values( wp_get_post_terms($listing_data['ID'], $tax_name, array('fields' => 'ids') ) );
?>
<div id="taxonomy-<?php echo $tax_name; ?>" class="dr_taxonomydiv">
<label><?php echo $labels->all_items; ?></label>
<div id="<?php echo $tax_name; ?>_all" class="dr_tax_panel">
<?php
$name = ( $tax_name == 'category' ) ? 'post_category' : 'tax_input[' . $tax_name . ']';
echo "<input type='hidden' name='{$name}[]' value='0' />"; // Allows for an empty term set to be sent. 0 is an invalid Term ID and will be ignored by empty() checks.
?>
<ul id="<?php echo $tax_name; ?>_checklist" class="list:<?php echo $labels->name; ?> categorychecklist form-no-clear">
<?php wp_terms_checklist( 0, array( 'taxonomy' => $tax_name, 'selected_cats' => $selected_cats, 'checked_ontop' => false ) ) ?>
</ul>
</div>
</div>
<?php endforeach; ?>
<!-- End Taxonimy, Category and custom All Services-->
<div class="clear"><br /></div>
<!-- Start Custom Press / Custom Fields-->
<?php if ( isset( $CustomPress_Core ) ) : ?>
<?php echo do_shortcode('[custom_fields_input style="editfield"]'); ?>
<?php endif; ?>
<?php if ( !empty( $error ) ): ?>
<br /><div class="error"><?php echo $error . '<br />'; ?></div>
<?php endif; ?>
<!-- End Custom Press / Custom Fields-->
<!-- Start Select as Draft/Pyblic-->
<div class="editfield" >
<label for="title"><?php _e( 'Status', $Directory_Core->text_domain ); ?></label>
<div id="status-box">
<select name="listing_data[post_status]" id="listing_data[post_status]">
<?php
foreach($allowed_statuses as $key => $value): ?>
<option value="<?php echo $key; ?>" <?php selected( ! empty($listing_data['post_status'] ) && $key == $listing_data['post_status'] ); ?> ><?php echo $value; ?></option>
<?php endforeach; ?>
</select>
</div>
<p class="description"><?php _e( 'Please select a status for your listing. If you select your listing status as “Published” your listing will be made live and available for the public to view. If you select your listing status as “Draft” your listing will not be visible to the public and you can come back later to finish/publish.', $Directory_Core->text_domain ); ?></p>
</div>
<!-- End Select as Draft/Pyblic-->
<div class="submit">
<?php wp_nonce_field( 'verify' ); ?>
<input type="submit" value="<?php _e( 'Save Changes', $Directory_Core->text_domain ); ?>" name="update_listing">
<input type="button" value="<?php _e( 'Cancel', $Directory_Core->text_domain ); ?>" onclick="location.href='<?php echo get_permalink($Directory_Core->my_listings_page_id); ?>'">
</div>
<?php //echo do_shortcode('[ct_validate]') ; ?>
</form>
</div>
<?php get_footer(); ?>
Since your PHP is inside your code, you do not need the action attribute in your <form> tag. take action="#" out of the form tag and you should be good to go.
Right here:
<form class="standard-form base" method="post" action="#" enctype="multipart/form-data" id="dr_update_form" >
The action attribute is to send the data to another url and is why you get the # at the end of the current url.
something like this?
<input id="myButton" type="submit" value="<?php _e( 'Save Changes', $Directory_Core->text_domain ); ?>" name="update_listing">
<script type="text/javascript">
document.getElementById("myButton").onclick = function () {
location.href = "www.yoursite.com/listings/edit-listing/";
};
</script>
Hi I am trying to make a custom wordpress widget that allows the user to enter the title and url of the video which is then shown in a bootstrap modal on the front end.
The problem I'm having is that to close the video when the modal window closes I have used this bit of javascript to remove the source attribute and replace it when the modal is opened (well thats my plan anyway). It works if you paste the url of the video into the src ="youtube video"
but I want to use a variable so the user can change the url but it just outputs the scipt () instead of the url. My plugin.php looks like this. Thnks for any help I am still learning so it is quite basic but I might be missing something silly.
<?php
/*
Plugin Name: Site Plugin for Zeezevents.co.uk
Description: Site specific code changes for Zeezevents.co.uk
*/
/* Start Adding Functions Below this Line */
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__('Zeezevents Videos', 'wpb_widget_domain'),
// Widget description
array( 'description' => __( 'play Youtube videos widget', 'wpb_widget_domain' ), )
);
}
// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$videourl = apply_filters( 'video_url', $instance['videourl'] );
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
echo $videourl;
// This is where you run the code and display the output
json_encode($videourl);
echo __( '<!-- Button trigger modal -->
<a class="btn btn-default" data-toggle="modal" data-target="#myModal" id="link">
Watch Video
</a>
<script type = "text/javascript">
jQuery("#link").click(function () {
var src = " <?php echo ( $videourl ); ?> "
jQuery("#myModal iframe").attr("src", src);
});
</script>', 'wpb_widget_domain' );
echo $args['after_widget'];
}
// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'Videos', 'wpb_widget_domain' );
}
if ( isset( $instance[ 'videourl' ] ) ){
$videourl = $instance[ 'videourl' ];
}
else { $videourl = __( 'Videos', 'wpb_widget_domain' );}
// Widget admin form
?>
<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 ); ?>" />
<label for="<?php echo $this->get_field_id( 'videourl' ); ?>"><?php _e( 'URL:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'videourl' ); ?>" name="<?php echo $this->get_field_name( 'videourl' ); ?>" type="text" value="<?php echo esc_attr( $videourl ); ?>" />
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['videourl'] = ( ! empty( $new_instance['videourl'] ) ) ? strip_tags( $new_instance['videourl'] ) : '';
return $instance;
}
} // Class wpb_widget ends here
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
/* Stop Adding Functions Below this Line */
?>
and the modal is like this
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Egypt 2 Africa 2013</h4>
</div>
<div class="modal-body">
<iframe width="560" height="315" src="<?php echo ($videourl); />" frameborder="0" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<script type="text/javascript">
jQuery('#myModal').on('hidden.bs.modal',
function () {
jQuery('#myModal iframe').removeAttr('src');
})
</script >
I figured this out!! =) I took the jquery out of the echo and it works now. As you can prob tell I am a novice but determined to learn how to program. My next step is to extract the video id from the end of the url the user has entered in order to embed the video. Can any one direct me to a good tutorial which explains the process? Thanks for any comments.
Edit: as suggested my edited code
<?php
/*
Plugin Name: Site Plugin for Zeezevents.co.uk
Description: Site specific code changes for Zeezevents.co.uk
*/
/* Start Adding Functions Below this Line */
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__('Zeezevents Videos', 'wpb_widget_domain'),
// Widget description
array( 'description' => __( 'play Youtube videos widget', 'wpb_widget_domain' ), )
);
}
// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$videourl = apply_filters( 'video_url', $instance['videourl'] );
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
// This is where you run the code and display the output
echo __( '<div class="container-fluid"><!-- Button trigger modal -->
<a class="btn" data-toggle="modal" data-target="#myModal" id="link">
<img src="http://zeezevents.co.uk/Images/egypt2africa.jpg" class="img-thumbnail"/>
</a>
</div>', 'videourl' );
?>
<script type = "text/javascript">
jQuery("#link").click(function () {
var src = "<?php echo $videourl; ?>";
jQuery("#myModal iframe").attr("src", src);
});
</script>
<?php
echo $args['after_widget'] ;
}
// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'Videos', 'wpb_widget_domain' );
}
if ( isset( $instance[ 'videourl' ] ) ){
$videourl = $instance[ 'videourl' ];
}
else { $videourl = __( 'Videos', 'wpb_widget_domain' );
}
// Widget admin form
?>
<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 ); ?>" />
<label for="<?php echo $this->get_field_id( 'videourl' ); ?>"><?php _e( 'URL:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'videourl' ); ?>" name="<?php echo $this->get_field_name( 'videourl' ); ?>" type="text" value="<?php echo esc_attr( $videourl ); ?>" />
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['videourl'] = ( ! empty( $new_instance['videourl'] ) ) ? strip_tags( $new_instance['videourl'] ) : '';
return $instance;
}
} // Class wpb_widget ends here
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
/* Stop Adding Functions Below this Line */
?>
It may not be technically correct and it's a bit messy but it works.
I have a wordpress site that uses a thumbnail grid (9 posts, 3 posts wide, responsive ) the featured image on each post creates the grid.
My code that controls the grid is
<?php
/**
* controls main grid images
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox '); ?>>
<div class = "box-ovrly">
<h2 class="box-title"><?php the_title(); ?></h2>
<div class="box-meta"><?php the_category(', '); ?></div>
</div>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 750, 560, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive" src="<?php echo $image ?>"/>
<?php endif; ?>
</article><!-- #post-## -->
It creates a grid but it shows up in the reverse order (9 to 1, instead of 1 to 9) This wouldn't be a huge deal but I have 'next' and 'previous' buttons which don't co-ordinate to the post.
Ex. on my first post the 'previous' button shows up cause it thinks its on the 9th post, etc.
the back/next menu is created with the following
function web2feel_content_nav( $nav_id ) {
global $wp_query, $post;
// Don't print empty markup on single pages if there's nowhere to navigate.
if ( is_single() ) {
$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
$next = get_adjacent_post( false, '', false );
if ( ! $next && ! $previous )
return;
}
// Don't print empty markup in archives if there's only one page.
if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
return;
$nav_class = ( is_single() ) ? 'post-navigation' : 'paging-navigation';
?>
<nav role="navigation" id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo $nav_class; ?> row">
<h1 class="screen-reader-text"><?php _e( 'Post navigation', 'web2feel' ); ?></h1>
<?php if ( is_single() ) : // navigation links for single posts ?>
<?php previous_post_link( '<div class="nav-previous col-xs-6">%link</div>', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'web2feel' ) . '</span> %title' ); ?>
<?php next_post_link( '<div class="nav-next col-xs-6">%link</div>', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'web2feel' ) . '</span>' ); ?>
<?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous col-md-6"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'web2feel' ) ); ?></div>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next col-md-6"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'web2feel' ) ); ?></div>
<?php endif; ?>
<?php endif; ?>
</nav><!-- #<?php echo esc_html( $nav_id ); ?> -->
<?php
}