If you have a website, chances are that you'll be updating it at some stage. From minuscule punctuation corrections to changing the banner, it's good to keep your viewers up to scratch on the development of your site. Visitors like to know that they were a part of (or at least informed of) the growth of an entity. Blogs are specifically engineered to be as user-friendly and intuitive as possible when it comes to posting updates, but they aren't necessarily the most potent way to achieve this. As noted in the previous version of this article, other Content Management Systems (of which blogs are a variety) provide much more options with regards to the layout of your site, the displaying of content and the organisation of pages. One such CMS is GetSimple, and plugin developer mvlcek has recently updated his i18n Search plugin to become an incredibly useful and powerful news system.
Reading this, I'm assuming that you know what GetSimple is, as well as how to install it. If you need to know more about that, you can read this introduction.
Mvlcek's i18n Search Plugin acts as an internal search engine for your site. It indexes your pages and outputs results relating to what you searched for. Either you can have a search bar on the page and have the results determined by the newly searched keywords, or predefine specific keywords/tags for the pages that are output. For example, if I make the predefined tag 'news', all of the results on the page will the tag 'news' contained in them. Simple concept. So by setting aside a News page with this modified search engine, we can have an archive of links to all of the desired news entries, which will make your site much more organised than it would otherwise be.
To begin with, you'll need a working installation of GetSimple (note: Fancy URLs should be enabled to make the most of this, but it isn't a necessary aspect of the tutorial). Then proceed to download and install the following plugins from GetSimple's Extend repository:
- i18n
- i18n Search
- i18n CustomFields
Those plugins will be all you need to get the core of this news plugin sorted out. I will post some extras that you can use to enhance it at the end, but otherwise these are the main pieces that you will want.
It's also a good idea to have a visualisation of how you want the articles to be previewed, as well as the information that each post will have.
This is a basic, clear and concise format to show your news in. It illustrates all of the core things that people will want to know, being the:
- Entry title
- Entry date
- Author (and an email link)
- An Excerpt
Extra bits that I've included are a subtitle, an avatar (particularly useful if you have more than one author, so there is a visual indication of who posted) and various share links for social networks (good for making your site more publicly accessible). With an idea in your mind, you're ready to put it to action!
The way that everything works is by pulling information from the relevant fields for a specific page and outputting (in PHP terms, 'echoing') it on the page. Whereas some fields are part of the core of the GetSimple system, others are not, and that is where CustomFields enters the fray. It allows you to define your own fields for near enough whatever use you can think of (within reason). To define your new fields, go to the PLUGINS tab on your admin control panel, then click 'Configure Custom Fields' on the right hand side. You should see this page.
Click on the 'Add new field' link and it'll bring up several fields for you to fill in.
| Name | The variable name it will be given in terms of PHP. Keep this simple and one-worded if possible (as this is case and space sensitive). |
|---|---|
| Label | The name of the field when you see it on the Options section of a page that you're editing. Any relevant, brief name will do. |
| Type | The type of field, of which many are available:
|
| Default Value | The value that will already be there when you create a new page. |
| Index | Ticking will let this field be searchable (i.e. indexed) by the Search plugin. |
The entry title and entry date are already defined in GetSimple (as the page title and either the creation date or published/modified date). So we just need a field for the subtitle, the author, the email address of the author, the avatar for the author and an excerpt.
Define them like so:
| Name | Label | Type | Default Value | Index |
|---|---|---|---|---|
| subtitle | Subtitle | Text Field | Tick | |
| author | Author | Text Field | Tick | |
| Text Field | Tick | |||
| avatar | Avatar | Image | ||
| excerpt | Excerpt | WYSIWYG editor | Tick |
Click 'Save Custom Fields' and you're done with defining the fields! A third of the work has been done.
With our fields defined, we now need to decide on how to show everything on the main page. Some clever setting up is in order here. Go to your PAGES tab and click 'Create New Page'. Name it 'News' or 'Blog' (it's really up to you) and save it. Now when you create your news articles, you will save them in a hierarchy below the news page so that everything is organised easily. It may look something like this:
It just makes pages easy to find when there is a logical structure and/or breadcrumb trail that it leads from. The i18n plugin also makes ordering your pages in such a hierarchy easier, and without it you can only define up to 2 levels of order. Now decide on the page you wish to show the news posts on (this could be on the homepage, the news/blog page or both, it's up to you as I said). On that page, paste this content in:
( % searchresults tags=news order=reverseurl component=rendernews % )
Note: Remove the space between the '(' and '%' and the '%' and ')'
This will call search results of the i18n Search plugin with the tag 'news' in them, then order them by reverse order of their page 'slug' (their id, which if you define correctly will mean that the latest date will always be on the top) and structured by the component 'rendernews' (don't worry, we're soon going to define it). Click 'Save Page' to save it once you're done.
Note: Don't worry if your main page is saying that there is an error now about the component not existing. It will exist after the following actions.
Go to the THEME tab and click 'Edit Components'. Here is where you will render your news articles for the main page. Click 'Add Component' and name it 'rendernews' (or whatever you chose for the component name in the previous paragraph – just ensure that it is exactly the same, case and space sensitivity is required). Paste the following code in:
<!--[Rendered News Article]--><div class="news-article"> <img class="avatar" src="<?php echo $item->avatar; ?>"> <h1 class="title"><a href="<?php echo $item->link; ?>"><?php echo htmlspecialchars($item->title, ENT_NOQUOTES); ?></a></h1> <h2 class="subtitle"><?php echo htmlspecialchars($item->subtitle, ENT_NOQUOTES); ?></h2><div class="meta">Posted by <a href="mailto:<?php echo $item->email; ?>"><?php echo htmlspecialchars($item->author, ENT_NOQUOTES); ?></a> on <?php echo strftime($dateFormat, $item->creDate); ?></div> <div class="excerpt"><?php echo htmlspecialchars_decode($item->excerpt, ENT_NOQUOTES); ?></div> </div>
<!--[/Rendered News Article]-->
Then save it by hitting 'Save Components'.
The absolute basic foundations (and then some, to an extent) have been laid for you to start creating news articles for your site. Now is time to learn the format of creating them.
Mvlcek's ideal with this form of a news manager is that it takes the same format of creation as any other page. That way, you have total freedom with the layout (which you can learn about in the extras of this article) and the news pages can be indexed in exactly the same way as any other page. This makes searching the site friendlier for the user as well as search engines. You may not realise this, but simply by establishing that hierarchy mentioned earlier, you've made it multiple times easier for search engines to tell apart what is news and what isn't. This will help you far more than you'll ever know :P
Now, to start making an article, have an idea of what you're going to write. Make it 2 or more paragraphs and have it typed up in a word processor for ease of access, and in order to have a backup if things go wrong. In your admin console for GetSimple, go to the PAGES tab and click 'Create New Page'
Now fill in the details correspondingly.
| Field Name | Instructions |
|---|---|
| Page Title | Provide the title of your news/blog entry. |
| Slug/URL | This will be the extension after /news/ or /blog/, and the order of the articles will be dependent upon this field. Name it thus: year-month-date-title to ensure that everything is ordered chronologically (eg 2011-10-09-newsarticle would be apt for an article published on the 9th October 2011 that was named 'News Article'. |
| Tags & Keywords | Just give 'news' for now. That will ensure that this page will show up on the News/Blog page. |
| Parent Page | Select the main news/blog page that you set up earlier (i.e. 'News' or 'Blog') to maintain the hierarchy that I keep mentioning. |
| Template | Leave it as default for now. |
| Meta Description | Not important for now. |
| Subtitle | Just a brief, relevant subtitle to the content. |
| Author | Name/Username of whomever wrote the content. |
| Email address of the author. | |
| Avatar | Provide the exact URL to the image of the avatar. |
| Excerpt | Just give the first paragraph of the main body. |
In the last text area field simply paste the body of your article in. Then click 'Save Page'.
View your main news page and the article should be visible now! Here is how they would look without the rendernews component active:
But afterwards:
Of course, you can use CSS to style things up and make them more presentable.
.search-results {}
.news-article {}
.news-article .avatar {}
.news-article .title {}
.news-article .subtitle {}
.news-article .meta {}
.news-article .excerpt {}
Defining each of those should get you what you want, visually, and it really is up to you from here on out to get it looking unique, just like your site! :)
One thing you may want to do is separate the look of the regular content from that of an article. This can be achieved through giving and using a separate template for your news articles.
On the back end of your site (i.e. the control panel of the website, NOT the GetSimple control panel) go to the /themes directory and find the directory of your active theme. Create a file called 'news.php' (or 'blog.php', whichever is relevant to you) and save it (or save an empty notepad file with that name and extension, then upload it to the server in that same directory if the other option isn't possible).
In that file, paste everything from your template.php file, but instead change the HTML markup where the main content will be. Where the code <?php get_page_content(); ?> is, instead paste the following:
<div class="news-header">
<img class=”avatar” src="<?php get_custom_field('avatar'); ?>">
<h1 class="title"><?php get_page_title(); ?></h1>
<h2 class="subtitle"><?php get_custom_field('subtitle'); ?></h1>
<div class="meta">Posted by <?php get_custom_field('author'); ?> on <?php get_page_creation_date($i="l, F jS, Y - g:i A", $echo=true) ?></div>
</div>
<div class="news-content">
<?php get_page_content(); ?>
</div>
Save that, then go into the GetSimple admin panel. Find the article and click on it to edit the page. Where the field 'Template' is (that I earlier said to just leave alone), change it to the file that was just created. See how it's slightly more organised for its purpose and includes more information than before? This is a good way of optimising the look of your pages and defining them as something distinct from ordinary ones. If they have a separate template then they are more identifiable as a piece of news than if they didn't have their own unique look/layout.
Also, the following CSS code will help you. Just change it as you see fit.
.news-header {}
.news-header .avatar {}
.news-header .title {}
.news-header .subtitle {}
.news-header .meta {}
.news-content {}
A good way to improve the dynamic aspect of your site is to allow people to have their on your content. It gives the community a voice, allows you to interact with them and overall can result in an increase in traffic to your site. A precisely engineered comments box (or sometimes called a guest book, depending on its purpose) is a good way to have organised comments on your page, because it allows each individual page to have their own discussion happening (as messages don't just carry over universally like a chatbox does). You can also set it so that the comments box only appears on the news articles themselves, which can limit the amount of spam that you get and keeps pages that don't need guest input uncluttered.
Disqus is an incredible free comments box system that you can use to achieve this, and luckily someone has already made a plugin that integrates this with GetSimple even easier than it would with Javascript. From the Extend repository, download the following plugin:
- External Commenting
Unzip and install it onto your GetSimple site. Set up an account with Disqus and get a shortname (literally, it's just a short name that acts as the id of your site). In your GetSimple control panel, head over to PLUGINs, then 'External Comments'. Select 'Disqus' as the external comment service and paste your short name into the required field. Hit 'Save Settings'.
Now go to the THEME tab and 'Edit Theme'. Find the page that we defined specifically for your news article page (news.php or blog.php) and under
<?php get_page_content(); ?>
paste the following line of code:
<?php get_external_comments(); ?>
Your comments box should now be operational!
But what if you want the articles displayed on the main news archive page to show just how many comments each entry has? Well we can hard-wire this right into the rendernews component!
First you should paste this into the template before the </body> tag and edit the shortname to your own one:
<script type="text/javascript">
var disqus_shortname = 'YOURSHORTNAME';
var disqus_identifier = '<?php get_page_slug(); ?>';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
Save the template and go to 'Edit Components' and find the rendernews component. Decide on where you want this piece of information to be displayed and paste the following there:
<a href="<?php echo $item->link; ?>#disqus_thread" data-disqus-identifier="<?php echo htmlspecialchars($item->slug, ENT_NOQUOTES); ?>">comments</a>
Click 'Save Components' and view your 'News' or 'Blog' page now. This change will not only show how many comments each article has, but it links directly to that portion of the page, so any person clicking that link can be sent directly to the comments box!
A smaller one to discuss now. Social networking has exploded in the last 10 years. From email to message boards to MySpace to Facebook and Twitter, it's never been simpler to get your site noticed by other sites. Simply by having someone who's registered with one of those social networks mentioning or 'liking' or 'tweeting' about your webpage(s), one can have an influx of traffic. As such, this makes it a prudent decision to make your site able to access those mediums with panache and simplicity.
The site AddThis provides a free script with a plethora of all the relevant networking buttons you could ask for. Simply go to the site, click 'Get Code' and the following code should appear:
<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e9032ab51e662ab"></script> <!-- AddThis Button END -->
We will need to slightly modify this for it to be a part of the rendernews component. You see, the url link that these anchors will go to is for the current page, not the one for each individual article. So simply pasting that in will only provide networking links for the 'News/Blog' page. Instead, copy the following:
<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_preferred_1" href="<?php echo $item->link; ?>#"></a> <a class="addthis_button_preferred_2" href="<?php echo $item->link; ?>#"></a> <a class="addthis_button_preferred_3" href="<?php echo $item->link; ?>#"></a> <a class="addthis_button_preferred_4" href="<?php echo $item->link; ?>#"></a> <a class="addthis_button_compact" href="<?php echo $item->link; ?>#"></a> <a class="addthis_counter addthis_bubble_style" href="<?php echo $item->link; ?>#"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e9032ab51e662ab"></script> <!-- AddThis Button END -->
This will ensure that the link is specific to the entry, not the current page. Find the rendernews component and paste that piece of coding wherever you think it needs to be and save it.
So here we have it. A Search module that doubles as a News module, and a damned customisable one at that. You can include any custom field that you make in the future (for instance, a Category field or a Download link field), render the news exactly how you want it and have your pages in the most logical and coherent structure possible, thanks to i18n. When I last published this article, I had a few comments from the developer of the plugin, Mvlcek himself, and I was even able to ask that he allow for custom fields to be included as well. Imagine my surprise when months later this was put into action, and in the best possible way! :)
Thank you for reading this incredibly lengthy tutorial. I hope it has been in depth enough to cover what you wished to know, but not so unwieldy that it was inaccessible. If you have any queries regarding other GetSimple plugins, I'd be happy to review them and/or make tutorials for them too. Until next time, stay safe and voice your opinion if it need be said!
- Mvlcek
- Chris Cagle
- RobA