HOW TO CREATE YOUR FIRST ANCHOR THEME, PART 2

In the first article we saw the beginnings of a an Anchor theme, as we created the header and got a better understanding how Anchor works under the hood.

In this article it’s time to get our hands dirty in the posts.php file and with the footer in order to finish our very simple Anchor theme.

POSTS.PHP

This is the page where you get all the home page posts, the blog page if you wish, and this is where we’ll perform our main loop and place all our posts.
The first thing we need to do is get the header and open our container:

<?php theme_include('header'); ?>
<div class="container">

After this we can start our loop using an if and a while statement — if you know WordPress you should be familiar with this — after that we get the article title and the date:

<?php if(has_posts()) : while(posts()) : ?>
   <article class="row">
     <div class="row">
        <h1 class="col-sm-7">
           <a href="<?php echo article_url(); ?>" title="<?php echo article_title(); ?>">
               <?php echo article_title(); ?>
            </a>
        </h1>
        <h5 class="col-sm-5"><?php echo article_date(); ?></h5>
    </div>

If you’re familiar with Bootstrap you can probably see that I am creating this in a way that the title will be floated to the left and the date will be placed at the right of the page.

When it comes to the Anchor code I used article_url which gets the url of the given article. I also placed article_title in the title of the anchor link and as the text of the H1 which obviously retrieves the title of the article. In the last line I used article_date to fetch the date the article was published.

After this, we want to get an excerpt of the post content. Unfortunately we don’t have that function in Anchor — we can use article_description but that only returns what we place in the backend custom field not a shorter version of the content — so for this I used the simple php function substr() to cut the string:

<div class="row">
    <p><?php echo substr(article_markdown(),0,250); ?></p>
    <a class="btn btn-primary" href="<?php echo article_url(); ?>">Read More</a>
</div>
</article>
<?php endwhile; endif; ?> 

As you can see I placed that wrapped in paragraph tags and the contents of that post will be cut when the letter 250 is reached.

After this paragraph all I did was add a “Read More” link, and closed the article and the loop.

All we really have left to do in the posts.php page is add the pagination and Anchor also makes that really simple:

<?php if(has_pagination()) : ?>
  <section class="pagination row">
      <ul class="pager">
     <li><?php echo posts_prev(); ?></li>
     <li><?php echo posts_next(); ?></li>
      </ul>
  </section>
<?php endif; ?>

As you can see I first tested if there is pagination and if that returns true I created the pagination section and the pager unordered list that are both for styling purposes. To call the actual links all you really need to do is call posts_prev and posts_next and you get the correct pagination links.

Let’s just close the container div and include the footer and our posts.php is complete:

</div>
<?php theme_include('footer'); ?>

And that is all for our loop part of the home page, all we need to do now is fill in our footer and that will be it for our home page.

FOOTER.PHP

In the footer.php file we simply want to add a small text snippet and a list with all the pages:

<footer class="container">
    <div class="row">
        <div class="col-sm-6">
            Powered by <a href="http://anchorcms.com" title="Powered by Anchor CMS">Anchor CMS</a> and <a href="http://getbootstrap.com"> Bootstrap</a>
        </div>
        <ul class="col-sm-6">
            <?php while(menu_items()) : ?>
                <li>
                    <a href="<?php echo menu_url(); ?>" title="<?php echo menu_title(); ?>">
                        <?php echo menu_name(); ?>
                    </a>
                </li>
            <?php endwhile; ?>
        </ul>
    </div>
</footer>

You can see the only Anchor php code used was for getting the menu items and we have already covered that in the first article,.

We need to run a query that tests for any items in the menu and if it returns any elements it will run the code inside for each one. I simply created an unordered list that shows all the pages inside list items using menu_url, menu_title and menu_name to fetch the correct values for each part.