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
You can just add your code in a
Page
from theAdmin Panel
and let the user change the content:1. Go to
http://yoursite.com/wp-admin
2. Go to
Pages
=>Add new Page
orEdit Page
3. Click on
text
format option and add your code.Now, when the page is displayed, this code will be sent to the browser.