title: Wordpress make Ajax call to my theme
body: <p>This is my situation: I have a slide, like the image below,  that needs to be responsive. This slide was created from scratch and its working fine, however it's not responsive.</p>
  
  <p><a href="https://i.stack.imgur.com/rgEoa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rgEoa.png" alt="enter image description here"></a></p>
  
  <p>In order to be responsive I need to know the width of the screen of the user so instead of showing 4 slides, I show 3, 2 and 1 (if its a phone).</p>
  
  <p>With that said, I need my slider to be loaded through ajax and I will pass through params the user screen width.</p>
  
  <p>My theme folder is structured this way:</p>
  
  <pre><code>wp-contents/themes/my-theme
  ...functions.php
  ...header.php
  ...footer.php
  ...index.php
  ...single.php
  </code></pre>
  
  <p>I need to make a Ajax call to <code>functions.php</code> to a function that I have created. So I added the following:</p>
  
  <pre><code>add_action('wp_ajax_posts_list', 'my_ajax_posts_list_handler');
  
  function my_ajax_posts_list_handler() 
  {
      echo 'hello, width: ' . $_POST['width'];
      wp_die();
  }
  </code></pre>
  
  <p>In the <code>footer.php</code> file I added some testing javascript code:</p>
  
  <pre><code>$(function()
  {
      var width   = $(window).width();
      var ajaxurl = '&lt;?php echo admin_url('admin-ajax.php'); ?&gt;'; // Dunno what is this..
  
      $.ajax(
      {
          url: ajaxurl,
          data: 
          {
              action: 'wp_ajax_posts_list',
              width: width
          },
          type: 'GET',
          success: function(response)
          {
              console.log(response);
          }
      });
  });
  </code></pre>
  
  <p><strong>My problems</strong>:</p>
  
  <ol>
  <li>The URL being executed is this <code>http://localhost/wordpress/wp-admin/admin-ajax.php?action=wp_ajax_posts_list</code></li>
  <li>The URL response code is 400</li>
  <li>The URL responde value is '0'</li>
  </ol>