So I have this widget that I coded base on wordpress standard. I declared a sort of variables to be use both backend and frontend purposes.
public function widget( $args, $instance ) {
global $post;
$sid = $instance['id'];
$name = $instance['name'];
$args = array( 'post_type' => 'content_manager','post_id' => $sid);
$query = new WP_Query( $args );
echo $args['before_widget'];
echo $args['after_widget'];
}
public function form( $instance ) {
global $post;
$args = array( 'post_type' => 'content_manager'); ....
$loop = new WP_Query( $args );
$title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
$sid = ! empty( $instance['id'] ) ? $instance['id'] : esc_html__( 'New ID', 'text_domain' );
$name = ! empty( $instance['name'] ) ? $instance['name'] : esc_html__( 'Empty Content', 'text_domain' );
I am using the variables to get the values in javascript
<script>
function defineValue(sel)
{
var title = sel.options[sel.selectedIndex].text;
var id = sel.options[sel.selectedIndex].value;
document.getElementById("<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>").value = title;
document.getElementById("<?php echo esc_attr( $this->get_field_name( 'id' ) ); ?>").value = id;
document.getElementById("<?php echo esc_attr( $this->get_field_name( 'name' ) ); ?>").value = title;
}
</script>
When I load the widget, the inputs and other options displays the names and IDs but in Javascript returns empty unless If I save it first.
I tried to test it
<?php echo esc_attr( $this->get_field_name( 'id' ) ); ?>
and this is the result
widget-content-loader-__i__-id
Why is that happen?
Notes:
First Inputs and other elements have ids and other attributes from that variables when I check in the DOM
<input class="widefat" name="widget-content-loader[21][title]" id="widget-content-loader-21-title" value="New title" type="text">
From this this script:
<input
class="widefat"
name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>"
type="text"
id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
value="<?php echo esc_attr( $title ); ?>">
Thanks in advance
Javascript cant get value unless it is loaded into DOM,
Make sure that the elements are loaded before calling definevalue()
Related
I really dont see were the problem is, when tring to use my media button on wordpress. here is my source code.
php:
<?php
/**
* #package OverviewPlugin
*/
namespace Inc\Base;
use Inc\Api\SettingsApi;
use Inc\Base\BaseController;
use Inc\Api\Callbacks\AdminCallbacks;
use Inc\Api\Callbacks\WorkerCallbacks;
/**
*
*/
class WorkerController extends BaseController
{
public $callbacks;
public $settings;
public function register()
{
if ( ! $this->activated( 'worker_manager' ) ) return;
$this->settings = new SettingsApi();
$this->callbacks = new WorkerCallbacks();
add_action( 'init', array( $this, 'worker_cpt' ) );
add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) );
add_action( 'save_post', array( $this, 'save_meta_box' ) );
add_action( 'manage_worker_posts_columns', array( $this, 'set_custom_columns' ) );
add_action( 'manage_worker_posts_custom_column', array( $this, 'set_custom_columns_data' ), 10, 2 );
add_filter( 'manage_edit-worker_sortable_columns', array( $this, 'set_custom_columns_sortable' ) );
$this->setShortcodePage();
add_shortcode( 'worker-display', array( $this, 'worker_display' ) );
add_action('admin_enqueue_scripts', array($this, 'my_admin_scripts'));
add_action('admin_enqueue_scripts', array($this,'my_admin_scripts'));
add_action('admin_enqueue_styles',array($this,'my_admin_styles'));
}
function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/overview-plugin/assets/worker.min.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
public function worker_display()
{
ob_start();
echo "<link rel=\"stylesheet\" href=\"$this->plugin_url/assets/display.min.css\" type=\"text/css\" media=\"all\" />";
require_once( "$this->plugin_path/templates/display.php" );
echo "<script src=\"$this->plugin_url/assets/display.min.js\"></script>";
return ob_get_clean();
}
public function render_features_box($post)
{
wp_nonce_field( 'overview_worker', 'overview_worker_nonce' );
$data = get_post_meta( $post->ID, '_overview_worker_key', true );
$name = isset($data['name']) ? $data['name'] : '';
$description = isset($data['description']) ? $data['description'] : '';
$image = isset($data['image']) ? $data['image'] : '';
$position = isset($data['position']) ? $data['position'] : '';
$github = isset($data['github']) ? $data['github'] : '';
$linkedin = isset($data['linkedin']) ? $data['linkedin'] : '';
$xing = isset($data['xing']) ? $data['xing'] : '';
$facebook = isset($data['facebook']) ? $data['facebook'] : '';
$approved = isset($data['approved']) ? $data['approved'] : false;
$featured = isset($data['featured']) ? $data['featured'] : false;
?>
<p>
<label class="meta-label" for="overview_worker_name">Name</label>
<input type="text" id="overview_worker_name" name="overview_worker_name" class="widefat" value="<?php echo esc_attr( $name ); ?>">
</p>
<p>
<label class="meta-label" for="overview_worker_description">Short Description</label>
<input type="text" id="overview_worker_description" name="overview_worker_description" class="widefat" value="<?php echo esc_attr( $description ); ?>">
</p>
<p>
<label class="meta-label" for="overview_worker_image">Image</label>
<input id="upload_image" type="text" size="36" name="upload_image" value="<?php echo esc_attr( $image ); ?>" />
<input id="upload_image_button" type="button" value="Upload Image" />
</p>
js:
jQuery(document).ready( function( $ ) {
$('#upload_image_button').click(function() {
formfield = $('#upload_image').val();
tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
window.send_to_editor = function(html) {
imgurl = $(html).attr('src');
$('#upload_image').val(imgurl);
tb_remove();
}
return false;
});
});
i am sorry if it's a lot of code but i really don't know where i went wrong. my idea is to have a button that does the same function as the upload media button. i have seen lots of refrences and still couldn't get the code running.
When i click the upload button an i open my chrome inspector i receive the following error
worker.min.js:6 Uncaught ReferenceError: formfield is not defined
at HTMLInputElement.<anonymous> (worker.min.js:6)
at HTMLInputElement.dispatch (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-upload,moxiejs,plupload&ver=5.3.2:3)
at HTMLInputElement.r.handle (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-upload,moxiejs,plupload&ver=5.3.2:3)
Either you can do this
formfield = $('#upload_image').val();
becasue $image is a php variable you can not get its value in jquery like this directly.
this is Nadeem I am a beginner on PHP and WordPress, I stuck on one point during custom plugin development, my problem is, I am unable to save Featured image and custom taxonomy tag and category from the frontend. In the meantime, I already Search on Google, StackOverflow, etc. too much for this error solution about this but unfortunately, this does not work and I am stuck at this point from the last 2 weeks.
This is my Plugin PHP code
/**
* The Template for displaying car archives, including the main car-data page which is a post type archive.
*
* Override this template by copying it to yourtheme/car_data/archive-car-data.php
*
* #author Shaikh Nadeem
* #package Car_Data
* #subpackage Car_Data/Templates
* #version 1.0.0
*/
class Car_Frontend_Form
{
function __construct()
{
add_shortcode( 'submit_car', array($this, 'submit_car') );
add_action( 'wp_enqueue_scripts', array( $this, 'my_enqueue' ) );
add_action( 'save_post_submit_car_data_post', array( $this, 'submit_car_data_post' ) );
add_action( 'wp_ajax_nopriv_submit_car_data_post', array( $this, 'submit_car_data_post' ) );
add_action( 'wp_ajax_submit_car_data_post', array( $this, 'submit_car_data_post' ) );
add_action( 'init', array( $this, 'submit_car_data_post' ) );
}
public function submit_car() {
echo '<div id="submit_car_form">';
echo '<form id="cd_car" name="cd_car" class="cd_car" method="post" action="'.$_SERVER['PHP_SELF'].'" enctype="multipart/form-data" >';
wp_nonce_field( "car-frontend-post" );
echo '<p><label for="title">Title</label><br />';
echo '<input type="text" id="title" value="" size="60" name="title" />';
echo '</p>';
echo '<p>';
echo '<label for="content">Post Content</label><br />';
echo '<textarea id="content" name="content" cols="40" rows="4"></textarea>';
echo '</p>';
echo '<p><label for="feature">Feature:</label><br />';
wp_dropdown_categories( "show_option_none=Feature&tab_index=3&taxonomy=feature&name=feature&id=feature&class=feature" ) .'</p>';
echo '<p><label for="make">Make:</label><br />';
wp_dropdown_categories( "show_option_none=Make&tab_index=4&taxonomy=make&name=make&id=make&class=make" ) .'</p>';
echo '<p><label for="post_tags">Tags</label><br />';
echo ' <input type="text" value="" size="60" name="post_tags" id="post_tags" /></p>';
echo '<p><label for="post_tags">Car Image</label><br />';
echo '<input type="file" name="file" id="file"></p>';
echo '<p align="left"><input type="submit" tabindex="6" id="submit_car" name="submit_car" /></p>';
echo '</form>';
echo '</div>';
return;
}
public function submit_car_data_post() {
if ( isset($_POST['title']) ) {
echo '<script>console.log("file error: '.$fileerror.'<br>");</script>';
$title = sanitize_text_field( $_POST['title'] );
$content = sanitize_text_field( $_POST['content'] );
$author_id = sanitize_text_field( $_POST['author_id'] );
$tags_input = sanitize_text_field( array($_POST['post_tags']) );
$feature = sanitize_text_field( array($_POST['feature']) );
$make = sanitize_text_field( array($_POST['make']) );
// $image = $_POST['file'];
$args = array(
'post_title' => $title,
'post_content' => $content,
'tags_input' => $_POST['post_tags'],
'author' => $author_id,
'post_status' => 'publish',
'post_type' => 'car-data',
'tax_input' => array(
$feature,
$make
),
// 'post_category' => array(
// 'feature' => array($_POST['feature']),
// 'make' => array($_POST['make'])
// )
);
// Check that the nonce was set and valid
if( !wp_verify_nonce($_POST['_wpnonce'], 'car-frontend-post') ) {
return;
}
if( is_wp_error( $posts ) ){
echo json_encode( $posts->get_error_messages() );
}
// save frontend Post
$posts = wp_insert_post( $args );
// save frontend Texonomy
wp_set_object_terms( $posts, $feature, 'feature' );
wp_set_object_terms( $posts, $make, 'make' );
// save Atachment on featured image for the current custom post
$uploaddir = wp_upload_dir();
$file = $_FILES[$image];
$uploadfile = $uploaddir['path'] . '/' . basename( $file );
move_uploaded_file( $_FILES['file']['tmp_name'], $uploaddir['path'] . '/' . $filename );
$filename = basename( $uploadfile );
$wp_filetype = wp_check_filetype(basename($filename), null );
$attachment = array(
'guid' => $wp_upload_dir['url'] . '/' . basename( $filename ),
'post_mime_type' => $wp_filetype['type'],
'post_title' => preg_replace('/\.[^.]+$/', '', $filename),
'post_content' => preg_replace('/\.[^.]+$/', '', $filename),
'post_excerpt' => preg_replace('/\.[^.]+$/', '', $filename),
'post_status' => 'inherit',
'post_type' => 'attachment',
'menu_order' => $_i + 1000,
);
$attach_id = wp_insert_attachment( $attachment, $uploadfile );
require_once( ABSPATH . 'wp-admin/includes/image.php' );
$attach_data = wp_generate_attachment_metadata($attach_id, $filename );
wp_update_attachment_metadata( $attach_id, $attach_data );
wp_die();
}
}
public function my_enqueue() {
wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
}
and i use javascript for the ajax alert message when form is submit
jQuery(document).ready(function($) {
$('.cd_car').on('submit', function(event) {
event.preventDefault();
var message = document.getElementById("file").value;
var empt = document.forms["cd_car"]["title"].value;
if (empt == "")
{
alert("Please input a Value");
return false;
}
else
{
$.ajax({
type: 'post',
// url : ajax_object.ajaxurl,
data : $('.cd_car').serialize(),
success : function(data){
alert(message);
console.log(data);
},
error : function(data){
alert(message);
alert('fail');
}
});
}
});
});
Also i have there one error on this line code if ( isset($_POST['title']) ) unable to use submit key on isset post only title is working here.
I believe your issue is due to sanitize_text_field( array( .. )). sanitize_text_field only accepts strings as the parameter, so I assume by sending in an Array it's actually always seeing the string "Array" - not your POST values.
To sanitize the array, could do something like:
$tags_input = array();
if ( isset($_POST['post_tags']) && !empty($_POST['post_tags']) ) {
foreach ($_POST['post_tags'] as $val)
$tags_input[] = sanitize_text_field( $val );
}
// [ .. repeat for feature & make .. ]
Or, if they're single values only (not arrays), simply remove the array wrapper.
I want an Ajax filter for my WordPress catagories.
The script I show here is targeting a select dropdown, but I want to have some buttons instead.
My Javascript knowledge isn't 100%, so I don't know how I can change some to be able to use buttons instead of the dropdown.
Can you help me out here?
I tried to change the html code to input:radio, and then change the javascript to onclick, but it doesn't work. The filter keeps showing all.
The only way it works is with the dropdown.
The script I used was found on
http://dominykasgel.com/ajax-posts-filter/
The Javascript I used.
jQuery( ".js-category, .js-date" ).on( "change", function() {
var category = $( '.js-category' ).val();
var date = $( '.js-date' ).val()
data = {
'action': 'filterposts',
'category': category,
'date': date
};
$.ajax({
url : ajaxurl,
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
$('.filtered-posts').html( 'Laden...' );
$('.js-category').attr( 'disabled', 'disabled' );
$('.js-date').attr( 'disabled', 'disabled' );
},
success : function( data ) {
if ( data ) {
$('.filtered-posts').html( data.projecten );
$('.js-category').removeAttr('disabled');
$('.js-date').removeAttr('disabled');
} else {
$('.filtered-posts').html( 'Helaas, er zijn geen projecten gevonden.' );
}
}
});
});
The php code I used for the functions.php
function ajax_filterposts_handler() {
$category = esc_attr( $_POST['category'] );
$date = esc_attr( $_POST['date'] );
$args = array(
'post_type' => 'projecten',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC'
);
if ( $category != 'all' )
$args['cat'] = $category;
if ( $date == 'new' ) {
$args['order'] = 'DESC';
} else {
$args['order'] = 'ASC';
}
$posts = 'Helaas, er zijn geen projecten gevonden.';
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
ob_start();
while ( $the_query->have_posts() ) : $the_query->the_post();
get_template_part( 'includes/content-post' );
endwhile;
$posts = ob_get_clean();
endif;
$return = array(
'projecten' => $posts
);
wp_send_json($return);
}
add_action( 'wp_ajax_filterposts', 'ajax_filterposts_handler' );
add_action( 'wp_ajax_nopriv_filterposts', 'ajax_filterposts_handler' );
The code for in the archive.php file:
<div class="filter-wrap">
<div class="category">
<!-- <div class="field-title">Category</div> -->
<?php $get_categories = get_categories(array('hide_empty' => 0)); ?>
<select class="js-category">
<option value="all">alles</option>
<?php
if ( $get_categories ) :
foreach ( $get_categories as $cat ) :
?>
<option value="<?php echo $cat->term_id; ?>">
<?php echo $cat->name; ?>
</option>
<?php endforeach;
endif;
?>
</select>
</div>
</div>
<div class="filtered-posts">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( 'includes/content-post' );
endwhile;
endif;
?>
</div>
The code for my content-post.php:
<article id="post-id-<?php the_id(); ?>" <?php post_class('clearfiks archive-projecten'); ?>>
<a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3>
</article>
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
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.