To summarize, it’s basically a content management system built on modern PHP technology meant to serve designers who want to show off their skills per article. It can easily be used as a front-end programming playground but also as a very slick and innovative blog.

The great thing about Anchor is that it can be quickly and easily themed. It follows similar theming conventions as WordPress so it’s not at all difficult jumping into it.

File Structure

First, let’s note the file structure. All themes are in the /themes folder at the root of the site. Let’s create a folder called thought-anchor inside and start our development. Here are the files we’ll be creating:

The structure will seem a little familiar; however, you’ll notice readily that there is no index.php and that’s fine. So let me first say that the subfolders are all voluntary. I wanted to keep a LESS version of my theme and compile it into the /css folder along with other files. As you can see, I’m keeping everything very disjointed, again, on purpose.

I won’t be covering the styling nor the javascript, you’re welcome to just copy over my Bootstrap 3 theme repo and add the app.css file for customization.

So, the files:

404.php – Self-explanatory. A basic 404 page template

about.txt – Instead of dirtying up our CSS file with theme information, we use this file. Anchor interprets the information in the file and pulls it in. This file will include the theme’s name, description, author’s name, and author’s site.

article.php – this is the equivalent of “single.php”. This file is used for a single blog article

footer.php – self-explanatory, this is where your footer goes. It gets included from here into all the other files

function.php – similar to WordPress, this file can contain any and all custom functions you’d like to use in your theme

header.php – header template

page.php – single page template

posts.php – This is the equivalent of “index.php”. It contains the list of your articles. It’s used for blog pages and category pages

search.php – the template file for search results

sidebar.php – while not necessary, it’s a file I use to add a sidebar to every page I specify. Easier than copy-pasting, at least to me.

About, Header, and Footer

Let’s start on the basics. Create your theme folder and create the about.txt, header.php, and footer.php files. First, let’s tackle the about file. It’s basically a property:value type file with properties separated by new lines:

First, the title. Anchor has a few neat functions. One of them is page_title, why? Because it allows you to pass through the default page title for a 404. Anyways, pretty self-explanatory outside of that.

We’re linking to our stylesheets. Notice that we have a theme_url function that always refers back to the theme’s root folder. This is pretty useful. Also, why 3 stylesheets? Well, if you read my tutorial on creating modern Bootstrap themes, you’ll find that I talk about separation of CSS. The Bootstrap distribution is pretty vanilla with a couple of variable changes. The theme.css is based off my original Thought Theme. And finally, the “app.css” file refers directly to the anchor implementation. In the future, I’d definitely like to implement some sort of minification to the process.

Taken directly from the Anchor CMS default theme, these little lines of code make it easier for Facebook, Twitter, and Google Plus to figure out what your site is about. Facebook has a bunch of docs available to explain this feature. We’re also introduce to some new Anchor functions. Luckily, I’m sure you can figure these out based on the og properties.

Custom CSS and Javascript. This is where Anchor gets interesting. Technically, you could create this feature in WordPress in no time at all but it’s nice that it’s actually built into Anchor. You can customize every article page on the site via custom per-page CSS and JS.

If you ever fill these two textareas out in the backend, it’ll trigger the customised() function to return true for that article.

For navigation, I obviously used categories. But let’s back up a bit. We’ve got some great functions here:

<?php echo body_class();?>
<?php echo base_url();?>

Body class is basically a way to let CSS know what kind of a page you’re on. If you’re on a posts.php page, it’ll say “posts” and if you’re on the home page as well, it’ll say “posts home”. And base_url is exactly what you’d expect it to be.

The categories function should always be accessible to you when templating. When calling it, you can easily just do a while and use its title and url properties to create a menu or a sidebar widget. To finish off our header, I added a jumbotron with the site’s name and description. The result so far:

Notice that the “if” loop is still opened, I’ll address that (and close it) after I go over this part. Again, same deal as WordPress. We have a has_posts() function that checks if posts are present, then we start the while() loop on posts. I haven’t found a “query_loops” alternative in anchor yet, meaning that the posts loop will only work on the posts and category pages. Next, we have a few (self explanatory) functions:

article_url() gives you an article’s url

article_title() for the title

article_author() for the author

article_date() for the date. I’m also using the date function for the <time> tag. Checkout what it does and it’s importance.

article_description() for its short description

You’ll be entering all of this information per article on the back-end. Checkout the docs to see more of the article related functions. I’m using bootstrap 3’s regular styling so don’t mind some of the “class=”posts”” and “meta” classes, they’re not actually being styled.

So what happens when you have more than the default number of posts? You’ll have to get pagination. Luckily, anchor has that built in:

Line by line. The “else” will ensure that we display SOMETHING to the user when there are no posts. The if(has_posts()) will fail.

Next, I wanted to create a sidebar so we’ll just pre-emptively include it and the same with the footer.

Congratulations! We have our home/category/posts pages done!

Sidebar

Quick, let’s do the sidebar. So technically, Anchor doesn’t have any special “sidebar” functions, widgets, or anything like WordPress does. I decided to tie in the search field with the sidebar so we could actually have one. Again, this is custom.

Those are the entire contents of it. The only anchor-specific thing here is the search_url() function which will give you the url where you need to post your search query. Make sure you’re using “get” and that your search field is named “term”. This will ensure anchor knows what you’re talking about.

Article

Next up is our article page. The flow will be similar to the posts page except we won’t need a “posts()” loop. Here’s what we’re trying to create:

We basically want a left sidebar with meta information and right sidebar with search and content in the middle. Not bad.

You should be used to the flow now. We specified the same meta information for the left sidebar (starting with the col-md-2 classed div), and then we moved onto the main content with the col-md-7 class. You’ll see that the meta information is repeated, this is because it’s information only visible for phones in horizontal/vertical view. The left sidebar disappears in that view. Here’s what it looks like:

I think it looks better than some 100% width meta sidebar. Weird. Anyways, one cool thing we can use is the article_markdown() function which automatically converts your markdown into html.

And last of all, regular sidebar and then footer.

Congratulations! We’re almost done 🙂

Page, 404, and Search

You should have a pretty clear idea on how to build the pages now. Figure out what main function groups to use (article, page, post) and then apply what information you’d like to present on the page (name, url, etc.). Let’s tackle page.

See? Not that hard, we’re, once again, including the header and footer. We’re using our existing html structure and switching a few things out. I left the left (col-md-2) column empty mainly because of possible future use and because of easier styling. It’s not a good practice but get over it :). And again, we have page_title() and page_content() functions that display what we want it to display.

Next up, 404 page. The 404 page, obviously, displays when the user hits a 404 error.

Reminds you of the posts page, right? It works similarly. Instead of using has_posts(), we’re using has_search_results() and then we’re copying our posts template. If there are no results, we’re giving the users a default message. Note that we’re not giving the users the article_description(); however, you can easily add it yourself. I just prefer not to.

What about comments? (optional)

I prefer to use Disqus for commenting because I go through TONS of CMS and blogs and what have you so, here’s how I implemented that. This is an optional step. Create a comments.php file. Paste the following code in:

We’re using Anchor’s built-in commenting function to check if comments are allowed on the page or not. If they are, we use the Disqus snippet to show comments. Now we just need to include the comments file in the article.php file.

Add the following under <?php echo article_markdown();?>

<?php theme_include('comments');?>

And you’re done. Here’s the final result.

Custom Functions

Just like WordPress, Anchor features a functions.php file. Here, you can place functions that you’d like to globally use in your theme. The creator of Anchor made a neat list of them in his default theme. Here’s a sample: