Summer Sale: You can get 1 year of the Everything Club for $59! Save $85!
  Offer ends in 1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

| Joomla

In our classes we've talk about the SCAM workflow that makes building Joomla 1.5 websites much easier:

  • S: Go to Section Manager and create sections
  • C: Go to Category Manager and create categories
  • A: Go to Article Manager and create articles
  • M: Go to Menus and create menu links

That 4-step process is the key to building a site. A lot of people's confusion with Joomla comes from not knowing about that workflow. They try to create articles first and then realise they have no way to organize them. Or they create sections, categories and articles then wonder why they aren't visible on the site (they haven't made a menu link so that people can see them).

But what if this workflow could be done much more quickly? That's what we're going to explain in this tutorial using a component called MassContent.

  • Step 1: Go to Baticore.com and download Mass Content via this link.
  • Step 2: Go to Extensions >> Install / Uninstall and install the file (called com_masscontent)
  • Step 3: Go to Components >> Mass Content >> Create Mass Sections
  • Step 4: Enter the titles for all your sections, check the box saying "Copy Title to Alias" and then click Save.
How to Create a Joomla Site Quickly
  • Step 5: Go to "Create Mass Categories" and repeat the process. Make sure you put the categories in the correct section, using the dropdown on the right-hand side.
How to Create a Joomla Site Quickly
  • Step 6: Go to "Create Mass Content".
  • Step 7: Click on "Parameters" in the top-right and choose your setting. How many articles do you want to create? Do you want to use the WYSIWYG editor?
  • Step 8: Write your articles. You can either just write the title and fill in the rest later or you can actually create the full articles directly from this screen.

Video on How to Use Mass Content

| Joomla

This is a very simple trick that many people seem to miss ... you can create your own module positions from inside of Joomla. Here's how to do it:

  1. Go to Extensions >> Module Manager and open up any module. You'll see page looking like this:
    How to Create New Joomla Module Positions
  2. Place your cursor in the "Position" box and hit backspace. You'll be able to delete the position name:
    How to Create New Joomla Module Positions
  3. Type in the name of the position that you'd like to create:
    How to Create New Joomla Module Positions
This makes life much easier if you want to use other techniques using modules, including placing modules into articles.

| Joomla

Most of our ideas for tutorials come from people's requests and this is no exception. Someone asked me the other day ... "How can I really see what an article is going to look like when I publish it?".

Normally, if you're writing an article and click Joomla's "Preview" button you get a plain white page with no template, no modules and no styling. The real-life page will look very different. So, here's how to get a really good preview of Joomla articles:

We're going to use a plugin called (appropriately) Better Preview. Here's how you do it:

  1. Download the Better Preview plugin from NoNumber.nl.
  2. In the administration area of your Joomla site, go to Extensions >> Install / Uninstall and upload the file to install. The plugin will publish automatically.
  3. Go to write a new article and a button saying "Preview" will appear in the top-right of your screen.
  4. Click that link to see the article with the correct template, modules and styles.

One extra benefit is that you'll also be able to see the URL of page. Joomla's normal preview appears in a pop-up so you don't know where it will be located.

| Joomla

This week we'll walk you how to manage the files on your server through your Joomla Admin, using a Joomla component.

We're going to use a component called NinjaExplorer

Here's how you do it:

  1. Download NinjaExplorer
  2. In the administration area of your Joomla site, go to Extensions >> Install / Uninstall and upload the file.
  3. In the administration area of your Joomla site, go to Components >> NinjaXplorer and you will have access to your server directories and files.

This tool can be used to upload files, delete files and edit files (amongst other things) just as you would do with an FTP client.

Be sure you don't delete anything you don't know the purpose of - and this is a good time to remind you to back up your site regularly! (see our newsletter on moving your site from local to live server and use the technique mentioned to back up your site).

| Joomla

Following on the newsletter from last week where we talked about developing locally and moving your site to a live server, this week we're going to walk you through installing Joomla locally, on a Mac.

We're going to use MAMP for this tutorial.

Here's how you do it:

  1. Download and install MAMP to your Applications directory.
  2. Download the latest Joomla 1.5 zip file.
  3. Start MAMP by double clicking on the MAMP icon in your Applications/MAMP directory.
  4. Once the servers have started, a browser window should open to the MAMP start page. If not, click on the 'Open start page' in the MAMP window.
  5. Set up your database for Joomla by clicking on the phpMyAdmin link in the start page and inserting the name you wish to use for your database in the 'Create new database' field. **For all databases created in MAMP the default username / password is: root / root, and the Host Name that you will use when installing Joomla is: localhost.
  6. Copy/move the downloaded version of Joomla 1.5 to your Applications/MAMP/htdocs directory and unzip the file. Leave a copy of this zip file in the htdocs directory for easy creation of multiple Joomla sites ... just unzip the file each time you wish to have a new Joomla installation!
  7. Rename the unzipped folder to mysite (or whatever you wish).
  8. In your broswer navigate to http://localhost:8888/mysite (or whatever name you gave your directory).
  9. Run through the Joomla installation process and voila! (need help installing Joomla? See: http://help.joomla.org/content/category/48/268/302/)

You should now have a shiny new installation of Joomla on your Mac where you can develop your website securely in your local environment.

Video Showing How to Install Joomla Locally on a Mac

| Joomla

Often you have pages on your website that you want to keep private - either for your staff or for you registered members.

This week we'll walk you through how to keep search engine bots from indexing certain articles.

Method #1

    Registered Joomla
  1. In your Joomla Admin panel, go to Content >> Article Manager and open the article you wish to keep private.
  2. On the right-hand side under "Parameters (Article)" you will see a field labled "Access Level".
  3. If you set this to "Registered" then only people at the "Registered" user level and above will be able to see the article.
  4. If you set this to "Special" then only people at the "Author" user level and above will be able to see the article.
Click here to see a list of the different Joomla user levels and what they can do.

Method #2

  1. Nofollow JoomlaIn your Joomla Admin panel, go to Content >> Article Manager and open the article you wish to keep private.
  2. On the right-hand side under "Metadata Information" you will see a field labled "Robots".
  3. You can write "noindex" into this box and search engines should recognize that this page should not be indexed

To verify that this has worked, visit the secret page on the front of your site and click "View Source" in your browser. If everything has worked correctly you should be able to see a line in the code looking like this:

< meta name="robots" content="nofollow" / >

(we've added spaces around the < and > signs so you can see the code)

| Joomla

This tutorial is a response to a question we've been asked often in classes:

"How can I resize images as I upload them?"

We're going to recommend Image Resize. It works so naturally with the Joomla workflow that most people don't even notice it. Here's how to use it:

  • Step 1: Visit Joomlaforge.net and download the file called plg_imageresize_v.5.zip
  • Step 2: In the administration area of your Joomla site, go to Extensions >> Install / Uninstall and upload the file.
  • Step 3: Go to Extensions >> Plugin Manager. Find "Image Resize" and enable it.
  • Step 4: Go to Content >> Article Manager and edit an article.
  • Step 5: Click on the image link at the bottom of the article and upload an image. Insert it into the article.
  • Step 6: Select the image and drag the corners until the image is the size you want it to be.
  • Step 7: When you view the article on the frontend, Image Resize does all the work for you and creates a new version of your image!

| Joomla

Many people like to develop their Joomla sites locally and then move their work to a live host when completed. This weeks tutorial will show you how to move an exact copy of your site from your localhost to a live server, database and all.

We're going to use a fantastic component called Akeeba Backup to help us with the process. We'll first use it to make a backup of our local site (files + database), and then we'll use a provided tool (Kickstart) to restore the backup to our live server.

Here's how you do it:

  1. Download the Akeeba Backup component. Make sure you get the latest release, which at the time of this newletter is 2.2
  2. Download the Kickstart app, again making sure you ge the latest release, 2.2Stable - unzip the package for later use.
  3. In the administration area of your local Joomla site, go to Extensions >> Install / Uninstall and upload the Akeeba Backup component file: com_Akeeba Backup-2.2-free.zip
  4. In the administration area of your local Joomla site, go to Components >> Akeeba Backup >> Configuration and we're going to change a setting before we backup and migrate. Click on the 'Advanced' tab and then locate the 'Archiver engine' and change it to 'JPA Akeeba Backup Archive, and click Save.
  5. Click on the Backup Now button (you'll notice a warning regarding the default directory being used for the backup - we can ignore this *for now) and then the 'Backup Now!' You should see the backup process begin, and be given a success page when completed.
  6. Locate the backup file in your localhost joomla_root/administrator/components/com_Akeeba Backup/backup - the backup file will have the extension .jpa. Upload this file to the directory on your live server where you will do the restore. For most this will be the root directory, /html or /home etc
  7. Upload the Kickstart app file to this same directory. You should have unzipped the package in an earlier step, if not, unzip and then upload the file.
  8. Create a new database using phpMyAdmin or the tool provided by your host to do so. This new database will be used for our restore to populate with our backed up data. Make note of the hostname, username/password and database name for further steps.
  9. Navigate in your browser to http://backup_directory/kickstart.php (where backup_directory is the directory your backup file is located). Insert your Host, Username, and Password information and click on the green Start button. You will see the process beign - do not close this browser window!
  10. Once the file extraction is done you will see a message to 'Please click here to open Akeeba Backup Installer restore script in a new window'. Click there.
  11. A new window will open, and you will see a typical looking Joomla installation page, however this is the restore script. Go through the installation process, making sure you put your new information for hostname, username, password and database in Step 4.
  12. After successful Joomla installation (restore in our case) go back to the other browser window and click on the link to restore your .htaccess file if you need to do this step, and close the browser window when done.
  13. The restoration process should now be completed, and you can log in to your newly moved site at /administrator to continue development on the live server.

| Joomla

Having a fast site is really important:

"For Google an increase in page load time from 0.4 second to 0.9 seconds decreased traffic and ad revenues by 20%. For Amazon every 100 ms increase in load times decreased sales with 1%." source

These are two easy ways to make sure your Joomla site loads more quickly:

Turn on Compression

You can choose to send out your webpages in a compressed format. When you get a Joomla component it is often contained in a zip file. This enables the file to be much smaller without damaging the content in any way. You can do the same thing with webpages. In Joomla you just need to click "Yes" in the following place:

Site => Global Configuration => Server => GZIP Page Compression => Yes

There's also a great test to find out how much your site will benefit. According to WhatsMyIP.org, JoomlaTraining.com shrinks from 13k down to just 4k when GZip is enabled

Turn on Cache

Caching is another way to speed up your site. It stores files so that Joomla doesn't have to load the same elements every time. Why load the logo again on every page? Its best just to store it and reuse. It can turn on caching here:

Site => Global Configuration => System => Cache => Yes

The speed gains with caching can be remarkable. Last year there were problems with the cache systen we use here on one of our sites. We turned it off while we tried to bugshoot the issue. We also use Pingdom.com to track whether our sites are offline and also how fast they're responding. When we logged in later, there was a stellar argument for why caching your Joomla site is so important: the site loaded twice as quickly with the cache turned on.

cacheoff

| Joomla

Joomla templates allow you to redesign your site easily. modulesuffixesThey also allow you style your modules. Your login box can have one color, your "Latest News" can have another color and your "Most Popular News" can have third.

This image is an example using the Bolt template.

  • Red header, white background.
  • Orange header, orange background.
  • Yellow header, white background.
  • Green header, green background.

Here's how you do it

  1. Go to the administrator area of your site and Extensions >> Module Manager.
  2. In the parameters of your module, on the right-hand side, you'll see a box saying "Module Class Suffix".
  3. You'll have to read the documentation for your template to know what to enter - each template is different. If you're using Bolt you could enter any of these:
  • -red (Red header, white background)
  • -orangebg (Orange header, orange background)
  • -yellow (Yellow header, white background)
  • -greenbg (Green header, green background)
This example would give us a red header and white background:

How to Use Joomla's Module Suffixes

| Joomla
Joomla Training Cheat SheetFor the first time we're not sending a tutorial this week, but a download link: http://joomlatraining.com/cheatsheet.pdf

This is a condensed version of the beginner class. All the most important information is contained in just two PDF pages.

Please feel free to print this out and keep with you whenever you need reminding of Joomla's core concepts.

| Joomla
In our beginner classes we teach that module are small blocks of content around the outside of a Joomla site ... top, right, left, bottom.

Now that you're a little more familiar with Joomla, let's see an exception to that rule ... we can place modules inside regular text articles.

  • Step 1: In the administrator area of your Joomla site, go to Extensions >> Plugin Manager
  • Step 2: Find the plugin called "Content - Load Module" and make sure that it's enabled. On Joomla 1.0 its name is "Load Module Positions"
  • Step 3: Go to Extensions >> Module Manager and find the module you'd like to place inside an article.
  • Step 4: Open the module and click on the "position" dropdown.
  • Step 5: Choose a position that doesn't appear on your template. Remember that you can check this by adding /?tp=1 to your site.
  • Step 6: Save that module in its new position. In this example we've saved it in "User1"
  • Step 7: Go to Content >> Article Manager and open the article you're using.
  • Step 8: Place this code into the article: { loadposition user1 } ... remove the spaces between the brackets and the text. If you're using Joomla 1.0, then the code is {mosloadposition user1} .
  • Step 9: Save the article and check your handiwork on the front of your Joomla site.

Video Showing How to Place Modules Inside Joomla Articles

| Joomla

Sometimes you have text, an image or even code that appears on many places throughout your Joomla site. Normally, updating is a slow process:

  • Open page
  • Make change
  • Close page
  • Repeat ad infinitum

Wouldn't it be nice if you could search and replace just as you do with a Microsoft Word document. You can! Here's how to do it:

  • Step 1: Click here and download an extension called ReReplacer.
  • Step 2: In the administration area of your Joomla site, go to Extensions >> Install / Uninstall and upload the file.
  • Step 3: Go to Components >> ReReplacer and click "New" in the top right hand corner.
  • Step 4: Enter your existing text, image or code in the filed labelled "Search"
  • Step 5: Enter your new text, image or code in the filed labelled "Replace"
  • Step 6: Click Save and repeat as often as you need!

| Joomla
sobi1.pngThis tutorial which will show you how to create a business directory or Yellow Pages on your Joomla site. We're going to use a component called Sobi2, which is available from www.sigsiu.net.

Installing Sobi2

  1. Click here to download the Sobi2 component.
  2. Go to Administrator >> Extensions >> Install / Uninstall and upload the Sobi2 files.
  3. Click "Install Sobi2 data"
  4. Go to Menus >> Main Menu and click "New"
  5. Choose Sobi2 >> Frontpage or Selected Category for your menu link. Give the link a title such as "Directory" and click save.
  6. Visit the front of your site and click on the new "Directory" link. It should look like the screenshot on the right:

Configuring Sobi2 With Your Site Details

The first thing we'll do is put our own website's information into Sobi2:

  1. Go to Administrator >> Components >> Sobi2 >> General Configuration.
  2. Under the "General" tab, change the first field "Component Name" to reflect the name of your directory.
  3. Under the "Mainpage"tab, change the first field "Description of Component" to describe your directory.
  4. Under the "Mainpage" tab, you may want to change "Image for Description" to "- Select an Image -" so that you can hide the default image.

Creating Business Categories

Next, we'll set up the categories we're going to use for the businesses:

  1. Go to Administrator >> Components >> Sobi2 >> All Entries
  2. Click on "Add Category" and start to create your structure.
  3. If you already have a list of the categories you want to use, click "Add Multiple Categories" and you can insert a list.

Choosing Business Details

Depending on where and what kind of business listings you have, you'll need to collect different kinds of details. U.K. and Canadian sites might be happy with collecting "Post Code" but U.S. sites will need to change that to "Zip Code".

  1. Go to Administrator >> Components >> Sobi2 >> Custom Fields Manager
  2. Click on "Add New" in the top-right corner to add new details.
  3. You can choose to charge for extra information. For example, business might be an extra $5 to have their phone number listed and an extra $10 for their website link.

Collecting Payment

Yes, we did mention that you can have paid listings. That service is free with Sobi2. Once you've set up your fields using the above steps, you can enter your payment information:

  1. Go to Administrator >> Components >> Sobi2.
  2. Click "Configuration" on the left-hand side and then "Payment Options" will appear.
  3. PayPal is available by default so enter your business information including a Paypal email address in "Email Address" and a Thank You page link into "Return URL"
sobi2.png

| Joomla

Our teachers like to explain in Joomla beginner classes is that we're not Joomla cheerleaders. We love Joomla, but it has strengths and weaknesses like all software. Perhaps the biggest current weakness is user levels.

Joomla has 8 user levels but they are both basic and also often difficult to understand. Here is an explanatory chart of the levels that some of our students have found useful. (Original source: http://brian.teeman.net/joomla/65-joomla-15-acl-explained)
Understand Joomla User Levels and Permissions

 

| WordPress
Perhaps the #1 most common question we get from beginners is: "How do I change the logo on a Wordpress theme?" This tutorial is the answer:

  • Step 1: Go and download the Firefox browser, if you haven't done so yet: http://www.mozilla.com/en-US/firefox/personal.html. Firefox is much better than Internet Explorer or Safari for working on websites.
  • Step 2: Start Firefox so that you're browing the web with it. We're now going to install an extra toolbar for Firefox. It is called the "Web Developer" toolbar. Visit this page: https://addons.mozilla.org/en-US/firefox/addon/60
  • Step 3: Click "Add to Firefox" and follow the instructions, including restarting Firefox.
  • Step 4: The next time you open Firefox, you will see a list of links that starts with "Disable", "Cookies", "CSS" and ends in "Options":
Wordpress and Firefox Toolbar

  • View Image InfoStep 5: Browse to the website where you want to change the logo. We're going to use http://wordpress.org for this example.
  • Step 6: In the toolbar, click on "Images" which is the 5th link from the left. Then click "View Image Information" from the dropdown.
  • Step 7: You will now see a list of all the images on the site.
  • Step 8: Scroll down until you see the logo. You will see two pieces of information about it: Location ( http://s.wordpress.org/style/images/wordpress-logo.png ) and Size ( Width = 301 pixels, Height = 52 pixels ).
Wordpress Logo
  • Step 9: You need to make a new logo that is the same width and height as the old.
  • Step 10: Use your favorite file manager to upload the new logo to the location you found in Step 8. It is better to rename rather than delete the old logo. You could call it logo-backup.png for example.
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!