i cant write english so, one question ,i hope understand you

why code javascript ,no repeat, in post ,every post. i will affect every post image butt not work all post ,only first post working.not other post of course, attachment file image and code index.php my siteenter image description here

<!DOCTYPE html>
<title>hello world </title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/responsive.css">

<!--prog menu home-->
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
 wp_nav_menu( array(
'menu' => 'menu 1',
'items_wrap' => '%3$s' ,
 'container' => '' ,
 'theme_location' => 'navb-header'
) );
<li class="fa fa-bars fa-2x" onclick="openNav()"></li>
<a href="/" class="active">WallTure.Com<i class="fa fa-home fa-2x"></i></a>
<!--end prog menu home-->
<!--prog menu category-->
<div class="chip">
<a onclick="document.getElementById('id01').style.display='block'" ><i id="search" ></i>
<div class="chip">
<a onclick="document.getElementById('id02').style.display='block'" ><i id="box"></i>
<!--start body search-->
<div id="id01" class="modal">

  <div class="modal-content-search animate">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
     Search The In Site

    <div class="container">
      <?php get_search_form(); ?>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn button">Cancel</button>
<!--end body search-->
<!--start body category-->
<div id="id02" class="modal">
  <form class="modal-content animate">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
      Choose Category Wallpaper

    <div class="container">

        <?php wp_list_categories(array(
        'orderby' => 'name',
        'include' => array( 5,6,8,9,10,7,12,11 ) ));

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn button">Cancel</button>

<!--end body category-->
<!--end prog menu category-->

<section><!--start post body-->
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'large'); ?>
<div class="bodypost">

<div class="post-img" >
<div class="ourdownload">
<a href="javascript:void(0)" class="closedownload" onclick="closedownload()">&times;</a>
<div class="download-content">
  <li><?php the_time('d-m-y') ?> | <?php the_time('m-h') ?></li>
 <li> org size : 20*20</li>
 <li> other size : 20*20</li>

<i class="fa fa-download fa-2x post-img-download" onClick="opendownload()" ></i>
<div class="ourinformation">
<a href="javascript:void(0)" class="closeinformation" onclick="closeinformation()">&times;</a>
<div class="information-content">

  <li>our size : 20*20</li>
 <li> org size : 20*20</li>
 <li> other size : 20*20</li>

<i class="fa fa-exclamation-circle fa-2x post-img-note" onClick="openinformation()"></i>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>" rel="nofollow"><?php the_post_thumbnail('large'); ?></a>
<div class="name-post"><a href="<?php the_permalink(); ?>" title="<?php echo get_the_title(); ?>" rel="nofollow">
<?php the_title(); ?>
<div class="name-category"><?php the_category(', ') ?></div>
<?php echo '
function openNav() {
   document.getElementById("myNav").style.width = "100%";

function closeNav() {
   document.getElementById("myNav").style.width = "0%";
function opendownload(){
    var x=document.getElementsByClassName("ourdownload");
function closedownload(){var x=document.getElementsByClassName("ourdownload");
function openinformation(){var z=document.getElementsByClassName("ourinformation"); z[0].style.width = "100%";}
function closeinformation(){var z=document.getElementsByClassName("ourinformation"); z[0].style.width = "0%";}
</script> ' ?>
<?php endwhile; ?>
<?php endif; ?>

</section><!--end post body-->

<div class="number-body">
<div class="numall">
Total Wall : <?php //Count Published Posts Mandegarweb.com
echo $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish'"); ?></div>
<div class="pagination">
<?php if (function_exists('mw_pagination')) mw_pagination(); ?>
<footer>Wallture.com & Wallture.ir beging 2015,2016,2017 continue ...</footer>
// Get the modal
var modal = document.getElementById('id02');
var modal2 = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }if (event.target == modal2){
        modal2.style.display = "none";
  • Please provide the CODE you've tried.
    – Fayaz
    Feb 24, 2017 at 19:38
  • fayaz i cant put code here ,I do not know
    – hamid
    Feb 24, 2017 at 19:57
  • Use pastebin.com
    – Fayaz
    Feb 24, 2017 at 19:58
  • there are so many things wrong in your CODE that I can't even begin to solve them all. I'll give you some hint: (1) Learn how to add Javascript in WordPress properly. (2) Use jQuery and CSS class to manipulate style, don't use ID or inline Javascript event (3) Add wp_head() function call just before the ending </head> tag.
    – Fayaz
    Feb 24, 2017 at 20:10
  • 2
    @Fayaz Please, do not encourage people to link to code outside this page. Instead, let them paste the code in here. If the link is gone, the question can not be understood by any later reader.
    – kaiser
    Feb 24, 2017 at 20:47

1 Answer 1


I think you used #id to set javascript action (event). Use .class in jQuery selector. Open console in your browser and see javascript errors.

  • thanks for you ,but i no use id please see pastebin.com/DiCQiYG2
    – hamid
    Feb 24, 2017 at 20:06
  • hi mehdi bro , see code html, Especially loop main wordpress ????? why no repeat java ???
    – hamid
    Feb 25, 2017 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.