Not sure how best to title this. I have a button that creates a modal popup for a job application form in WP Job Manager. I wish to duplicate this button on the same page which I have done, however my new button not only creates the modal but also loads the same application form on the page itself at the same time, this is not intended. The popup/modal is using Magnific Popup. Using Chrome console I found the issue that my new button is using a class without 'mfp-hide' at the end of it whereas the first button does have this.
By adding mfp-hide to the end of the class for that button in the Chrome console I solve the issue - the modal then loads correctly and the modal content does not load on the page. My issue is how/where to allocate a new class with mfp-hide at the end of it in my files. I am used to modifying class properties in child themes but not sure how to add this property/replace the class type. If you look here https://boolerang.co.uk/job/birch-creative-limited-permanent-full-stack-developer/ for example and right click inspect the top apply button then do the same with the lower apply button you can see the missing 'mfp-hide' on the lower. Clicking the lower button will show the problem.
In content-single-job_listing.php I added this to generate the second button:
<?php if ( candidates_can_apply() ) : ?>
<?php get_job_manager_template( 'job-application.php' ); ?>
<?php endif; ?>
job-application.php contains:
<?php if ( $apply = get_the_job_application_method() ) :
wp_enqueue_script( 'wp-job-manager-job-application' );
?>
<div class="job_application application">
<?php do_action( 'job_application_start', $apply ); ?>
<input type="button" class="application_button button" value="<?php
esc_attr_e( 'Apply for job', 'wp-job-manager' ); ?>" />
<div class="application_details">
<?php
/**
* job_manager_application_details_email or
job_manager_application_details_url hook
*/
do_action( 'job_manager_application_details_' . $apply->type,
$apply );
?>
</div>
<?php do_action( 'job_application_end', $apply ); ?>
</div>
<?php endif; ?>
The Chrome console for the original button shows:
<div class="application_details modal mfp-hide" id="apply-overlay"
style="display: block;">
<form class="job-manager-application-form job-manager-form" method="post"
enctype="multipart/form-data" action="https://boolerang.co.uk/job/birch-
creative-limited-permanent-full-stack-developer/">
I wish to change the class associated with the lower button to include the 'mfp-hide' which the Magnific Popup says is required in their documentation to have the desired effect. I don't know which file I need to alter to do this as it's not the button class which would be much easier. Any suggestions of where to edit to get this included would be much appreciated.
Related
I am making a WooCommerce website where I want to have a pop-up when someone clicks on apply now button. There I want to have two fields 1) All the class(custom field) that product has. 2) Kids that the current logged in user has.
And there would be Add to Cart button which would add the item inside the cart.
I have successfully been able to get those on my product page. I am using toolset https://toolset.com to create my product listing page and single product page.
This is my code for a single product list (Template View)
<div class="school">
<div class="top">
<div class="image">
[types field="logo"][/types]
</div>
<div class="city">
<img src="link_to_img">
[types field="city"][/types]
</div>
</div>
<div class="middle">
<p>[wpv-post-title]</p>
</div>
<div class="bottom">
[wpv-post-read-more]
<button class="applynow" href="#">Apply Now</button>
</div>
</div>
Also this is the code to render those fields 1 & 2 in the popup. I am using this in my single product page.
function iconic_output_engraving_field() {
global $product;
$classes = get_post_meta($product->get_id(),'wpcf-classes-opened-for-admission',array('show_name' => 'true'));
print_r("<label>Select Class</label>");
print_r("<select name='class'>");
print_r("<option disabled selected value> -- Select a Class -- </option>");
foreach ($classes as $class) {
print_r( "<option value='".$class[0]."'>".$class[0]."</option>");
}
print_r("</select>");
$args = array(
'id' => 1538,
);
echo render_view( $args );
}
add_action( 'woocommerce_before_add_to_cart_button', 'iconic_output_engraving_field', 10 );
How can I pass the id through the button, so that I can create a template which loads up with correct data and Add to Cart button.
https://wordpress.org/plugins/easy-login-woocommerce/
This plugin does what you're looking for, BUT it uses wp_user_login or some other function that you would need to change.
Basically, download, check the code of the plugin, your answer should be there.
Plugin is to create a popup when a button is clicked, plugin uses it to login/register, but you could edit to do whatever.
On a page template I have created a query for fetching 5 posts and on that custom template I have a load more button. Now I want to load more 3 posts on that page when I will click that button. I have seen a tutoial http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/ here where I can create this system but this tutorial shows for the index.php. But I want this system on my custom template. Right now I have this code in my custom template
<?php
/*
Template Name: Normal
*/
get_header();
?>
<?php
$loop = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => 5
));
?>
<div id="content">
<?php if($loop->have_posts()) : ?>
<?php while($loop->have_posts()) : $loop->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<div class="load_more">
<button class="load">Load More</button>
</div>
</div>
<?php wp_footer(); ?>
<?php get_footer(); ?>
Now what should I do for loading more posts everytime when I will click on the load more button
That would be impossible without AJAX or a somewhat more involved page reload. One potential workaround would be (if you only have a small number of posts) is to load all the posts and then use CSS to hide the excess ones. Then, use jQuery to add a class (such as .next-to-appear) to the first three hidden posts. Then, use jQuery when your button is clicked to make those three appear, remove the .next-to-appear class and move it to the next set of three. Not elegant but maybe effective.
Hy all! From what I read, the best way to add PHP code to a wordpress page would be via a custom template. So i took the page.php from the theme and customised it with html code without any problems. The problem is with the PHP code. No matter where I add it, it doesn't work.
My question is where do I add the custom PHP code for the form validation?
The page looks like this:
/*
Template Name: example
*/
<?php
get_header();
if ($tempera_frontpage=="Enable" && is_front_page()): get_template_part( 'frontpage' );
else :
?>
<section id="container" class="<?php echo tempera_get_layout_class(); ?>">
<div id="content" role="main">
<?php cryout_before_content_hook(); ?>
<?php get_template_part( 'content/content', 'page'); ?>
I added the HTML code here:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?> " >
.....
</form>
<?php
endif;
get_footer();
?>
According to this, you will add it before the HTML, near the top of your code.
Well basically it's PHP and should work, if you want to validate the form in the same template file, use an empty action attribute:
<form method="post" action="">
.....
</form>
And make sure not to use an WordPress reserved word on your form element name attribute, for example name.
At the top of the file you can verify and validate all the request being sent by the form as any other PHP file.
<?php
if (!empty($_POST)) {
//validate or do something here
}
get_header();
if ($tempera_frontpage=="Enable" && is_front_page()): get_template_part( 'frontpage' );
else :
?>
Hope this solution help you out.
I'm thinking you should be modifying the content-page.php template. Note the page template calls it with:
<?php get_template_part( 'content/content', 'page'); ?>
Within the content template you should see something like
<?php the_content(); ?>
If you add the form html on the next line, it will be within the same div, something like
<div class="entry-content>
</div>
This way the new content will fall within the same container as other content and be styled as such.
I need create a function like a facebook comment. for example if i will click to comment button, it will show me all comments just from same post. i tried to create with jquery, but if i click to button it shows me all comments in all posts. I need just comments where i have clicked not others.
there is show_com.js:
$(".com_but").click(function() {
$('.all_com').show();
});
there is style css:
.all_com{
display:none;
}
and there is index.php:
<button class='com_but' id="<php echo $post_id; ?>">add comment</button>
<script src="show_com.js"></script>
<div class='all_com' id="<php echo $post_id; ?>">
<input type='text'/>
</div>
$post_id is id from post(like a facebook post or twitter).
$('.all_com').show(); will show all divs with class 'all_com', wherever they are on the page. But you seem to intend that you want only to display the 'all_coms' that are children of the same parent as the button clicked. Right?
In that case you should have something like:
<script src="show_com.js"></script>
<div class="container">
<button class='com_but' id="<php echo $post_id; ?>">add comment</button>
<div class='all_com' id="<php echo $post_id; ?>">
<input type='text'/>
</div>
</div>
and your function would be something like:
$(".com_but").click(function() {
$('.all_com',$(this).parent()).show();
});
this will only show elements of class all_com that are contained within the parent of the clicked button.
Hope this helps.
If you just want to show the comments that are within the same hierarchy as the click, the general way of doing that is go from the location of the click (denoted by $(this)) up to a common parent in that section of the DOM (using .closest(selector)), then find all items of interest in that common parent (using .find()).
You don't show enough of your HTML for us to know what that common parent selector would be, but the general idea is like this:
$(".com_but").click(function() {
$(this).closest(common parent selector here).find('.all_com').show();
});
I'm trying to display the html inside of a php file i have. I'm using .load('file.php') to grab it and show it in a hidden div appended via jquery. But the problem is, it wont display anything past a php line in the file. Like this:
<div id="content">
<h1> Welcome </h1>
<form action="<?php activity_post_form_action()?> "method="post" id="whats-new-form" name="whats-new-form">
Everything below the form wont show, but the <h1> Welcome </h1> will show.
All of the html and such is valid, meaning I closed all of my tags and such. It just halts after it sees an php line. I removed the php from the form, and more showed up until the next php line.
Its definitely something i did wrong...lol, first rule to coding: EVERYTHING is your fault :)
Any ideas what i did wrong?
also, if you want a look at my jquery line :
jQuery('#window').load('file.php');
This is the content of the file.php:
<div id="content">
<div class="raberu"><h6>post update</h6></div>
<h1> Welcome </h1>
<form action="<?php bp_activity_post_form_action()?>" method="post" id="whats-new-form" name="whats-new-form">
<?php do_action( 'bp_before_activity_post_form' )?>
<div class="content-body">
<div class="top-content">
<h5>
<?php if ( bp_is_group() ) : ?>
<?php printf( __( "What's new in %s, %s?", 'buddypress' ), bp_get_group_name(), bp_get_user_firstname() ) ?>
<?php else : ?>
<?php printf( __( "So, what's up %s?", 'buddypress' ), bp_get_user_firstname() ) ?>
<?php endif; ?>
</h5>
</div>
<div class="avatar"><img src="<?php bp_loggedin_user_avatar('html=false');?>"/></div>
<div class="foremu">
<div id="whats-new-textarea">
<span class="arato">Click here to start typing</span>
<textarea name="whats-new" id="whats-new">
</textarea>
</div>
<div id="whats-new-options">
<div id="whats-new-submit">
<span class="ajax-loader"></span>
<input type="submit" name="aw-whats-new-submit" id="aw-whats-new-submit" value="<?php _e( 'Post Update', 'buddypress' )?>"/>
<input type="button" class="cancel" value="cancel"/>
</div>
</div>
</div>
And when I check my error counsel, I get This : PHP Fatal error: Call to undefined function and it says this for each line of php code that works just fine if I load that page as a template file via wordpress/php...
EDIT**
Ok, I found this, I just have to figure out how to work with it:
When you post your ajax call from javascript using jQuery, you can define the action
which will determin which function to run in your PHP component code.
*
Here's an example:
*
In Javascript we can post an action with some parameters via jQuery:
jQuery.post( ajaxurl, {
action: 'my_example_action',
'cookie': encodeURIComponent(document.cookie),
'parameter_1': 'some_value'
}, function(response) { ... } );
*
Notice the action 'my_example_action', this is the part that will hook into the wp_ajax action.
You will need to add an add_action( 'wp_ajax_my_example_action', 'the_function_to_run' ); so that
your function will run when this action is fired.
You'll be able to access any of the parameters passed using the $_POST variable.
So if anyone is having trouble implementing php functions via ajax in wordpress, buddypress etc. Maybe this will help :)
<form action="<?php activity_post_form_action()?> "method="post" id="whats-new-form" name="whats-new-form">
You have a space after your closing PHP tag. so your action might be showing up like this:
<form action="whatever.php ">
However, I don't think that is your issue.
Your jQuery syntax looks correct. (http://api.jquery.com/load/)
An easy way to double check for Javascript errors you can use Firebug for Firefox (https://addons.mozilla.org/en-US/firefox/addon/1843/)
It could have to do with running on a local server. Do you know the details of your server setup?
EDIT:
If call to undefined function is an error you are getting, it is likely that the standalone PHP file is failing to call functions that are included in the template.
When you include that PHP file on a template page it works fine. HOWEVER, if you call a PHP file via AJAX, it cannot access functions on the page you loaded from.
ajaxphpfile.php
whatever();
Example1.php
function whatever() {
echo "hello!";
}
include('ajaxphp.file.php');
Example2.php
function whatever() {
echo "hello!";
}
jQuery('#window').load('ajaxphpfile.php');
Example2.php will throw an error when loaded using .load() because it can't access the whatever() function. You are trying to call wordpress functions in a standalone php file when you have not included them. Does that make sense?