I have custom post type "members", which stores their details within custom-post-meta. I am currently working in it's custom-post-type-archive page named "archive-members.php" which lists all these members, with their details.
Now, I needed to display a meta-data related to each member into a simple js popup-box, so I used the code below and now each of these posts have a link which opens up a popup-box, when clicked.
I am able to display the post-meta-values in the popup-box but the problem is it shows the custom-field-value of the first post only. What I am expecting is that it should load individual custom-field-values of each of these posts, as they all have different values.
Here is a Simplified PHP
<?php get_header();?>
<h1><?php echo post_type_archive_title(); ?></h1>
<?php if(have_posts()) : while(have_posts()) : the_post();?>
<?php if(has_post_thumbnail()) { .......... }?>
<?php echo get_post_meta(............);?>
CLICK TO POPUP
<div id="light" class="white_content">
<div class="close-button">CLOSE</div>
<?php echo get_post_meta($post->ID, "account_number", true);?>
</div>
<div id="fade" class="black_overlay"></div>
<?php endwhile; endif; ?>
Here, what is happening is I am getting the same account number (which is the meta-value of the meta-key "account_number" of the First Post in the loop), whenever I am clicking on "CLICK TO POPUP" link of any of these posts. I guess the popup does not load content according to individual post IDs. What is the mistake in the loop ?
Note : I am using basic java-script for the popup and it works pretty well. I do not see the need of providing its css here. Anyways, if needed will provide it promptly.
It's happening because you are creating a popup for each member, but they all have the same id. That is incorrect syntax and as such JavaScript will not behave as you expect it to. (If you want the ID to recur for all for styling or other scripts, use a class).
Try this:
<?php get_header();?>
<h1><?php echo post_type_archive_title(); ?></h1>
<?php if(have_posts()) : $i = 0; while(have_posts()) : the_post();?>
<?php if(has_post_thumbnail()) { .......... }?>
<?php echo get_post_meta(............);?>
CLICK TO POPUP
<div id="light-<?php echo $i;?>" class="white_content">
<div class="close-button">CLOSE</div>
<?php echo get_post_meta($post->ID, "account_number", true);?> </div>
<div id="fade" class="black_overlay"></div>
<?php $i++; ?>
<?php endwhile; endif; ?>
This will give each popup box a unique ID and the relevant member button will be only targeting said popup
Related
I created a website in WordPress (Website: Link) using this theme.
I would like to know, how can I add a [timeline-express] widget after the image slider?
(I tried to modify idyllic-functions.php, using:
...
</div> <!-- end .main-slider -->';
echo $idyllic_category_sliders_display;
echo add_filter( 'widget_text', 'timeline-express');
...
,but the site crashes.)
Open this file: idyllic/inc/front-page/front-page-features.php and add this following line on line 34:
<?php echo do_shortcode('[timeline-express]'); ?>
Just above this line:
<div class="our-feature-box <?php echo esc_attr($feature_box_class); ?>">
So, your updated code will be also follows:
<?php echo do_shortcode('[timeline-express]'); ?>
<div class="our-feature-box <?php echo esc_attr($feature_box_class); ?>">
Note that, it's always a good practice to create a child theme, copy file/template to the child theme directory, and then modify your codes. Otherwise, you will lose your modified codes once the theme is updated.
PS: please try to follow what #tacoshy mentioned in his comment while asking questions in stackoverflow.
I have search results and am displaying them in div on left of page. When user clicks on the a particular result (which is a link), it needs to open on the right of the page, without refreshing the page or moving to a new page. How does one do this?
//get rows
$query = $db->query("SELECT * FROM posts ORDER BY id DESC LIMIT $limit");
if($query->num_rows > 0){ ?>
<div class="post_list">
<?php
while($row = $query->fetch_assoc()){
$postID = $row['id'];
?>
<div class="list_item"><h2><?php echo $row["title"] ?></h2></div>
<?php } ?>
</div>
<?php echo $pagination->createLinks(); ?>
<?php } ?>
</div>
</div>
</body>
</html>
You are going to have an onclick listeners on each <a> which will take your file/file.php?id= as input to an ajax call to fetch the contents at file/file.php?id=.
I am not sure how familiar you are with Javascript, if you know it very well then you'll undersntand what I said above, if you don't then please find documentation about AJAX some ajax documentation
You might also want to find documentation on stuff like innerHTML dom manipulation
Please advise....
I create filter taxonomy using this tutorial: https://www.bobz.co/blog/demo-filter-wordpress-posts-custom-taxonomy-term-ajax/
It is echoing all my codes but when I click to certain tag it stop showing me images only.
I am using ACF Gallery code for images in template.
<?php
$images = get_field('gallery');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
<p><?php echo $image['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
I check ajax filter post file and try to edit code but still fails to do so can you please help me out with it.
I want gallery to be display with certain posts when I click on "TAGS"
$output = '<h2>'. get_the_title() . '</h2>';
$output .= get_the_excerpt();
$result = 'success';
endwhile; else:
$output = '<h2>No posts found</h2>';
$result = 'fail';
endif;
There is not a way we can say whats happening unless seeing it.
Additionally, if you want get the ACF fields from the current page then you must pass the post id. So, it might help you by guessing but not debugging your problem.
$images = get_field('gallery', $post_id);
$post_id should be the id of that particular post you want to show.
Hope this works as guessing your problem for now.
If you give us more details we can see and inspect the problem more easily.
Thanks
I want to display a google map just under the short description part on my single product page using ACF Google Maps.
I have followed this tutorial in ACF: https://www.advancedcustomfields.com/resources/google-map/
I have tested the solution by adding the php code to single-product.php:
<?php
$location = get_field('location');
if( !empty($location) ):
?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>
It is displaying on the single product pages but not on the right place.
I would like to have the map somewhere in 'woocommerce_single_product_summary' location but I can figure out how to do that.
Is it possible to add it via a hook?
I hope anyone can help me.
You need to add your code to the woocommerce_single_product_summary action hook by using add_action(). Also, note that you need to define the priority as WooCommerce adds many functions to that same hook, (see source) and the priority determines their order. I've guessed 30 would be appropriate as that should come after the excerpt.
add_action( 'woocommerce_single_product_summary', 'so_41625126_add_map', 30 );
function so_41625126_add_map() {
if( function_exists( 'get_field' ) && $location = get_field( 'location' ) ) { ?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php }
}
I can not figure this out.
I have a Controller that loads my main.php:
<div id="container"></div>
<script>$('#container').load('index.php?path=wizard&wizard_id=<?php echo $_GET['wizard_id']; ?> #wizard');</script>
"index.php?path=wizard&wizard_id=1" loads: view/module/wizard.php'
view/module/wizard.php looks like this:
<div id="wizard" data-wizard_id="<?php echo $groups_in_set['wizard_id']; ?>" data-total_sets="<?php echo $groups_in_set['total_sets']; ?>">
<div id="set" name="<?php echo $groups_in_set['wand_set']; ?>">
<?php foreach ($groups_in_set['groups'] as $group){ ?>
<!--Step Text -->
<h1><?php echo $group['group']; ?></h1>
<!--Step Detail -->
<div data-group="<?php echo $group['group']; ?>">
<script>alert("group");</script> // No script tags pass to main.php
<?php foreach($group['wands'] as $wand){ ?>
<span id="prompt_elements_<?php echo $wand->wand_id; ?>"></span>
<script>
// Load Wand
// Script not executing on ajax load
loadPromptElements('<?php echo $wand->prompt_type; ?>', <?php echo $wand->wand_id; ?>);
</script>
<?php } // End Wand Loop ?>
</div> <!-- End Group -->
<?php } // End Group Loop ?>
</div> <!-- End Set -->
</div> <!-- End Wizard -->
As you can see from my comments everything loads correctly except the "loadPromptElements" function. The entire script tag does not display in my rendered HTML. I can not figure this one out and need some help. Thanks community!!!
Regarding jQuery .load() handling of scripts:
If .load() is called with a selector expression appended to the URL [like #wizard], however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
jQuery Reference Page
$('#container').load('index.php?...stuff... #wizard'); // <--- THAT
So you have a couple of options. Either find another way around using the #wizard selector after the URL in your .load() call or you can put it all (that one function) into a separate JS file and load it at the same time with .getScript(). You'll probably have to make it a PHP file so you can utilize the foreach() loop and whatnot.