The Web Hosting Blog of Host Color

In the last post in this column we walked talked about how to install MODx on your HostColor account.   Before we can actually start building our website, it’s important to have a good understanding of the MODx backend manager area as this is where you, as the site developer, will spend most of your time and do most of your work.  Understanding what the different parts and areas of the manager are will make you more efficient and reduce the time you spend looking for things and trying to figure out how to accomplish your tasks.

We start by logging into the backend manager by navigating to http://yourdomainnamehere.com/manager.

Log in using your credentials that you specified when you installed MODx.  This opens the backend manager.  If this is the first time you’re logging in to your site backend after installing MODx, the first page that will load is the site configuration page, where you can make changes according to how you want your site to look.

The main basic things you should change at this point are your website’s name and language and then click Save.  You can look through the other configurations to see if you want to change anything else. In a future tutorial we will look at setting and configuring friendly urls and we will also look at other configuration settings as needed.

Once this is set, you are now faced with the default manager screen that you will see when you log in from now on.  This is the backend that we’re going to explore.

The Resource Tree

On the left of your manager screen is the resource tree. This lists the resources (previously known as Documents) that you’ve created on your site.  To the right of each resource in parenthesis is a number - the resource ID, which comes in handy when creating urls, referencing a specific resource in a snippet call, and so on.  You can right click on a resource and see options such as Edit, Delete, Duplicate, Publish, Unpublish, etc.  One interesting option is “Create Resource Here”.  In MODx, resources can act as “parents” for other resources, kind of like a folder system with the folder itself also being a document.  If a resource is a parent, it will appear with a little + sign to its left, which you can click to expand the view and see it’s “child” resources.  You will see this in action when we start creating resources on our website.  The resource tree will always be present even as you navigate other parts of your backend manager.

• Any resources on the tree that are solid black are published AND appear on the site navigation
• Any resources that are grey are published but do not appear anywhere on the site navigation
• Any resources that are grey AND italic are not published.

The Navigation Tabs

These appear above everything else and allow you to navigate your manager.  The main tabs are on the level above and then clicking on each tab exposes it’s submenu on the level below.  For example, when you have the “Site” tab selected, you see it’s submenu right below with the options Home, Preview, Clear Cache, Search, New Resource, and New Weblink.

We will go through these navigation tabs and see what they allow us to do.

The Site Tab

The site tab exposed a submenu that allows you to perform functions which can be viewed as being related to building and working with the resources of your website.

• Home takes you to the main front page of the manager.
• Preview: clicking on this will open your website in a new tab or window so you can preview it. You can preview any resource at any time (even unpublished resources) by right clicking on it in the document tree and selecting Preview
• Clear Cache: This clears your site cache and is a useful troubleshooting tool if things are not working as expected.  MODx will cache documents and resources to speed up your site, but it’s a good idea to clear the cache after making changes or before doing any site upgrades or changes.
• Search: This allows you to search your resources.
• New Resource: You click on this to create a new resource. Alternatively, you can use the shortcut icons at the top of the document tree.
• New Weblink: We use this to create new weblinks. You will learn more about this as we build our website.

The Elements Tab

This tab opens up options to allow you to work with Elements (previously called resources in former versions of MODx). Elements comprise Templates, Chunks, Snippets, Template Variables, and Plugins.  These are crucial and indispensable to the process of building your MODx website.  We will explore these in more detail as defining them in isolation is not very instructive.  Suffice it to say that elements are what you use to add functionality, flexibility and more to your website.  MODx comes with certain elements pre installed, and we have the ability to install others, or even to create our own.

• Manage Elements: This allows you to see what elements you have and to create new ones. They are neatly organized in tabs by type, so you have a Templates tab, Snippets tab, Chunks tab, Template Variables tab, Plugins tab, and a Combined View tab where you can see all your elements in one go.
• Manage Files: This opens up a file explorer that show you the files in your MODx root.
• Manage META tags and keywords: This is where you go to create, edit, or delete META tags.  Additionally, in this area you can link tags to resources.

The Modules Tab

The modules tab allows you to see, manage, add modules to your MODx install.  Modules are meant to add functionality to your manager.  According to the MODx wiki, modules may eventually be done away with completely and replaced with snippets.  We will occasionally have use for the DocManager module while building our site.

The Security Tab

This tab is all about users and roles and controlling who can and cannot access resources and perform different actions on your site.  You set up your user system and assign roles and permissions in this part of the manager.

The Tools Tab

In this area, you have access to tools to manage your website.  You can make backups, export a static copy of your website, import an HTML website into your MODx installation, and remove locks when users have inadvertently locked them during editing or saving or similar.  The configuration tab opens up the site configuration area that we saw at the beginning where you can come back whenever you need to make changes to your site settings.

The Reports Tab

Finally, the reports tab is the area where you get an overall sense of things that are happening in your website. Logged information about pending actions, manager actions, and system events can be viewed in this area.  Additionally, you can get overall system information in one place which can be very useful when troubleshooting your site.

In this post I have covered the major parts of the manager backend.  This overview is useful because it’s important that you know where to go to complete tasks, check logs, etc.  Now that you have this overall view of the manager, I encourage you to take some time and thoroughly explore the  backend of your MODx website and look at the different tabs.

In the next post, we will start actually using our backend and building our MODx website.  We will also do a little more in terms of specific configurations.  As always, if you have any questions don’t hesitate to head on over to the Host Color Forums and ask away.

About Mary:
I am a part time web developer and full time web enthusiast who is very committed to open source technologies and promoting their potential for use across the web. Some of the technologies that I am involved in are MODx CMS and Drupal.  I am also a fan of Wordpress, SMF, phpBB, and any and all open source endeavors. I enjoy learning new things and teaching people what I know in ways that are simple (I hope) to understand.  You can find me on the Host Color Forums (username is mary), at my blog (The Coding Pad) or follow me on twitter (@einsteinsboi).