How to add pagination in wordpress when using this code? - javascript

I'm using this code to show post loop on my homepage.
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
endif;
?>
And my content.php contain this code:
<div class='post-outer'>
<h2 class='entry-title'>
<a href='<?php echo get_permalink(); ?>' id='pt'><?php the_title(); ?></a>
</h2>
<div class='pimg'>
<img alt='featured image' id='fimg' src='<?php the_post_thumbnail_url(); ?>'/>
</div>
<div class='post-inner'>
<?php echo apply_filters( 'the_content', wp_trim_words( strip_tags( $post->post_content ), 25 ) ); ?>
<a href='<?php echo get_permalink(); ?>'>[Continue Reading]</a>
</div>
<div class='clear'></div>
</div>
I'm trying to add pagination in this code by showing only 5 post at a time in loop and adding next page option in it.

if you want with previous and next pages try this:
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( 'Back', 'textdomain' ),
'next_text' => __( 'Onward', 'textdomain' ),
) );
or if you want without previous and next pages:
the_posts_pagination( array( 'mid_size' => 2 ) );
after endwhile and endif .
and for setting post per page, go to Setting > Reading and set number in 'Blog pages show at most' field.
and here the complete pagination reference: Pagination
hope to be useful!

Related

How to create a new div for a custom tag in Blogger?

I have a site on Blogger. I share book quotes on this site. At the same time, as of today, I started to share poems. The section below shows all my posts:
I want to create a separate area for poems and show the publications with the tag "Poetry" here. What should I do?
I imagine you are using WordPress to create your blog, in this case you need to create a loop by calling some variables that you want to display, such as number of posts, titles, thumbnail, etc.
Below I will leave a snippet of my website code and a print of how it is displayed on the front-end
<div>
<?php query_posts( array( 'post_type'=> 'noticias', 'posts_per_page' => 1, 'orderby' => 'title', 'order' => 'ASC' ) ); ?>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" style="text-decoration: none; color: #303030;">
<?php the_post_thumbnail('medium', array('class' => 'indicacao')); ?>
<div>
<h5><?php the_title(); ?></h5>
</div>
</a>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</div>
I suggest you take a look at the WordPress documentation and the forum, where you can get more information about it.
If not WordPress, please provide more information about your code.

How do i remove pages from a php snippet CODE

I used a plugin called "Insert PHP Code Snippet" to create this page:
URL; https://sololoaded.com/All-Profiles/
Snippet Short Code; [xyz-ips snippet="All-Profiles"]
I later find out that most of my pages are appearing inside the page
for a exmaple:
DMCA PAGE
About Us page
please help I need a code on how to remove these pages from appearing inside the snippet page:
Here is the code:
<!-- query -->
<!-- query -->
<?php
add_action('admin_init', function () {
// Redirect any user trying to access comments page
global $pagenow;
if ($pagenow === 'edit-comments.php') {
wp_redirect(admin_url());
exit;
}
// Remove comments metabox from dashboard
remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
// Disable support for comments and trackbacks in post types
foreach (get_post_types() as $post_type) {
if (post_type_supports($post_type, 'comments')) {
remove_post_type_support($post_type, 'comments');
remove_post_type_support($post_type, 'trackbacks');
}
}
});
// Close comments on the front-end
add_filter('comments_open', '__return_false', 20, 2);
add_filter('pings_open', '__return_false', 20, 2);
// Hide existing comments
add_filter('comments_array', '__return_empty_array', 10, 2);
// Remove comments page in menu
add_action('admin_menu', function () {
remove_menu_page('edit-comments.php');
});
// Remove comments links from admin bar
add_action('init', function () {
if (is_admin_bar_showing()) {
remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
}
});
global $post;
$post_slug=$post->post_name;
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$query = new WP_Query( array(
'post_type' => array( 'page' ),
'post__not_in' => array(3,5550,8, 73, 6, 11, 9817,22177),
'posts_per_page' => 19,
'orderby' => 'title',
'order' => 'ASC',
'paged' => $paged
) );
?>
<?php if ( $query->have_posts() ) : ?>
<section class="top-stories section-theme-border">
<!-- begin loop -->
<div style="background:white; padding:15px; border-radius: 5px;">
<div class="row row-lg">
<?php while ( $query->have_posts() ) : $query->the_post();
$url1 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
$url2 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium');
$image_id = get_post_thumbnail_id();
$img_src = wp_get_attachment_image_url( $image_id, 'large' );
$img_srcset = wp_get_attachment_image_srcset( $image_id, 'full' );
$img_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
?>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="item">
<div class="item-media rounded ">
<a href="<?php the_permalink(); ?>"
class="item-media-content"
style="background-image: url('<?php echo esc_attr( $img_src ); ?>');"></a>
</div>
<div class="item-info text-center">
<div class="post-title a item-title text-ellipsis">
<?php the_title(); ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div></div>
<!-- end loop -->
<div class="container-wrapper songs-pag">
<?php
echo paginate_links( array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'total' => $query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
'end_size' => 2,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => sprintf( '<i></i> %1$s', __( 'Previous', 'text-domain' ) ),
'next_text' => sprintf( '%1$s <i></i>', __( 'Next', 'text-domain' ) ),
'add_args' => false,
'add_fragment' => '',
) );
?>
</div>
</section>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
As I observe you have problem in below loop and specifically in funcions the_permalink() and the_title() that is why you are getting all other details as well, so check first than you get it.
<?php while ( $query->have_posts() ) : $query->the_post();
$url1 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
$url2 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium');
$image_id = get_post_thumbnail_id();
$img_src = wp_get_attachment_image_url( $image_id, 'large' );
$img_srcset = wp_get_attachment_image_srcset( $image_id, 'full' );
$img_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
?>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="item">
<div class="item-media rounded ">
<a href="<?php the_permalink(); ?>"
class="item-media-content"
style="background-image: url('<?php echo esc_attr( $img_src ); ?>');"></a>
</div>
<div class="item-info text-center">
<div class="post-title a item-title text-ellipsis">
<?php the_title(); ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div></div>
<!-- end loop -->

How to implement the slider card in Carosol 3 using PHP?

Note: I am not promoting the products listed on the screenshot as it is not functional yet.
I am making a Woocomerence+Worpress site theme to my customer and i code it with pinegrow editor.
I have tree owls carousel slider in main page and its front-page.
Carousel 1 purpose = Show customer latest product, what are added. Left to right
Carousel 2 purpose = Show customer most highest rated product. Left to right
Carousel 3 purpose = Show customer products that are on sale. Left to right
Problem = my php.code works but don't go to right cards in slider, Do I need own codes for each card?, or is there better way to do it? and how I can change code to make Carousel 2 and 3 work like it
description.
<div class="card-body">
<?php
$args = array(
'post_type' => 'product',
'stock' => 1,
'posts_per_page' => 3,
'orderby' =>'date',
'order' => 'DESC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div class="span3">
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="My Image Placeholder" width="65px" height="115px" />'; ?><h4><?php the_title(); ?></h4><span class="price"><?php echo $product->get_price_html(); ?></span></a>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
Arvosteluja: <?php echo $product->get_review_count(); ?>
</div>
<!-- /span3 -->
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>

How to fix image not displaying in php?

So I am trying to create a CTA(call to action) adding three cards into my wordpress site. I am trying to insert PHP and ACF functions so that it shows my image, currently it displays the title and the body text of these cards but doesn't show any image? How do I fix it?
In my acf, I have created four sub field types: "cta_image", "cta_title", "intro_text" and "cta_link". In my code editor, I have inserted the following functions and so far on my wordpress site, it shows the title and the intro text but I don't know how to put an image.
<?php
if ( have_rows( 'ctas' ) ) :
// Loop through rows (parent repeater).
while ( have_rows( 'ctas' ) ) :
the_row();
?>
<div class="title-wrapper">
<?php if ( get_sub_field( 'cta_title' ) ) : ?>
<h2><?php the_sub_field( 'cta_title' ); ?></h2>
<?php endif; ?>
</div>
<div class="body-text">
<?php print_r(get_sub_field('intro_text')); ?>
</div>
<?php
endwhile;
endif;
?>
Every time I insert functions to show the image, it gives a database error or simply doesn't show any image. The final work is supposed to look like the image down below. Mine shows just the title and body text all in a single line.
Have you tried using this bit of code directly from the documentation?
<?php $image = get_sub_field('cta_image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>

WordPress expanding grid with thumbnail

I'm using codrops solution to display team members in an expanding grid: http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
I was already able to change some code to display my post thumbnail in the grid preview. However, I want to display the same picture in full size in the expanded view. In the original version it grabs an image in the files called 1.jpg. How can I achieve to grab my thumbnail?
Here is my PHP/HTML:
<ul id="og-grid" class="og-grid">
<?php $args = array( 'post_type' => 'mitarbeiter');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li>
<a href="mailto:<?php the_field('email')?>" data-largesrc="images/1.jpg" data-title="<?php the_title(); ?>" data-description="<?php the_field('funktion') ?><br /><br />Rufen Sie mich an unter <?php the_field('telefonnummer')?> oder schreiben Sie mir eine Nachricht.">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('team');
}
else { } ?>
</a>
<?php the_title(); ?>
</li>
<?php endwhile; ?>
Original CSS is just slightly changed to fit my needs: https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/css/component.css
No changes on original JS: https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/js/grid.js
Please have al look at your code:
data-largesrc="images/1.jpg"
Change this to your thumbnail url.

Categories

Resources