I'm developing a website in wordpress and I want to load more news when scrolling but I already have a html structure and when I put ajax load more it put own structure and I don' want that.
I'm using the Ajax Load More plugin.
So, How can I use Ajax load more with this html structure:
<?php
$posts = get_posts(['cat' => get_cat_ID("news")]);
foreach($posts as $post){
setup_postdata($post);
?>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="news-link" href="<?php the_permalink() ?>">
<div class="news">
<div class="image">
<?php the_post_thumbnail('thumbnail') ?>
<div class="mask">
<div class="icon">
<i class="icon-plus"></i>
</div>
</div>
</div>
<div class="title">
<span>
<?php the_title(); ?>
</span>
</div>
<div class="excerpt">
<p class="date">
<?php echo get_the_date('Y-m-d'); ?>
</p>
</div>
<div class="excerpt">
<p>
<?php the_excerpt(); ?>
</p>
</div>
</div>
</a>
</div>
<?php
wp_reset_postdata();
} ?>
If i put this shortcode it shows but not with the structure that i want.
[ajax_load_more id="7279302844" container_type="div" post_type="post" category="news"]
Thank you
Related
Can you please advise which is the most appropriate way to append classes dynamically to the 's below based on the ID of the post?
The goal is to add a class to some of the div's depending on the ID of the post being even or odd.
<div class="service__preview">
<div class="row mb-5">
<div class="col-4">
<div class="row">
<div class="col-5 // here I want to dynamically add order-2 if get_the_ID() is even">
<div class="service__preview service__preview-id">
<?php echo get_the_ID() + 1;?>
</div>
</div>
<div class="col-7 // here I want to dynamically add order-1 if get_the_ID() is even">
<div class="service__preview service__preview-icon">
<div class="icon__container icon__container-3x">
<div class="icon__container icon__container-2x">
<div class="icon__container icon__container-1x">
<i class="<?php echo get_post_meta($post->ID, 'service_icon', true); ?> fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<a class="service__preview service__preview-title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
<p class="service__preview service__preview-description"><?php the_content(); ?></p>
<a class="service__preview service__preview-link" href=" <?php the_permalink(); ?>"><p>Learn more</p></a>
</div>
</div>
Looking forward to your suggestions.
FYI: the project is a WordPress template.
Hellow,
im trying to code a custom theme for my wordpress site. im trying to output 5 of my posts and i want to wrap them into a link. however when i foreach() through the posts and want to wrap my html in an tag with the permalink it wont work.
The code i wrote:
<?php
global $post;
$myposts = get_posts( array(
'posts_per_page' => 5,
) );
if ( $myposts ) {
foreach ( $myposts as $post ) :
setup_postdata( $post ); ?>
<div class="container-fluid">
<a class="post-link" href="<?php echo the_permalink();?>">
<div class="post-post p-5">
<div class="row">
<div class="col-md-12">
<?php the_category('<p></p>'); ?>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3><?php the_title(); ?></h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<small><?php the_author(); ?></small>
</div>
</div>
</div>
</a>
</div>
<?php
endforeach;
wp_reset_postdata();
}
?>
But the code which ends up on the site is complete junk and it closes the a tag before the next div. what did i do wrong?
The code which lands on the site:
<div class="container-fluid">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
<div class="post-post p-5">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
<div class="row">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
<div class="col-md-12">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
Allgemein </div>
</div>
<div class="row">
<div class="col-md-12">
<h3>öööööö</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<small>root</small>
</div>
</div>
</div>
</div>
WordPress' the_permalink() function prints the link with the tags.
Use get_the_permalink() function instead of the_permalink() for "echo"ing the link wherever needed.
It looks like you are trying to place an anker inside an anker this is not allowed, the output of your html is likely parsed / interpreted by your browser try looking at the sourcecode instead of the html after parsing by your browser. in chrome you can do so by visiting view-source:http://yourdomain.com
Not sure for other browsers, you can try right clicking in the page and select view source
<?php $section1 = get_field('section1'); ?>
<div class="section1" id="section1">
<div class="container">
<h2><?php echo $section1['title']; ?></h2>
<div class="quote-triangle">
<p>
<?php echo $section1['quote']; ?>
</p>
<div class="quote__moving-border"></div>
</div>
<div class="bottom">
<div data-aos="fade-down">
<div class="leftside">
<h3>
<?php echo $section1['title_image']; ?>
</h3>
<div class="caption"><?php echo $section1['caption_image']; ?></div>
<div class="desc">
<p>
<?php echo $section1['desc_image']; ?>
</p>
</div>
</div>
</div>
<div data-aos="fade-down">
<div class="rightside">
<img src="<?php echo esc_url( $secttion1['image']['url'] ); ?>" alt="" class="rightside__img">
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
I had followed literally the ACF documentation for the GROUP type but when I put the if in the PHP tag the whole section disappears and when I remove if the section back but The Group type still not worked.
I am in the process of creating a theme and I can't get the author to be displayed on the single.php page. It's displayed lower on the site but doesn't seem to show in the first call under the headline.
<header class="intro-header" style="background-image: url('http://i.imgur.com/ZyZMhQv.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1><?php the_title(); ?></h1>
<hr class="small">
<span class="subheading">Posted by <?php the_author(); ?> on <?php the_time('F jS, Y'); ?></span>
<div id="avatar" class="row text-center"><?php echo get_avatar( $post->post_author, 92 ); ?> </div>
</div>
</div>
</div>
</div>
</header>
The second time it's called within the loop it works fine.
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default panel-body">
<?php while(have_posts()) : the_post(); ?>
<p> Posted by <?php the_author(); ?> on <?php the_time('F jS, Y'); ?> </p>
<p> <?php the_content(''); ?> </p>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
Why doesn't it show up the first time it's called?
as per the codex - it must be within the loop.
I have a chunk of content in a textarea that I can call dynamically to the front by using <php the_content ?> See full code below.
The problem is, I dont have an assigned area for the image. (I'm open to options to create one but I think it will be too much effort), anyway, is there anything I can do (JQuery / JS is fine) that I can call the image to fill the: <?php echo $the_content['image'] ?> that you see in my code, which obviously does not work? Meanwhile leaving the actual text part or rest of the content separate.
I am attaching an illustration for a more visual idea of what I am looking for
Here is the entire code for that section
<section class="box classes-box" id="classes_box"><!-- Section Events -->
<div class="container light-grey-background">
<div class="row">
<div class="col-md-6 no-padding">
<div class="boxing-classes" style="background-image: url('<?php echo $the_content['image'] ?>')">
<div class="classes">
<nav class="classes-nav">
<ul class="clean-list toggle-list clearfix">
<?php foreach($slides as $i => $slide): ?>
<li class="classes-menu-item ">
<input type="radio" id="toggle-<?php echo $slide['post']->ID; ?>" name="toggle-helper" autocomplete="off">
<label for="toggle-<?php echo $slide['post']->ID; ?>"><?php echo get_the_title( $slide['post']->ID ) ?></label>
</li>
<?php endforeach; ?>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-6 no-padding ">
<?php foreach($slides as $i => $slide): ?>
<div class="classes-content-block" id="classes_content_<?php echo $slide['post']->ID ?>" style="display:none;">
<header class="padding white-background">
<h2 class="entry-header black-background"><?php echo get_the_title( $slide['post']->ID ) ?></h2>
</header>
<div class="entry-content padding">
<?php echo apply_filters('the_content', $slide['post']->post_content); ?>
<?php if ( !empty( $slide['options']['button'] )): ?>
<div class="white-background">
<a class="read-more text-center red-black-hover" href="<?php echo $slide['options']['button']['link'] ? $slide['options']['button']['link'] : '#'; ?>"><?php echo $slide['options']['button']['link_text'] ? $slide['options']['button']['link_text'] : 'View Timeline' ; ?></a>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
Normally, what people do is to create a Shortcode that will produce the desired HTML, something like:
[image-block src="apple-touch-icon.png" class="all-imgs" id="my-img"]The content[/image-block]
This would be the shortcode:
add_shortcode( 'image-block', function( $atts, $content) {
return sprintf(
'<div class="left"><img src="%1$s" class="%2$s" id="%3$s"></div><div class="right">%4$s</div>',
$atts['src'],
$atts['class'],
$atts['id'],
$content
);
});
And this the output:
See CSS property FLOAT : left|right
<div id=container class="clearfix">
<div class="image-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<img src="images/mypicture.jpg" alt="" class="rwd-image" id="mymage">
</div>
<div class="content-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<p>Lorem Ipsum</p>
</div>
</div>