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.
Related
I have on every page (product pages, single product page) plus and minus buttons next to the quantity to add up, next to the button a add to cart icon in AJAX.
I can't figure out 2 problems:
Issue 1: My plus and minus buttons adding up a weird sum instead of +1 and -1. When I click on + it adds 35 (guessing sums up the total of products on the page and adds that to quantity)
Issue 2: When I click on add to cart button, even if the quantity is 2,3 or 10 it only adds up 1 and not the amount that is in the quantity field.
woocommerce/global/quantity-input.php
<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
?>
<div class="quantity">
<input class="minus" type="button" value="-">
<input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input class="plus" type="button" value="+">
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.quantity').on('click', '.plus', function(e) {
$input = $(this).prev('input.qty');
var val = parseInt($input.val());
$input.val( val+1 ).change();
});
$('.quantity').on('click', '.minus',
function(e) {
$input = $(this).next('input.qty');
var val = parseInt($input.val());
if (val > 0) {
$input.val( val-1 ).change();
}
});
});
</script>
child-theme/functions.php
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
// Get the necessary classes
$class = implode( ' ', array_filter( array(
'button',
'product_type_' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
) ) );
// Adding embeding <form> tag and the quantity field
$html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
'<form class="cart">',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
$product->add_to_cart_text(),
'</form>'
);
}
return $html;
}
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();
});
I added an upload image to my custom post type taxonomy. Post type is portfolio, and taxonomy is portfolio-category.
The input field, and adding of the image (opening the wordpress uploader) works. However, since I've basically copied this from my category (regular posts), some options are not saving. I've added my form fields like this:
//Category image
if ( ! function_exists( 'mytheme_image_category_field' ) ){
function mytheme_image_category_field( $tag ) {
$t_id = $tag->term_id;
$cat_meta = get_option("category_$t_id");
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="extra1"><?php esc_attr_e('Featured Image', 'mytheme'); ?></label></th>
<?php print_r($cat_meta, true); ?>
<td>
<div class="portfolio_category_image">
<?php if(isset($cat_meta['taxonomy_portfolio_category_image']) && $cat_meta['taxonomy_portfolio_category_image']!=''): ?>
<img width="254" src="<?php echo esc_url($cat_meta['taxonomy_portfolio_category_image']);?>" />
<?php endif; ?>
</div>
<input type="text" class="portfolio_category_image_upload" name="Cat_meta[taxonomy_portfolio_category_image]" value="<?php (isset($cat_meta['taxonomy_portfolio_category_image']) && $cat_meta['taxonomy_portfolio_category_image']!='') ? esc_attr_e($cat_meta['taxonomy_portfolio_category_image']) : '' ;?>">
<input type="button" class="button portfolio_upload_image_button" name="image_upload" value=" <?php esc_attr_e('Upload Image', 'mytheme');?>">
<input type="button" class="button portfolio_remove_image_button" name="remove_image_upload" value=" <?php esc_attr_e('Remove Image', 'mytheme');?>">
</td>
</tr>
<?php
}
}
add_action ( 'portfolio-category_edit_form_fields', 'mytheme_image_category_field');
if ( ! function_exists( 'mytheme_extra_add_image_upload_field' ) ){
function mytheme_extra_add_image_upload_field( $tag ) {
$t_id = (is_object($tag)) ? $tag->term_id:'';
$cat_meta = get_option("category_$t_id");
?>
<div class="form-field">
<label for="extra1"><?php esc_attr_e('Featured Image', 'mytheme'); ?></label>
<input type="text" class="portfolio_category_image_upload" name="Cat_meta[taxonomy_portfolio_category_image]" value="<?php echo (isset($cat_meta['taxonomy_portfolio_category_image']) && $cat_meta['taxonomy_portfolio_category_image'] != '') ? esc_attr($cat_meta['taxonomy_portfolio_category_image']) : '' ;?>">
<input type="button" class="button portfolio_upload_image_button" name="Cat_meta[taxonomy_portfolio_category_image]" value=" <?php esc_attr_e('Upload Image', 'mytheme');?>">
<input type="button" class="button portfolio_remove_image_button" name="remove_image_upload" value=" <?php esc_attr_e('Remove Image', 'mytheme');?>">
</div>
<?php
}
}
add_action ( 'portfolio-category_add_form_fields', 'mytheme_extra_add_image_upload_field');
The clear problem is that in custom post types I'm not writing anything in wp_options table so $cat_meta = get_option("category_$t_id"); won't get anything.
What I get when I echo $t_id is my term id. So I know I need to use terms in some way to save my options. But here is where I'm stuck. get_terms('portfolio-category') will correctly output every term I have, but I don't have my uploaded image in there.
The javascript is (if anyone needs to test it):
$(document).on('click', '.portfolio_upload_image_button', portfolio_upload_image_button);
function portfolio_upload_image_button(e) {
e.preventDefault();
var $input_field = $(this).prev();
var $image = $('.portfolio_category_image');
var custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Add Image',
button: {
text: 'Add Image'
},
multiple: false
});
custom_uploader.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$input_field.val(attachment.url);
$image.html('<img width="254" src="'+attachment.url+'" />');
});
custom_uploader.open();
}
$(document).on('click', '.portfolio_remove_image_button', portfolio_remove_image_button);
function portfolio_remove_image_button(e){
e.preventDefault();
var $input_field = $('.portfolio_category_image_upload');
var $image = $('.portfolio_category_image');
$input_field.val('');
$image.html('');
}
This works for my regular posts, but doesn't for my CPT.
EDIT
Should I use wp_insert_term? To update my taxonomy terms?
Ok, so I followed this and this post and I figured it out.
class Category_Taxonomy_Image{
function __construct(){
add_action( 'portfolio-category_add_form_fields', array( $this, 'add_tax_image_field' ) );
add_action( 'portfolio-category_edit_form_fields', array( $this, 'edit_tax_image_field' ) );
// saving
add_action( 'edited_portfolio-category', array( $this, 'save_tax_meta' ), 10, 2 );
add_action( 'create_portfolio-category', array( $this, 'save_tax_meta' ), 10, 2 );
}
public function add_tax_image_field(){
?>
<div class="form-field">
<label for="term_meta[tax_image]"><?php esc_html_e('Category Featured Image', 'mytheme'); ?></label>
<input type="text" class="portfolio_category_image_upload" name="term_meta[tax_image]" id="term_meta[tax_image]" value="" />
<input type="button" class="button portfolio_upload_image_button" name="image_upload" value=" <?php esc_attr_e('Upload Image', 'mytheme');?>">
<input type="button" class="button portfolio_remove_image_button" name="remove_image_upload" value=" <?php esc_attr_e('Remove Image', 'mytheme');?>">
<p class="description"><?php esc_html_e('Add URL to image for the category image', 'mytheme'); ?></p>
</div><!-- /.form-field -->
<?php
}
public function edit_tax_image_field( $term ){
$term_id = $term->term_id;
$term_meta = get_option( "taxonomy_$term_id" );
$image = $term_meta['tax_image'] ? $term_meta['tax_image'] : '';
?>
<tr class="form-field">
<th scope="row">
<label for="term_meta[tax_image]"><?php esc_html_e('Category Featured Image', 'mytheme'); ?></label>
<td>
<div class="portfolio_category_image">
<?php if(isset($image) && $image!=''): ?>
<img width="254" src="<?php echo esc_url($image);?>" />
<?php endif; ?>
</div>
<input type="text" class="portfolio_category_image_upload" name="term_meta[tax_image]" id="term_meta[tax_image]" value="<?php echo esc_url( $image ); ?>" />
<input type="button" class="button portfolio_upload_image_button" name="image_upload" value=" <?php esc_attr_e('Upload Image', 'mytheme');?>">
<input type="button" class="button portfolio_remove_image_button" name="remove_image_upload" value=" <?php esc_attr_e('Remove Image', 'mytheme');?>">
<p class="description"><?php esc_html_e('Add URL to image for the category image', 'mytheme'); ?></p>
</td>
</th>
</tr>
<?php
}
public function save_tax_meta( $term_id ){
if ( isset( $_POST['term_meta'] ) ) {
$t_id = $term_id;
$term_meta = array();
$term_meta['tax_image'] = isset ( $_POST['term_meta']['tax_image'] ) ? esc_url( $_POST['term_meta']['tax_image'] ) : '';
update_option( "taxonomy_$t_id", $term_meta );
}
}
}
$cat_tax_image = new Category_Taxonomy_Image();
The key was saving them to the wp_options table and adding to correct hook. Mainly:
add_action( '{custom-taxonomy-name}_add_form_fields', 'add_new_custom_fields');
add_action( '{custom-taxonomy-name}_edit_form_fields', 'add_edit_custom_fields');
And
add_action( 'create_{custom-taxonomy-name}', 'save_custom_taxonomy_meta');
add_action( 'edited_{custom-taxonomy-name}', 'save_custom_taxonomy_meta');
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>
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
}