WordPress load more posts after click on button

2022-05-04 10:31 koupmi imported from Stackoverflow

I have php template what display custom post types. I need display 6 posts and after click on button display another 6. Currently button not works and there are showed just 6 posts.

My JS:

<script>
$(document).ready(function(){
  $(".content").slice(0, 6).show();
  $("#loadMore").on("click", function(e){
    e.preventDefault();
    $(".content:hidden").slice(0, 6).slideDown();
    if($(".content:hidden").length == 0) {
      $("#loadMore").text("No Content").addClass("noContent");
    }
  });
  
})
</script>

php

  <?php
            $args = array(
                'posts_per_page' => 6,
                'post_type' => 'dluhopisy',
            );
            $the_query = new WP_Query( $args ); 
            if( $the_query->have_posts() ){
                while ( $the_query->have_posts() ){
                    $the_query->the_post();
                    $the_id = get_the_id();
                    
$classes[] = 'grid-col col-1-3 bp2-col-1-2 bp1-col-1-2 bp0-col-full comp_company_profile_small-filter content';
                    .....

                    ?>
                    <div <?php cookie_class_from_array( $classes );?>>....

See also questions close to this topic

How to upload a video using ACF in WordPress?
I am still at learning phase in WordPress. I cannot figure out in ACF which field type should I choose to upload a video file and which code should I write to show it at the front-end. Please look into the below code. I am using the_field('') but it isn't working. Can anyone help
```
                <video width="954" height="535" controls class="tm-mb-40">

                    <source src="video/wheat-field.mp4" type="video/mp4">   
                      
                    Your browser does not support the video tag.

                </video>
```
delete a table form a database using laravel command
i need to delete a database table using laravel artisan command . not like this command php artisan migrate:rollback --step=5

i need to create like this route or controller code .

Route::get('/clear/database', function () {
```
    Artisan::call('cache:clear');
    return redirect('/');
```
});

. i also try public function dd()
```
{
    Schema::drop('table_name');
}
```
but it not working . gives me error like this SQLSTATE[23000]: Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails (SQL: drop table table_name)

no foreign key for the table . what should i do ?

thanks in advance!

Creating Sticky Navbar with Drop Down Menu HTML

I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

*image with dropdown menu but without sticky navbar

*image with sticky navbar but without dropdown menu

below is the code for "image with dropdown menu but without sticky navbar"

    <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

below is the code for "image with sticky navbar but without dropdown menu"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

Please i need some help with this as i am new to html and css.

How to clear user uploaded images if the limit of files exceeded in jquery
I have a simple form where a user can upload multiple images. I only want the user to upload 4 images at once, so I did the following:
```
$("#myfile").on("change", function() {
    if ($("#myfile")[0].files.length > 4) {
        alert("You can select only 4 images");
    } 
});
```
```
<input type="file" id="myfile" class="form-control" name="pimage[]" multiple="multiple">
```
This gives an alert when the user uploads more than 4 images but doesn't stop them from submitting the form.

Can anyone please tell me how to clear the user uploaded images if the limit exceeds or disable the submit button?

Some iphone device not able play audio browser jquery

My jquery audio script perfecly play audio, but some iphone device has no audio playing, can anyone tell me the problem,

 <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js" integrity="sha512-L6Z/YtIPQ7eU3BProP34WGU5yIRk7tNHk7vaC2dB1Vy1atz6wl9mCkTPPZ2Rn1qPr+vY2mZ9odZLdGYuaBk7dQ==" crossorigin="anonymous"></script>   

let autoplay = true;
    let soundID;
    var sound = new Howl({
        src: ['<?php echo base_url(); ?>assets/mp3/<?php echo $nama_musik; ?>'],
        autoplay: autoplay,
        loop: true,
    });

    soundID = sound.play();

Whenever I try to add email on mysql server. My page is not responding. why?

I am a little bit confused. see the code below.

$('#submit').click(function() {
    $('#showdata').html($('#senddata').serialize()); /*Print all data that passed from form.*/
    $.ajax({
        url: "save.php",
        /* Here data store on mysql server without email and response to welcome.php. */
        type: "POST",
        /* if i want to add proper email format then data store in mysql but not response on welcome.php. */
        data: $('#senddata').serialize(),
        success: function(r) {
            alert("ok");
            $('#senddata').trigger('reset');
            window.location = 'welcome.php'; /*This is welcome page*/
        }
    })
})

I want to submit a form using the ajax post method. If I write any name instead of email then data is stored on the server and responding welcome.php. Whenever I write any name email then data is stored on the server but responding welcome.php. Here is 'save.php' code.

<?php
include('./config.php');
print_r($_POST);
    $name=$_POST['name'];
    $email=mysqli_real_escape_string($con,$_POST['email']);
    $pwd=$_POST['password'];
    $vill=$_POST['address'].$_POST['city'].$_POST['state'].$_POST['zip'];
    $insertdata="INSERT INTO `persons`(`name`,`email`,`pwd`,`vill`)VALUE('$name','$email','$pwd','$vill')";
    print_r($insertdata);
    if(mysqli_query($con,$insertdata)){
        echo "data added";
    }else{
        echo "not added";
    }

?>

Note: if I put my button <button class="btn btn-primary" id="submit">sign up</button> outside form then everting is right.

Can you add apps made from (js, nodejs, express and mongodb) in a wordpress website?

I already have a wordpress website. I studied web development using js, node.js, express and mongodb and build some projects. I would like to add it to my website. Is this possible or I just need to create a website without wordpress and add my projects?

Query to get Woo products in a parent-children order

I want to build a MySQL query for a Woo database schema to get simple/variable products, but in a specific order: I want to get them in an ID ASCending order, but when a variable product is met, I want to get the variations exactly below their parent.

So for a simple product, or the parent of a variable product, the post_type field is set to 'product' and the post_parent field is set to 0. For the children of a variable product (a.k.a variations) the post_type field is set to 'variable_product' and the post_parent field is set to the ID of the parent product.

So, imagine this desired order:

ID	post_title	post_type	post_parent
1100	title1	product	0
1104	title2	product	0
1130	title2 - variation1	variable_product	1104
1200	title2 - variation2	variable_product	1104
1208	title2 - variation3	variable_product	1104
1107	title3	product	0
1111	title4	product	0
1205	title4 - variation1	variable_product	1111
1210	title4 - variation4	variable_product	1111
1430	title4 - variation3	variable_product	1111
1432	title4 - variation2	variable_product	1111

So by the above table you see that I want products to be sorted by their ID, until the variation(s) of a product are met, which I want to be placed under their parent, and get sorted themselves by their ID also. So I don't care about titles not being sorted alphabetically (title4-variation4 is sorted above title4 - variation3 because the variations' IDs are sorted in an ascending order).

So I tried to play a little with ORDER BY ID ASC, post_parent ASC and also ORDER BY ID ASC, post_type ASC because product is sorted alphabetically above variation_product, but I couldn't get them sorted correctly. I always end up with parent products being sorted higher than variations, just because their IDs are smaller.

SELECT * FROM wp6c_posts WHERE post_type IN ('product', 'product_variation') ORDER BY ID ASC, post_parent ASC;

Obviously I have to query table wp6c_posts twice, once for the simple/parent products, and then for the variations of the variable products, but I can't think of the correct query.

Can someone help me with this?

I want to show the related categories section on the post page dynamically. Can anybody help me with this?

I have a quote website and it has many categories almost 50 with parent child relationship like. enter image description here

What i want is when i open love quote page .. on side bar it will show related categories list to love quotes (child categories i.e boyfriend wishes, cute love quote ). and when i go to any child category page (i.e boyfriend quote) it will show all child categories under that parent one. and so on with all other categories... .

Shortly, i want same scenario as related posts works but i want it with categories list.

I don't know how to do it. there must be a dynamic code that I should put in sidebar right ?

Please help me to do it.

WordPress posts load more button

i have custom php template for display all posts (from ACF). I need display only first 6 and after click on button load another 6.

My code: JS

<script>
$(document).ready(function(){
  $(".content").slice(0, 6).show();
  $("#loadMore").on("click", function(e){
    e.preventDefault();
    $(".content:hidden").slice(0, 6).slideDown();
    if($(".content:hidden").length == 0) {
      $("#loadMore").text("No Content").addClass("noContent");
    }
  });
  
})
</script>

PHP

    $args = array(
        'posts_per_page' => -1,
        'post_type' => 'dluhopisy',
    );
    $the_query = new WP_Query( $args ); 
    if( $the_query->have_posts() ){
        while ( $the_query->have_posts() ){
            $the_query->the_post();
            $the_id = get_the_id();

HTML

<a href="#" id="loadMore">Load More</a>

Related questions

WordPress load more posts after click on button

See also questions close to this topic