Wednesday, 2 February 2011

MODx Revolution Tutorial for beginners – Part 3 - Your first MODx site

Introduction
Ok, so in the last tutorial, we had a nice introduction to the MODx manager, looked at some important System Settings, had a quick look into Templates, and installed our first add-on.

Today, I’m going to look a little further into Templates, and actually build a new site (based on a free CSS Template).

Building Sites with MODx
In most cases, you’ll design you site in Photoshop, or your graphics program of choice, slice up all the images, then start coding it with squeaky clean XHTML and CSS. Or at least, that’s what we do! One of the nice things about MODx is that it’s incredibly flexible. You can build a site almost completely static, with just a few little MODx features used, or you can go the whole way, producing a dynamic website jam-packed with interactivity and space dust.

By using a CSS template, I can show you how to get your site up and running once you’ve coded it, then add in all those nice MODx features afterwards. The template I’m going to use can be found here. This template contains several different features that lend themselves well to a MODx site, like a site search, recent posts, recent comments, tags, categories and archives.

So after unzipping the template, I can see that it has an index file, folder for the images and a CSS file. These are the only files we’ll need to get the site up and running.



File Upload
So we want to transfer the images into our MODx installation. There are a few different ways that we can do this with MODx Revolution. We could either use an FTP client and simply drag the folders into the “assets/images” folder, or we can use the new file upload feature of MODx Revolution. Seeing as we’re here to learn, let’s do it the MODx way!

In your Manager, click on the Files tab. In the top right-hand corner, you’ll see a little blue and white icon.



This is your MODx Browser! A quick and easy way to see all of the files associated with your installation of MODx. So click on the icon, and your MODx Browser will open up, overlaying the manager screen.

On the left, you’ll see a number of folders. If you go into assets, then click on images, you’ll see all of the files in that folder on the right. Don’t have any images? Good. Me neither. We’re about to sort that out.



Click on the small icon that’s furthest right out of all the icons above the document tree on the left. This will open up the MODx file upload facility. When the file upload box has appeared, click the ‘Add’ button, and browse to the images in the free template.



Once you’ve selected all of them, you should see them all listed, ‘Queued for upload’. Then just click Upload, and you’re done. You should now see all of your images in your images folder.



So that’s the images done, let’s just get the CSS and pop that into our styles.css file. We already linked up our index file and our CSS in the last tutorial, so it makes sense just to copy the template CSS, and paste it into our CSS file. Once you’ve copied the CSS from the template file, you can use the MODx text editor to paste it into. One thing to note here is that the image paths shown in the Template CSS file are slightly different to what we’re going to need, so we need to amend them slightly. Instead of having ‘images/image_name.jpg’, we’ll need to change them to ‘../images/image-name.jpg’. Once that’s done, we’ll go and make the final change to the template.

Template editing
Open up your BaseTemplate (under the Elements tab, and then inside the Templates folder) and copy the contents of the index file from the template file. Paste all of this over whatever you already have in your BaseTemplate. If you hit Save, and refresh your website in a browser, you’ll see that we have a load of ugly, un-styled content. We need to adjust the path to our CSS file in our BaseTemplate.

The line that reads:


<link href="default.css" rel="stylesheet" type="text/css" media="screen">


Needs to be altered to:


<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" media="screen">


Refresh your site now, and you should see something pretty similar to the template we downloaded.



Update the image path of the flowery image in your BaseTemplate, and you’ll be done.



CodeMirror
Going off on a little tangent, I just want to introduce this fantastic add-on. Its best to get this in now, because it can really help you while you’re building your site.

The add-on is called CodeMirror. It makes the MODx text-editors much more user-friendly from a coding point of view. You can download it from Package Management (Remember when we installed TinyMCE in the last tutorial??) and it can be found in MODx Add-ons > RichTextEditors. Once you’ve downloaded and installed it, you’ll notice that your BaseTemplate now has text highlighting and line numbers. It may be small, but it’s much easier to manage all of your coding inside MODx with this add-on.

MODx-ing your template
Now, we’ve essentially got a one page static site, with all of the code being stored in our BaseTemplate. But we’re using MODx, so we should take advantage of some MODx tags to help us along the way.

In all honesty, the coding shown in the BaseTemplate (that we got from our free template) is a little outdated. I’m going to update it, and add a few MODx tags in one sweep.

The current head tag looks like:


<meta equiv="content-type" content="text/html; charset=utf-8">

<title>Premium Series by Free CSS Templates</title>

<meta name="keywords" content="">

<meta name="Premium Series" content="">

<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" media="screen">


I’ve changed mine so it reads:


<meta charset="[[++modx_charset]]">

<base href="[[++site_url]]">



<title>[[++site_name]] | [[*pagetitle]]</title>



<meta name="description" content="[[*description]]">

<meta name="keywords" content="">



<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" media="screen">




Apart from adding a few MODx tags, I’ve added an HTML5 DOCTYPE, a base href tag and a meta description tag. This keeps things nice and up to date. We’ve also removed some of the bits that aren’t required when a HTML5 DOCTYPE is declared.

So let’s just take a look at each of the MODx tag and explain what they’re doing:

[[++modx_charset]] – This is the character encoding that is used for your site. You selected it during installation. MODx primarily works with UTF-8.

[[++site_url]] – This is the URL of your site and was determined when you installed the site.

[[++site_name]] – This is the name of your site, as specified in the System Settings.

[[*pagetitle]] – This is the title of each of your resources. The only one we have at the moment has the title of ‘Home’.

[[*description]] – Again, this is specified in your resources. This tag is very handy for the SEO of your site as generally, the content of the description tag is shown in the Google search results (other search engines are available!)

So if you now Save your BaseTemplate, and refresh the website, you won’t see too much change, but if you view the source, you’ll be able to see exactly what we’ve done.



Summary
In the next tutorial, we’ll look further into Chunks, and why they’re so cool.

If you have anything to say about this tutorial, or how it could be improved please feel free to leave a comment.

If you need help with a MODx website, why not give us a call or get in touch?

29 comments:

Phil Turpin said...

Cheers for these tut's, they serve as a great primer.
They've been a real help - the MODX wiki's a little to complex from the very start.

Jeff said...

I agree with Phil above^...

Amit said...

Read part 3 and now my site is also running :) waiting for next article with some complex tasks using MODx.

Anonymous said...

very very great tutorial. Can hardly wait to your next tut's :)

K Sarah said...

Thanks for the finnal tutorial for MODx Revolution. I am a Minnesota website designer..I hope to see more post like this.

ajay ak said...

Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
Webdesining course in chennai

Jeannie Hyatt said...

The information you have posted is very useful. dsploit OGYoutube magisk manager

yogesh kumar said...


This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
WordPress development company in Chennai

sunil kumar said...

Thanks for posting useful information.You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...Really it was an awesome article...very interesting to read..please sharing like this information......
PHP interview questions and answers | PHP interview questions | PHP interview questions for freshers | PHP interview questions and answers for freshers | php interview questions and answers for experienced | php viva questions and answers | php based interview questions

jhon said...

I had a topic for project given by my instructor last weekend but I don’t know anything about it. It would be a huge favor if someone adds some information about the topic. You can find best ideas here. The topic name is MODx Revolution and I didn’t find anything informative about it. If anyone out there knows anything about it then do tell me.

armish said...

Most of the users create site in Photoshop, or in their graphics program, by slicing up all the images, then twitch coding it with shrill clean XHTML and CSS. You can look here and find more statistics. Another best thing about MODx is that it’s extremely bendability. You can build a site almost totally stationary, with just a few slight MODx topographies used.

Roman said...

By utilizing a CSS template you can display how to get your site up and dealing once you’ve coded it, then include in all those nice MODx topographies later. It was indeed a helpful way of information spss statistics helphttp://www.spsshelp.org/professional-help-with-spss-statistics-online/ in various ways. The template mostly people are using can be found at various platforms. This template comprises numerous dissimilar features that lend themselves well to a MODx site.

VRITPROFESSIONALS said...

Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.

Thanks & Regards,
VRIT Professionals,
No.1 Leading Web Designing Training Institute In Chennai.
Web Designing Training Institute in Chennai
SEO Training Institute in Chennai

Anonymous said...

A debt of gratitude is in order for sharing such a decent information about the college. I likewise love to watch this go to this site since it is the best diversions occasion dependably. I am sitting tight so long for this occasion.

Anonymous said...

The rule favored viewpoint of online direction is that you can chat with all the understudy of the world and you can share and get all kind of information. Utilizing this good site you are contact with electronic life certainly. In case you're looking any believed associations for your structure work, you should check this site.

Assignment Experts said...

Get affordable Best Assignments Help with professional writers. Contact us today to avail up to 20% Discount. Ordering for the first time? It’s your lucky day, Best Assignments Help offers up to 30% off on your first order. Our experts are working on all over the world and still now they solve 1000+ assignments.

John Hawk said...

I agree with this post. Keep sharing the blog like this.

Finance Dissertation Writing

kristen said...

Students Assignment help offers the assignment proofreading help outstandingly for all students according to their requirement. we offer you appropriate academic writer when you want to take our management studies related services.

AvaHill said...

After looking at a number of the blog articles on your site, I seriously like your way of blogging. I added it to my bookmark webpage list and will be checking back in the near future.BTW check useful online grade calculator .

reginald surict said...
This comment has been removed by the author.
Ciana Langham said...

Hello everyone! After reading this post I found a lot of new things for myself. By the way, if there are people who need some writing help then it's time to apply to the essayswriters com It is one of the best writing services that I have ever used. My recommendation.

Jacob Ethan said...

I find this article useful. Kindly share more such articles so that I can get better insight.

phd dissertation writing help

mba dissertation writing services

dissertation proposal writing services

management assignment writing service

masters dissertation writing services uk

Sadhana Rathore said...

Very nice post with lots of information. Thanks for this updates.
ui ux design course in Chennai
ui design course in chennai
ui developer course in chennai
Ethical Hacking course in Chennai
Web Designing Course in chennai
Web development training in chennai
PHP Training in Chennai
ui ux design course in Anna Nagar
ui ux design course in Vadapalani
ui ux design course in Thiruvanmiyur

Unknown said...

Such an amazing blog with new updates. I love to learn more about this topic. Waiting for more like this.
Microsoft Dynamics crm Training in Chennai
Microsoft Dynamics Training in Chennai
Microsoft Dynamics crm Training institutes in Chennai
Salesforce Training in Chennai
AngularJS Training in Chennai
Tally course in Chennai
ccna course in Chennai
Microsoft Dynamics crm Training in Velachery
Microsoft Dynamics crm Training in T Nagar
Microsoft Dynamics crm Training in OMR

divi said...

thanks for your information really good and very nice web design company in velachery

Kathy said...

Thanks for the post. You have clarified the subject in very simple and step by step.
minnesota web design

Bala said...

Nice Blog!!! It was a very knowledgeable blog with depth content and will surely encourage for many posts to updates them.
Oracle Training in Chennai
Oracle Training
Social Media Marketing Courses in Chennai
Tableau Training in Chennai
Primavera Training in Chennai
Unix Training in Chennai
Job Openings in Chennai
Pega Training in Chennai
Oracle DBA Training in Chennai
Power BI Training in Chennai
Oracle Training in Velachery

Sivanandhana Girish said...

This stays as one of the best and attractive post I have read yet. Great sharing this post.
Spoken English Classes in Chennai Anna Nagar
Spoken English Class in Porur
Spoken English Class in Vadapalani
Spoken English Class in Thiruvanmiyur
Spoken English Class in Chennai
Best English Speaking Classes in Mumbai
English Speaking Course in Mumbai
IELTS Training in Chennai
IELTS Coaching in Chennai
IELTS Mumbai

meldaresearch said...

For the best Legitimate Custom Coursework Writing Services, find the best Online Coursework Writing Service Provider for all your Custom College Coursework Services.