We all know there are a lot of choices when it comes to choosing a CMS for our projects. Sometimes we want something more complex like WordPress or Joomla that allows us to create a bigger site, but other times you just want a simple good looking blog, and for that Anchor CMS may be the perfect choice.
WHAT IS ANCHOR CMS?
Like its website says, Anchor CMS is a lightweight blog system that allows you to create a blog really easily.
Even though it is a lightweight solution it does have some great features that make it shine; such as markdown support, i18n compatibility, drag and drop support, and really simple theming.
On top of all these features we have a CMS that is completely open source and hosted and maintained on Github.
INSTALLING ANCHOR
Anchor CMS has taken the easy, five minute install approach of WordPress, and condensed it into two minutes.
You can check how to install it here.
ADMIN AREA
After you have installed you’ll be redirected to the admin area of your new blog and just by logging in and looking around you can see the minimal approach and effort that was put into building this CMS.
You immediately see where you need to go to add posts, categories or even pages, it’s an intuitive back-end that remains so even after you start editing posts.
If you take your time and look around you’ll figure out all the basics in no time.
One advanced thing you can do Anchor is if you head over to the extend page, that looks something like this:
You can add advanced features to your theme like custom fields and custom variables.
What custom fields do is the same as we are used to seeing in WordPress and by using this you can add custom meta data to your post, like the author name, post thumbnail or anything you please. As soon as you add your custom field it will appear in the post editing page automatically.
You also have custom variables that you can use to create variables that will always have the same value, to avoid over repeating yourself, whether it’s on the theme or even when writing your posts.
Finally site metadata lets you edit things like the website name, choose what page you want as the home page and data like that, it’s basically where you fine tune your website a little further.
CREATING THE HEADER
The structure of an Anchor website is very similar to other CMS’s; we divide the page into sections of content and access it via a loop:
Apart from that, we have a page for functions, one for the search page, a single page, and a template for the dynamic pages. You can also create a one for archives if you wish.
We can start by editing the header.php by pasting in this code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content="Anchor CMS" />
<title><?php echo page_title(); ?> - <?php echo site_name(); ?></title>
<script src="<?php echo theme_url('js/libs/modernizr-2.6.2.min.js'); ?>"></script>
<link href="<?php echo theme_url('css/style.css'); ?>" rel="stylesheet" media="screen" type="text/css" />
<link rel="shortcut icon" href="<?php echo theme_url('img/favicon.ico'); ?>" type="image/x-icon" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
We have the header of the page and as you can see the only Anchor tags we have are:
- site_name() – As the name suggests this function returns the name of the website.
- page_title() – This function gets you the title of the current page.
- theme_url() – Using this function you can get the path to your theme on the server. This is useful for accessing CSS files, JS and images.
Apart from these tags I included Bootstrap’s CSS and the normal tags we place in our HTML static websites.
The next step is to create the navbar for our logo and page navigation also using Bootstrap’s navbar:
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo navbar-brand" href="<?php echo base_url(); ?>"><?php echo site_name(); ?></a>
</div>
<?php if(has_menu_items()) : ?>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php while(menu_items()) : ?>
<li><a href="<?php echo menu_url(); ?>"><?php echo menu_name(); ?></a></li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
</div>
</nav>
In the first part of this code I placed the necessary code for the navbar to work responsively, and to allow us to have the toggle effect. Then in the brand anchor link I set the href to
base_url()
that will point to the home page of your anchor.
After this we need to create the actual navigation and get the pages one by one. For that I firstly test if there are any pages using
if(has_menu_items())
and if that returns true, we add the necessary markup, then a while loop runs through the menu items you have; for each of these items we create an li that points to the link of that particluar page using
menu_url()
and for the text inside the li we simply call
menu_name()
and just like that we have a fully functional and dynamic header.
MOVING ON…
As you can see, Anchor theming works on simple loops. It’s a very simple system to use.
In the second part of this tutorial we’ll move on from the header by creating posts and a footer.
Post a Comment