Creating a search bar that filters the chapters based on that input will require a few codes.
first, go to the theme file editor then to madara>madara-core>manga-single.php
then search for
PHP:
<?php do_action('wp-manga-chapter-listing', $post_id); ?>
then add a form above the code mentioned before
HTML:
<form>
<input type="text" id="search-input" placeholder="Search for chapters...">
<button type="button" id="search-button">Search</button>
</form>
then add an inline javascript to do the
do_action
JavaScript:
var searchButton = document.getElementById("search-button");
searchButton.addEventListener("click", function(){
//value
var searchInput = document.getElementById("search-input").value;
//chapters
var chapters = document.querySelectorAll(".chapter");
//loop
for (var i = 0; i < chapters.length; i++) {
var chapter = chapters[i];
//a quick check
if (chapter.innerText.toLowerCase().indexOf(searchInput.toLowerCase()) > -1) {
chapter.style.display = "block";
} else {
chapter.style.display = "none";
}
}
});
you can add it before or after your form.
note that if you have sidebar widgets with popular mangas or something similar in your manga details page you will need to remove them since they both use the same query
.chapter and the code will filter the first one that will be most likely from your sidebar.
the other safest way is via PHP.
Create a new PHP file in your child theme folder with the name
search-chapters.php
then add the code i wrote below
PHP:
<form>
<input type="text" name="search_term" placeholder="Search Chapters">
<input type="submit" value="Search">
</form>
<?php
if ( isset( $_POST['search_term'] ) && ! empty( $_POST['search_term'] ) ) {
$search_term = sanitize_text_field( $_POST['search_term'] );
}
if ( ! empty( $search_results ) ) {
//Loop
foreach ( $search_results as $chapter ) {
// display the chapter title
}
}
?>
then go to the theme file editor then to madara>madara-core>manga-single.php
then search for
PHP:
<?php do_action('wp-manga-chapter-listing', $post_id); ?>
and add this above it
PHP:
<?php get_template_part( 'search-chapters' ); ?>
i hope it helps...
mangabooth.com
