I am using simple share buttons. I have two posts on the page and other posts are getting via button click by ajax. On the ajax loaded content, simple share buttons are not displayed. I am getting them via shortcode. What is wrong?
// Function.php
function true_load_posts(){
$args = unserialize(stripslashes($_POST['query']));
$args['paged'] = $_POST['page'] + 1; // one more post
$args['post_status'] = 'publish';
$q = new WP_Query($args); //Query
if( $q->have_posts() ):
while($q->have_posts()): $q->the_post();
?>
<article class="article" id="post-<?php the_ID(); ?>" <?php post_class(); ?>> // Article
<?php the_category( $post_id ); ?>
<div class="news-article">
<h2><?php the_title(); ?></h2> // headline post
<p class="author">By <span><?php echo get_the_author(); ?></span></p>
<div class="news-article__image"> // image article
<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="image">
</div>
<div class="inner-block">
<p class="excerpt"><?php $exs = get_the_excerpt(); print $exs;?></p>
read more // link
<div class="bottom-block flex align-center"> // some block
<p class="post-date"><?php the_time('F j, Y g:i a'); ?>// post date</p>
<p class="share-links"><?php echo do_shortcode('[do_widget id=ssba_widget-2]'); ?></p>// my sortcode
</div>
</div>
</div>
</article>
<?php
endwhile;
endif;
wp_reset_postdata();
die();
}
add_action('wp_ajax_loadmore', 'true_load_posts'); // hooks
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts'); // hooks
// Script
$('#true_loadmore').click(function(){ //Button click
$(this).text('Loading...'); // button text
var data = {
'action': 'loadmore',
'query': true_posts,
'page' : current_page
};
$.ajax({ // ajax call
url:ajaxurl,
data:data,
type:'POST',
success:function(data){
if( data ) {
$('#true_loadmore').text('Load more').before(data);
current_page++;
if (current_page == max_pages) $("#true_loadmore").remove();
} else {
$('#true_loadmore').remove();
}
}
})
});
Maybe i should use some code for using shortcodes in ajax? I tried to use wp_localize_script but it doesnt work.
Related
I am looking for a approach to add multiple images option under the Feature image section in wordPress custom post type. I will integrate/implement these images on single.php file where I want to show the slider images. I want to do it using Codex / coding approach, Please NO PLUGIN. Any Idea/help will be appreciated.
EDIT
I have found this code and it has to be pasted in function.php or plugin.php. I have create a new file plug-slider.php and add the below code there & its not working, but the issue is that I have to call each image separately instead like create an array and call the array, also if there is no second/third image set for other post then the slider block is showing empty.. I don't know why, may be I am missing something... can someone please review.
Code Reference: Stack overflow question
//init the meta box
add_action( 'after_setup_theme', 'custom_postimage_setup' );
function custom_postimage_setup(){
add_action( 'add_meta_boxes', 'custom_postimage_meta_box' );
add_action( 'save_post', 'custom_postimage_meta_box_save' );
}
function custom_postimage_meta_box(){
//on which post types should the box appear?
$post_types = array('portfolios','page');
foreach($post_types as $pt){
add_meta_box('custom_postimage_meta_box',__( 'More Featured Images', 'yourdomain'),'custom_postimage_meta_box_func',$pt,'side','low');
}
}
function custom_postimage_meta_box_func($post){
//an array with all the images (ba meta key). The same array has to be in custom_postimage_meta_box_save($post_id) as well.
$meta_keys = array('second_featured_image','third_featured_image');
foreach($meta_keys as $meta_key){
$image_meta_val=get_post_meta( $post->ID, $meta_key, true);
?>
<div class="custom_postimage_wrapper" id="<?php echo $meta_key; ?>_wrapper" style="margin-bottom:20px;">
<img src="<?php echo ($image_meta_val!=''?wp_get_attachment_image_src( $image_meta_val)[0]:''); ?>" style="width:100%;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" alt="">
<a class="addimage button" onclick="custom_postimage_add_image('<?php echo $meta_key; ?>');"><?php _e('add image','yourdomain'); ?></a><br>
<a class="removeimage" style="color:#a00;cursor:pointer;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" onclick="custom_postimage_remove_image('<?php echo $meta_key; ?>');"><?php _e('remove image','yourdomain'); ?></a>
<input type="hidden" name="<?php echo $meta_key; ?>" id="<?php echo $meta_key; ?>" value="<?php echo $image_meta_val; ?>" />
</div>
<?php } ?>
<script>
function custom_postimage_add_image(key){
var $wrapper = jQuery('#'+key+'_wrapper');
custom_postimage_uploader = wp.media.frames.file_frame = wp.media({
title: '<?php _e('select image','yourdomain'); ?>',
button: {
text: '<?php _e('select image','yourdomain'); ?>'
},
multiple: false
});
custom_postimage_uploader.on('select', function() {
var attachment = custom_postimage_uploader.state().get('selection').first().toJSON();
var img_url = attachment['url'];
var img_id = attachment['id'];
$wrapper.find('input#'+key).val(img_id);
$wrapper.find('img').attr('src',img_url);
$wrapper.find('img').show();
$wrapper.find('a.removeimage').show();
});
custom_postimage_uploader.on('open', function(){
var selection = custom_postimage_uploader.state().get('selection');
var selected = $wrapper.find('input#'+key).val();
if(selected){
selection.add(wp.media.attachment(selected));
}
});
custom_postimage_uploader.open();
return false;
}
function custom_postimage_remove_image(key){
var $wrapper = jQuery('#'+key+'_wrapper');
$wrapper.find('input#'+key).val('');
$wrapper.find('img').hide();
$wrapper.find('a.removeimage').hide();
return false;
}
</script>
<?php
wp_nonce_field( 'custom_postimage_meta_box', 'custom_postimage_meta_box_nonce' );
}
function custom_postimage_meta_box_save($post_id){
if ( ! current_user_can( 'edit_posts', $post_id ) ){ return 'not permitted'; }
if (isset( $_POST['custom_postimage_meta_box_nonce'] ) && wp_verify_nonce($_POST['custom_postimage_meta_box_nonce'],'custom_postimage_meta_box' )){
//same array as in custom_postimage_meta_box_func($post)
$meta_keys = array('second_featured_image','third_featured_image');
foreach($meta_keys as $meta_key){
if(isset($_POST[$meta_key]) && intval($_POST[$meta_key])!=''){
update_post_meta( $post_id, $meta_key, intval($_POST[$meta_key]));
}else{
update_post_meta( $post_id, $meta_key, '');
}
}
}
}
My Callback code in single.php
<div class="project-carousel owl-carousel js-project-carousel">
<?php
while(have_posts()) {
the_post(); ?>
<!-- <div class="project-detail-item">
<?php //the_post_thumbnail('portfolio-slider') ?>
</div> -->
<?php
$slider_img=wp_get_attachment_image(get_post_meta(get_the_ID(),'second_featured_image', true),'full');
if($slider_img !='')
{?>
<div class="project-detail-item">
<?php
echo wp_get_attachment_image(get_post_meta(get_the_ID(),'second_featured_image', true),'full');
?>
</div>
<?php }
else
{
the_post_thumbnail('portfolio-slider');
}
?>
</div>
again the if/else block works for the empty check but only for single instance, like I have to check for each image... or I messed up?
Please do the below change and then try...
in your plugin file change this line.
$meta_keys = array('second_featured_image','third_featured_image');
To
$meta_keys = array('second_featured_image','third_featured_image','fourth_featured_image','fifth_featured_image');
change your call back single.php file code to something like below. Loop through each file and check for empty.
I have modified the code to accept up to 5/6 images so you can use it in the slider.
<div class="project-carousel owl-carousel js-project-carousel">
<?php
while(have_posts()) {
the_post();
$slider_img=the_post_thumbnail('portfolio-slider');
$slider_img1=wp_get_attachment_image(get_post_meta(get_the_ID(),'second_featured_image', true),'full');
$slider_img2=wp_get_attachment_image(get_post_meta(get_the_ID(),'third_featured_image', true),'full');
$slider_img3=wp_get_attachment_image(get_post_meta(get_the_ID(),'fourth_featured_image', true),'full');
$slider_img4=wp_get_attachment_image(get_post_meta(get_the_ID(),'fifth_featured_image', true),'full');
$slider_img5=wp_get_attachment_image(get_post_meta(get_the_ID(),'six_featured_image', true),'full');
$slider_img6=wp_get_attachment_image(get_post_meta(get_the_ID(),'svn_featured_image', true),'full');
if($slider_img !='')
{?>
<div class="project-detail-item">
<?php echo $slider_img;?>
</div>
<?php }?>
<?php if($slider_img1 !=''){ ?>
<div class="project-detail-item">
<?php echo $slider_img1; ?>
</div>
<?php }?>
<?php if($slider_img2 !=''){ ?>
<div class="project-detail-item">
<?php echo $slider_img2; ?>
</div>
<?php }?>
<!--image-->
<?php if($slider_img3 !=''){ ?>
<div class="project-detail-item">
<?php echo $slider_img3; ?>
</div>
<?php }?>
<!--image end-->
<!--image-->
<?php if($slider_img4 !=''){ ?>
<div class="project-detail-item">
<?php echo $slider_img4; ?>
</div>
<?php }?>
<!--image end-->
<!--image-->
<?php if($slider_img5 !=''){ ?>
<div class="project-detail-item">
<?php echo $slider_img5; ?>
</div>
<?php }?>
<!--image end-->
<!--image-->
<?php if($slider_img6 !=''){ ?>
<div class="project-detail-item">
<?php echo $slider_img6; ?>
</div>
<?php }?>
<!--image end-->
</div>
I’m using this code to display wordpress posts in divs with specific classes. Is there a way to get the posts in a random order and still do this? I’ve searched and can’t find anything that has helped me figure this out. Thanks.
<?php $count = 0; if (have_posts()) : while(have_posts()) : the_post() ?>
<div class="grid4 noall
<?php if( $count%3 == 0 ) { echo 'first'; }; if( $count%3 == 1 ) { echo 'mid'; }; if( $count%3 == 2 ) { echo 'last'; }; $count++; ?>">
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<a class="plink" href="<?php the_permalink() ?>" rel="bookmark" title=" <?php the_title_attribute(); ?>">
<section class="portfolio-wrapper">
<?php the_post_thumbnail( 'thumb-800' ); ?>
<div class="portfolio-title">
<h3 class="portfolio-header"><?php the_title(); ?></h3>
<?php if( get_field('portfolio_subtitle') ): ?>
<h5 class="portfolio-category">
<?php the_field('portfolio_subtitle'); ?>
</h5>
<?php endif; ?>
</div>
</section>
</a>
</article>
</div>
<?php endwhile; ?>
Is this in the main WordPress loop, or are you running a custom query with WP_Query? If the latter, you could just simply pass the 'orderby' => 'rand' parameter in your arguments array. If it's in the main WordPress loop, the answer's slightly different, but similar. Essentially, you'd want to apply the set_query_var function to the main loop, conditionally depending on which page / view you're working with.
https://codex.wordpress.org/Function_Reference/set_query_var
for instance,
if(is_post_type_archive('products')){
set_query_var('orderby','rand');
}
I have purchased a WP theme from Themeforest by Codestag called Shift and its a pretty easy to use and clean UI. It is mostly for blog style posts and they have created pre-made blog posts styles...
For example, an "Audio" post is text and the enbedded audio file. "Video" is the video link and text, "Photo" is obviously the photo and text.
My problem is that these are not customizable and the type of blog posts I create are either audio or video and include a photo of the artists or album art. What code do I need to add to allow this pre-made post to include a photo? (CODE BELOW)
The second question I have is how can I change the order from Audio file, Title, Text to Title , photo text and audio?
This is the code for the pre-made blog style: "Audio"
<div class="hentry-inner">
<div class="entry-wrapper grids">
<?php get_template_part('content', 'meta'); ?>
<div class="entry-content grid-10 clearfix">
<?php
$embed = get_post_meta(get_the_ID(), '_stag_audio_embed', true);
if(!empty($embed)){
echo do_shortcode(htmlspecialchars_decode($embed));
}else{
stag_audio_player(get_the_ID());
}
?>
<?php if( is_single() ) { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } else { ?>
<h2 class="entry-title"> <?php the_title(); ?></h2>
<?php } ?>
<?php
if(!is_singular()){
if(get_the_excerpt() != '') echo "<p>".strip_shortcodes(get_the_excerpt())."</p>";
}else{
the_content(__('Continue Reading', 'stag'));
wp_link_pages(array('before' => '<p><strong>'.__('Pages:', 'stag').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number'));
}
?>
</div>
<span class="bottom-accent"></span>
</div>
</div>
Much thanks in advance for the help!
-Peter
Here I have added the_post_thumbnail (see Codex) to show a photo above the content:
<div class="hentry-inner">
<div class="entry-wrapper grids">
<?php get_template_part('content', 'meta'); ?>
<div class="entry-content grid-10 clearfix">
<?php
$embed = get_post_meta(get_the_ID(), '_stag_audio_embed', true);
if(!empty($embed)){
echo do_shortcode(htmlspecialchars_decode($embed));
}else{
stag_audio_player(get_the_ID());
}
?>
<?php if( is_single() ) { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } else { ?>
<h2 class="entry-title"> <?php the_title(); ?></h2>
<?php } ?>
<?php
if(!is_singular()){
if(get_the_excerpt() != '') echo "<p>".strip_shortcodes(get_the_excerpt())."</p>";
}else{
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
the_content(__('Continue Reading', 'stag'));
wp_link_pages(array('before' => '<p><strong>'.__('Pages:', 'stag').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number'));
}
?>
</div>
<span class="bottom-accent"></span>
</div>
</div>
This template shows title, featured image, content, audio (in that order):
<div class="hentry-inner">
<div class="entry-wrapper grids">
<?php get_template_part('content', 'meta'); ?>
<div class="entry-content grid-10 clearfix">
<h2 class="entry-title"> <?php the_title(); ?></h2>
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
the_content(__('Continue Reading', 'stag'));
wp_link_pages(array('before' => '<p><strong>'.__('Pages:', 'stag').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number'));
$embed = get_post_meta(get_the_ID(), '_stag_audio_embed', true);
if(!empty($embed)){
echo do_shortcode(htmlspecialchars_decode($embed));
}else{
stag_audio_player(get_the_ID());
}
?>
</div>
<span class="bottom-accent"></span>
</div>
</div>
WordPress is very well documented and I advise you to dive into the WordPress Codex. If you need further customizations you should probably ask and/or hire the theme author to do the modifications for you.
I am making a custom theme based on twentytwelve. I am facing a problem regarding woocommerce shop page. I have a page template that work fine. However, when I activate woocommerce plugin and show the shop base page (using my custom page template) it removes all my custom divs and other custom contents. I have followed woocommerce documentation, using both woocommerce.php and action hooks. But it did not produce any result. Here is my code for the page template.
<?php
/**
* Template Name: Front Page Template
*
* Description: A page template that provides a key component of WordPress as a CMS
* by meeting the need for a carefully crafted introductory page. The front page template
* in Twenty Twelve consists of a page content area for adding text, images, video --
* anything you’d like -- followed by front-page-only widgets in one or two columns.
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<div class="rotator">
<ul id="rotmenu">
<?php
$recentposts=get_pages('number=5');
// echo $recentposts;
$ii=0;
if ($recentposts) {
$ii=0;
//foreach($recentposts as $page) {
//setup_postdata($page);
for ($ii=1;$ii<=5;$ii=$ii+1){
//$ii=$ii+1;
$title='r_slideshow_0'.$ii.'_title';
$image='r_slideshow_0'.$ii.'_uploader';
$details='e_slideshow_0'.$ii.'_textarea';
$link='r_slideshow_0'.$ii.'_link';
// echo $page;
// echo $title;
//echo $image;
//echo $details;
//echo of_get_option($image, 'no entry');
?>
<li>
<?php echo of_get_option($title, 'no entry');/*echo $page->post_title;*/ ?>
<div style="display:none;">
<div class="info_image"><?php echo of_get_option($image, 'no entry');?></div>
<div class="info_heading"><?php echo of_get_option($title, 'no entry'); ?></div>
<div class="info_description">
<?php echo of_get_option($details, 'no entry'); ?>
Read Details >><br/>
</div>
</div>
</li>
<?php
//$ii=$ii+1;
}
}
?>
</ul>
<div id="rot1">
<img src="" width="100%" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
<!--#rotator on front static page-->
<?php
if(of_get_option('boxchoice_radio', '0' )){
?>
<!--box content-->
<div class="section_front_page group_front_page">
<div class="col_front_page span_1_of_3">
<img src="<?php echo of_get_option('frontpage_boximage_01' ); ?>"style=" ">
<?php if(of_get_option('frontpage_textarea_01' ) && of_get_option('frontpage_textarea_01' )!='Default Text')
{
?>
<?php echo of_get_option('frontpage_textarea_01' ); ?>
<?php } ?>
<br/>
<?php if(of_get_option('frontpage_linkarea_01' ) && of_get_option('frontpage_linkarea_01' )!='Default')
{
?>
Read More >>
<?php } ?>
</div>
<div class="col_front_page span_1_of_3">
<img src="<?php echo of_get_option('frontpage_boximage_02' ); ?>" style="">
<?php if(of_get_option('frontpage_textarea_02' ) && of_get_option('frontpage_textarea_02' )!='Default Text')
{
?>
<p>
<?php echo of_get_option('frontpage_textarea_02' ); ?>
</p>
<?php } ?>
<br/>
<?php if(of_get_option('frontpage_linkarea_02' ) && of_get_option('frontpage_linkarea_02' )!='Default')
{
?>
Read More >>
<?php } ?>
</div>
<div class="col_front_page span_1_of_3">
<img src="<?php echo of_get_option('frontpage_boximage_03' ); ?>"style=" float:right; width:100%;" >
<br/>
<?php if(of_get_option('frontpage_textarea_03' ) && of_get_option('frontpage_textarea_03' )!='Default Text')
{
?>
<?php echo of_get_option('frontpage_textarea_03' ); ?>
<?php } ?>
<?php if(of_get_option('frontpage_linkarea_03' ) && of_get_option('frontpage_linkarea_03' )!='Default')
{
?>
Read More >>
<?php } ?>
</div>
</div>
<!--#end of box content-->
<?php
} //end of boxes
?>
<!--#end of box content-->
<!--default content on page-->
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) : ?>
<div class="entry-page-image">
<?php the_post_thumbnail(); ?>
</div><!-- .entry-page-image -->
<?php endif; ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'front' ); ?>
<?php get_footer(); ?>
I have used this in my functions.php file to make it woocommerce compatible,
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
echo '<div id="main">';
}
function my_theme_wrapper_end() {
echo '</div>';
}
However, it did not work. Only the product shows up spanning full width on the page and default sidebar lies at its bottom.
I need some help on this. Can you give me any ideas?
Best is that you use the "template overwrite" method:
Copy the woocommerce/templates/ folder inside your theme folder, to yourtheme/woocommerce/
Inside that folder, you can modify the html structure to your heart's content and it will be used instead of woocommerce standard html templates.
Once this is done, open up these two files:
/wp-content/themes/your-theme/woocommerce/shop/wrapper-start.php
/wp-content/themes/your-theme/woocommerce/shop/wrapper-end.php
and modify the html to match yours.
there are two method one is Using woo commerce_content() and other is Using hooks so please follow first method to merge woo commerce in to your theme that documentation for merge woo commerce in to theme if you do not follow it willbe harmful for your theme design .....
I need to add links to WordPress Posts on a static HTML page. I got some information that has been helpful but need a few more elements to make it complete.
Here is the code I have so far:
<?php
$number = 5;
$wordpress_header = "blog/wp-blog-header.php";
// Include wordpress header
if (file_exists($wordpress_header))
{
include ($wordpress_header);
$myposts = get_posts('numberposts=$number&offset=0&category=0');
echo "<ul class='Bloglinks'>";
foreach(array_slice($myposts, 0, $number) as $post)
{
echo '<li><a href="';
the_permalink();
echo '">';
the_date();
echo " ";
the_title();
echo '</a></li>';
}
echo "</ul>";
}
else
{
echo "Unable to connect to Wordpress header file.";
die();
}
?>
This only shows the titles of the most recent posts. I need to be able to display the following:
<h5>The truth about Lazy Eye</h5>
<p class="blog-info">07.16.10 | <a class="comment-ref">3 Comments</a></p>
<h5>More Adult Learning Problems Linked to Eyes</h5>
<p class="blog-info">06.12.10 | <a class="comment-ref">1 Comments</a></p>
<h5>New Vision Examination Instruments Arrived!</h5>
<p class="blog-info">05.10.10 | <a class="comment-ref">13 Comments</a></p>
You should use the function query_posts() with the functions have_posts() and the_post(). Here is an example for the WordPress API:
//The Query
query_posts('posts_per_page=5');
//The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();
..
endwhile; else:
..
endif;
//Reset Query
wp_reset_query();
That will loop through all posts you have queried. So you can just insert your query from the get_posts() function into the query_posts() function.
EDIT: I think if you want to stick with the get_posts() function, you have to call the setup_postdata() function to get the new post (source code for the API):
<ul>
<?php
global $post;
$myposts = get_posts('numberposts=5&offset=1&category=1');
foreach($myposts as $post) :
setup_postdata($post);
?>
<li><?php the_title(); ?></li>
<?php endforeach; ?>
</ul>
But I would recommend to take the query_posts() function instead.
<?php
require($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
$args = array(
// 'cat' => 3, // Only source posts from a specific category
'posts_per_page' => 6 // Specify how many posts you'd like to display
);
$latest_posts = new WP_Query( $args );
if ( $latest_posts->have_posts() ) {
while ( $latest_posts->have_posts() ) {
$latest_posts->the_post(); ?>
<article class="vertical-item content-padding ls">
<div class="item-media">
<img src="<?php the_post_thumbnail() ?>" alt="<?php the_title(); ?>">
</div>
<div class="item-content">
<h4 class="entry-title">
<?php the_title(); ?>
</h4>
<div>
<div class="media-body media-middle greylinks">
<br><a class="small-text" href="#"><?php the_time('l jS F, Y') ?></a>
</div>
</div>
</div>
<div class="item-footer">
<a class="lato lightgrey weight-black" href="<?php the_permalink(); ?>">Read this Article</a>
</div>
</article>
<? }
} else {
echo '<p>There are no posts available</p>';
}
wp_reset_postdata();
?>