Develop Reference

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 -->

Wordpress custom theme - javascript can't read any element on any of my page

I'm new to wordpress and javascript in general. I'm trying to replace some text on click in my front-page.php with javascript but I can't make my javascript file to read any element on any of my page.
this is the code to include the javascript file in functions.php, I'm copying everything just in case its relevant.
function himatekpendupi_scripts() {
wp_enqueue_style( 'himatekpendupi-style', get_stylesheet_uri(), array(), _S_VERSION );
wp_enqueue_style( 'himatekpendupi-main', get_template_directory_uri() . '/css/main.css' );
wp_enqueue_style( 'bootstrap-icons', 'https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css' );
wp_style_add_data( 'himatekpendupi-style', 'rtl', 'replace' );
wp_enqueue_script( 'himatekpendupi-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
wp_enqueue_script( 'bootstrap-popper', 'https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js', array('jquery') );
wp_enqueue_script( 'bootstrap-script', 'https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js', array('jquery') );
wp_enqueue_script( 'himatekpendupi-script', get_template_directory_uri() . '/js/script.js', array('jquery') );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'himatekpendupi_scripts' );
here is the code in script.js
const desc = document.getElementById("bidang-desc");
const header = document.getElementById("masthead");
console.log("test");
console.log(desc);
console.log(header);
desc.innerHTML = '';
desc.appendChild(document.createTextNode("My new text!"));
this is the console output
test
null
null
script.js?ver=5.9.3:5 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at script.js?ver=5.9.3:5:16
edit: added code from my header.php
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package himatekpendupi
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'himatekpendupi' ); ?></a>
<header id="masthead" class="site-header shadow-sm">
<div class="container pt-2 pb-2">
<div class="row d-flex justify-content-between align-items-center">
<div class="col site-header__logo d-flex align-items-center">
<?php the_custom_logo(); ?>
HIMA Teknologi Pendidikan
</div>
<nav id="site-navigation-lg" class="col-6 d-inline-flex justify-content-end main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'himatekpendupi' ); ?></button>
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->
</div>
<nav id="site-navigation" class="col pt-2 pb-2 d-flex justify-content-center align-items-center main-navigation">
<button class="menu-toggle d-flex align-items-center" aria-controls="primary-menu" aria-expanded="false"> <!- making this flex cause the button to appear on large view port -->
<i class="bi bi-list"></i>
<?php esc_html_e( 'Menu', 'himatekpendupi' ); ?>
</button>
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav>
</div>
</header><!-- #masthead -->
What did I miss? Any help is greatly appreciated.

In your header.php code, there isn't an ID of bidang-desc so that is why it's throwing a null error.
In regard to the masthead ID, I would check the window fully loads before trying to grab the elements.
window.addEventListener('load', function() {
// Once page is loaded, grab the elements
const desc = document.getElementById("bidang-desc"); // This element isn't in header.php so it will return null
const header = document.getElementById("masthead");
// Code goes here
});

You may want to look into registering a script first, enqueueing it later. That's a lot cleaner. Also, create individual functions for styles and js.
Anyhow, I expect your code runs before the DOM is populated, i.e. before the 2 elements you're looking for exist.

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 add pagination in wordpress when using this code?

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!

Using infinite scroll plugin on wordpress without "next navigation" functions

I've developed this page. There is many offers to load on main page, so i'm trying to make a "infinite scroll" function. To develop the page, i first made it on a bootstrap template, and after i turned into a page model template, on my real estate theme.
The problem is: All the "infinite scroll plugins" i've downloaded request 4 fields: Navigation selector, Next selector, Item selector and Content selector, as you can see here. The problem is that i only can provide two of this four fields: Item selector #seletor and content selector (.portfolio.items2). Here is the code that loops all the info:
<div id="seletor">
<div class="portfolio-items2">
<?php $newsArgs =
array(
'post_type' => 'property',
'posts_per_page' => 200,
"orderby" => 'meta_value_num',
"meta_key" => 'numerooff',
"order" => 'DESC',
'tax_query' => array(
array(
'taxonomy' => 'property-status',
'field' => 'slug',
'terms' => 'oneoff')));
$newsLoop = new WP_Query( $newsArgs );
while ( $newsLoop->have_posts() ) : $newsLoop->the_post(); ?>
<div class="col-md-4 shortcode-col listing_wrapper <?php meta('seletoroff');?>" >
<div class="property_listing" data-link="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<div class="listing-unit-img-wrapper">
<div class="property_media"></div>
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<img width="525" height="350" src="<?php meta('imagemoff');?>" class="lazyload img-responsive wp-post-image" alt="" sizes="(max-width: 525px) 100vw, 525px" />
</a>
<div class="tag-wrapper">
<div class="featured_div"><?php meta('porcentooff');?></div>
</div>
</div>
<h4>
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<?php meta('titulooff');?>
</a>
</h4>
<div class="property_location_image">
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>" rel="tag">
<span style="font-size: 15px;"><?php meta('bairrooff');?></span>
</a>
</div>
<br>
<div class="property_listing_details">
<?php $post_meta_data = get_post_custom($post->ID);
if( !empty($post_meta_data['REAL_HOMES_property_size'][0]) ) {
$prop_size = $post_meta_data['REAL_HOMES_property_size'][0];
echo '<div class="inforoom">'. $prop_size .'m² <div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-size.png" style="max-width: 14%; height: auto;"></div></div>';
}
if( !empty($post_meta_data['REAL_HOMES_property_bedrooms'][0]) ) {
$prop_bedrooms = floatval($post_meta_data['REAL_HOMES_property_bedrooms'][0]);
$bedrooms_label = ($prop_bedrooms > 1)? __('Bedrooms','framework' ): __('Bedroom','framework');
echo '<div class="infobath">'. $prop_bedrooms .'<div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-bed.png" style="max-width: 17%; height: auto;"></div></div>';
}
if( !empty($post_meta_data['REAL_HOMES_property_bathrooms'][0]) ) {
$prop_bathrooms = floatval($post_meta_data['REAL_HOMES_property_bathrooms'][0]);
$bathrooms_label = ($prop_bathrooms > 1)?__('Bathrooms','framework' ): __('Bathroom','framework');
echo '<div class="infosize">'. $prop_bathrooms .'<div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-bath.png" style="max-width: 17%; height: auto;">
</div></div>';
} ?>
</div>
<div class="listing_unit_price_wrapper">
<span class="price_label price_label_before" style="text-decoration: line-through;">De: R$ <?php meta('valordeoff');?></span><br>
<span style="text-decoration: underline; font-size: 22px; font-weight: bold;">Por: R$ <?php meta('valoroff');?> </span>
<span class="price_label"></span>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
I can limit how many pages appear with posts_per_page, but i don't have any pagination configured (example: Navigation through pages, next page, older page...)
So, i see two ways to solve it, but in both i need your guide.
First: There is a way to solve it without navigation functions configured.
Second: The only way to solve it is to configure the navigation on my page wordpress template.
I'm really stuck here. Waiting for your help, thanks!