Creating loops to edit custom paragraph and heading in wordpress theme

All right so i have this code set up below for a theme.I want to add loop to this code so that the user to be able to edit the heading and the paragraphs that are listed below according to each section.How can this be achieved?

  <?php get_header(); ?>




 <div class="section">
<div class="jumbotron ">
<div class="container">
  <div class="row">
    <h1><img src="<?php print IMAGES; ?>/logo.png" alt="<?php
    bloginfo('name'); ?>" /></h1>
  </div>
  <img src="<?php print IMAGES; ?>/iPhone.png" class="img-responsive top-buffer-2 left-buffer      pull-right" alt="Image">
  <div class="row top-buffer">
    <h2>Waddup</h2>
    <p class="top-buffer-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="top-buffer-2"><button type="button" class="btn btn-default btn-  lg">Appstore</button> <button type="button" class="btn btn-primary btn-lg">Google Play</button>
    </p>
    </div>
 </div>
 </div>
 </div>



 <div class="section">
 <div class="container bottom-buffer2">
 <img src="<?php print IMAGES; ?>/black.png" class="img-responsive top-buffer-3 right-buffer  left-buffer2 pull-left bottom-buffer2" alt="Image">
  <div class="top-buffer-4 left-buffer2">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p class="top-buffer-3  ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <a href="http://www.apple.com"><img src="<?php print IMAGES; ?>/appstore.png" class=" img-responsive top-buffer-5"  alt="Image" ></a>
 </div>
</div>
</div>


 <div class="section">
 <div class="footron">
 <div class="container">
  <img src="<?php print IMAGES; ?>/Galaxy S3.png" class="img-responsive top-buffer-2 pull-right" alt="Image">
   <div class="row top-buffer-4">
     <h2>Lorem ipsum dolor sit amet</h2>
     <p class="top-buffer-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mol</p>
     <a href="http://www.google.com"><img src="<?php print IMAGES; ?>/googleplay.png" class=" img-responsive top-buffer-5"  alt="Image" ></a>
     </div>
    </div>
    </div>
    </div>


<?php get_footer(); ?>

This is the index.php file

Related posts

Leave a Reply

1 comment

  1. You can just add your code in a Page from the Admin Panel and let the user change the content:

    1. Go to http://yoursite.com/wp-admin

    2. Go to Pages => Add new Page or Edit Page

    3. Click on text format option and add your code.

    text format

    Now, when the page is displayed, this code will be sent to the browser.