SPECIAL OFFER! Get 1 year of access to everything in OSTraining for only $59! You save $85!
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

| Drupal

This tutorial will show you how to install a module in order to add new functionality to your Drupal site. Modules are user contributed add-ons for Drupal which allow you to extend Drupal’s core functionality. Let's get started!

Read more ...

| WordPress
Post by Email to Your WordPress Blog

By default WordPress allows you to write posts on your WordPress blog simply by sending an email.

However, as the video below makes clear, that default feature is fairly limited.

In this tutorial we'll show you how to set up your blog so that creating your posts by email is both fun and easy. The solution is the Postie plugin.

Read more ...

| Drupal

This tutorial will show you how to take a block and place it inside a Drupal node.

Often this is done through one of two methods:

  1. With modules such as Panels or Context which allows you to easily place blocks and many other Drupal items inside nodes.
  2. With PHP code snippets.

However, sometimes Panels and PHP are too complex and you need a quicker and easier solution. Enter the "Insert Block" module. Here's how to use it:

Read more ...

| Development

JForm is one of the most exciting new features to be introduced as part of Joomla! 1.6. The intention is to provide XML configurable forms complete with custom field types and form validation. I cannot stress enough just how much easier this is going to make life as a Joomla! developer. In this article we take a look at how to define JForms and how to display them.

Read more ...

200 Joomla Drupal WordPress ClassesLast year in early December we reached a key milestone in our growth: 100 live classes.

That landmark coincided with the holiday season so we celebrated by giving back: we held a free class for 16 non-profit organizations in Atlanta.

Fast forward almost a year and last week we hit another milestone: 200 live classes!

Those Joomla and Drupal classes were held all across North America and England, from Los Angeles to London and from Vancouver to Miami.

This year's landmark also coincided with the holiday season and so we've decided to give back again, only bigger and better:

Read more ...

| Drupal

This tutorial is designed to do two things:

  1. Show you how to sort Drupal nodes alphabetically
  2. Introduce you to the Views module

Views is, without question, the most important Drupal module that is not in the core. It allows you to use a graphical interface to sort and organize all your nodes. It a powerful but also complex module and it can take a lot of time to learn all its features. This tutorial will only help you get your feet wet.

This particular tutorial was inspired by a site member who had the contact details of many employees stored as nodes. They wanted to make an alphabetical directory of all the staff members.

Read more ...

| Drupal

Creating a photo gallery is the same as with most things in Drupal: there are many different ways to reach your goal.

In this tutorial we're going to show you the quickest and easiest way: using the Node Gallery module.

Read more ...

| WordPress

This tutorial will show you how to move a WordPress site from one folder to another.

In our example we're going to move the WP site from a folder called /blog/ and place it in the root of our site. That means that instead of accessing the site from http://example.com/blog/ we can now go directly to http://example.com.

Read more ...

| WordPress

This tutorial will show you how to split a long WordPress post or page into several sections. People will click 1, 2, 3 to go to the first, second or third page respectively.

Open Up A Post or Page

tutuploadsmedia_1287691422863.png

In order to split a post or page, we need to edit it directly. Go ahead and open up the post or page and then clck HTML in the top right corner.

Insert the Pagebreak Code

tutuploadsmedia_1287691463054.png

Insert this code into the article anywhere you want a pagebreak:

tutuploadsmedia_1287691558164.png

Save the post or page and visit the front of your site. You should that pagination has now been created at the bottom of the article.

| Drupal

One of the most frequent questions we've had in our Drupal training classes is ... "Does Drupal have a good file manager?".

The class attendees had often found solutions, but they were cobbled together from an assortment of modules and often lacked common features in file managers.

Our answer is Filedepot, which is an advanced file manager that works right out of the box and relies only on the CCK and Filefield modules.

Read more ...

| Drupal

One of our students was having problems finding why some images were visible on her site and others weren't. There's no one-size-fits-all answer to this problem, but here is one way to start closing in on the answer.

Install the Web Developer Toolbar for Firefox

tutuploadsmedia_1285351295463.png

If you haven't done so already, install Firefox on your computer. You can download it from http://www.mozilla.com/firefox/

Then, with Firefox open, search Google for "webdeveloper toolbar".

tutuploadsmedia_1285351326632.png

Click "Add to Firefox" and you'll be able install the Web Developer toolbar. It will look like the image below.

tutuploadsmedia_1285351522513.png

Troubleshooting Your Site

tutuploadsmedia_1285351146976.png

The image above is a sample Drupal node. It is meant to have two images but one is missing. Here's how we'd start to look for the error:

tutuploadsmedia_1285351643825.png

Click "Images" and then "Find Broken Images". You'll see a result like the one below:

tutuploadsmedia_1285351709621.png

In this case the problem is obvious - I've written http://drul.org instead of http://drupal.org. However if your problem is more difficult, this technique will still tell you where Drupal is looking for the file and hopefully it will give you enough hints to fix the problem.

| Drupal

This tutorial will show you how to move your Drupal site from one server to another. This example uses two live servers, however the same principles also apply for moving to or from a local server.

Your Drupal Site

tutuploadsmedia_1284064777892.png

I'm going to move a straight-forward Drupal install to a new location. Each Drupal site has two halves - the files and the database. We're going to move one and then the other. Finally we'll make sure they can talk to each other.

Download the Files to Your Desktop

tutuploadsmedia_1284064850534.png

Step 1 is to download all of your Drupal site's files to your desktop.

Upload the Files to Your New Server

tutuploadsmedia_1284065113738.png

Step 2 is to upload them all your new server.

Export Your Old Database

tutuploadsmedia_1284065247021.png

For accesing the Drupal database I'm using phpMyAdmin which is commonly used by hosting companies and localhost setps. Find your site's database and click on "Export".

tutuploadsmedia_1284065288199.png

You'll need to export your database as SQL. I've chosen to also compress it using Gzip so that the process is a little quicker. Finally click Go.

Import to the New Database

tutuploadsmedia_1284065461180.png

I'm also using phpMyAdmin at the new site. Click "Import".

tutuploadsmedia_1284065493032.png

Choose the file that you just exported and click "Go" to import it into the new database.

tutuploadsmedia_1284065582137.png

Check to make sure that all the tables have imported sucessfully.

Change Settings.php

tutuploadsmedia_1284066038140.png

Finally we need to make sure that our files and database can talk to each other.

Login to your site's files and go to /sites/default/ and open settings.php. There are two things you'll need to change.

On line 92, chang the $db_url line to reflect the new database name, username and password.

tutuploadsmedia_1284066088958.png

On line 125, change $base_url to reflect the location of your new site.

That's it. Visit your Drupal site in it's new location and it should be live.

| WordPress

This tutorial will show you how to install WordPress locally on your P.C..

We're going to use WAMP for this task. WAMP stands for "Windows, Apache, MySQL, PHP" which are the different elements that allow you to run WordPress on your computer.

Here's how you do it:

Video on How to Install WordPress Locally on a P.C.

Step 1: Install WAMP

  1. WAMP ServerDownload WAMP to your computer.
  2. Run through the WAMP installation process.
  3. In your taskbar, down the by the date in the bottom-right hand corner of your screen, look for the WAMP icon. Click on that icon.
  4. You should see a popup. Click "Start All Services" and then click "Localhost."
  5. Hopefully you'll see a white screen with the Wampserver logo in the top-left corner.

Step 2: Download WordPress

  1. Download WordPressGo to WordPress.org and click on the blue button saying "Download WordPress 3.0.x".
  2. The file you download should have a name like wordpress-3.0.1.zip

Step 3: Move WordPress to WAMP

  1. Click on the WAMP icon in your taskbar again and now click "www directory". This will take you to the folder where WAMP stores its websites.
  2. Move your WordPress folder from Step 2 into this directory.
  3. Extract the WordPress folder.
  4. It will be confusing to keep accessing the website through a folder called /wordpress-3.0.1/ so rename the folder to something simple such as /wordpress/

Step 4: Set up our database

  1. Click on the WAMP icon in your taskbar again and now click "phpMyAdmin". This will take you to the software where WordPress's databases are managed.
  2. Find the field labelled "Create new database" and enter "wordpress". Click "Create".
  3. Hopefully you'll see the name "wordpress" appear in the left column.

Step 5: Install WordPress

In your browser, visit this address: http://localhost/wordpress. You'll see the the WordPress installation screen as below:

Installation Step 1

On the first screen, simply click "Create a Configuration File".

tutuploadsmedia_1284131432591.png

Installation Step 2

On the second screen, simply click "Let's Go!".

tutuploadsmedia_1284131462569.png

Installation Step 3

Here you will need to enter the database information:

  • Host Name: Localhost
  • Username: root
  • Password: [leave this blank]
  • Database: wordpress
tutuploadsmedia_1284131492086.png

Installation Step 4

Simply click "Run the install".

tutuploadsmedia_1284131573369.png

Installation Step 5

Enter the name of your site plus the password and email you'd like to use.

tutuploadsmedia_1284131596463.png

Installation Step 6

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

tutuploadsmedia_1284131774008.png

 


| WordPress

Rokbox is a popular plugin made by Rockettheme for Joomla. It allows you to display images inside a stylish pop-up. You can see the Joomla version of this tutorial by clicking here.

However, there is also a WordPress version available and here's how to use it:

Download Rokbox and Upload to Your Site

tutuploadsmedia_1283612086661.png

Click here to download the Rokbox plugin for WordPress. You'll then need to extract the folder onto your desktop. Upload it to the /wp-content/plugins/ folder on your site

Activate Rokbox

tutuploadsmedia_1283612153336.png

In your WordPress site admin area, go to the Plugins and click "Activate" next to RokBox Gallery

Add an Image to a Post

tutuploadsmedia_1283612245685.png

Go to one of your WordPress posts and click the "Add an image" button. Insert an image into your post. It end result should look like it does below:

tutuploadsmedia_1283612395032.png

View the HTML

tutuploadsmedia_1283612421134.png

Click the "HTML" tab in the top-right of your post.

Insert the RokBox Code

tutuploadsmedia_1283612573966.png

Insert rel="rokbox" into the HTML. The best place to do this is right after the opening Using Rokbox in Wordpress

| Drupal

The purpose of this tutorial is to show you how to find and fix problems with your Drupal templates. We're going to focus on CSS issues such as fonts, colors and padding.

Download and Install Firefox

tutuploadsmedia_1272633877883_c86f942595ae98592417dbc295fccafd.png

No question about it, Firefox is the best tool you can find for fixing problem on your website. Download from http://www.mozilla.com/firefox and install.

Install the Web Developer Plugin

tutuploadsmedia_1272633999346_0ec3909fa9a6aa31b4df38cd3b1a07ab.png

Firefox is useful for the same reason as Joomla ... it has 1000s of amazing addons. The one we're going to use is called "Web Developer". Visit https://addons.mozilla.org/en-US/firefox/addon/60 in your Firefox browser and click "Add to Firefox".

Visit Your Joomla Site

tutuploadsmedia_1283465887819.png

We're going to use a default Drual install for this tutorial.

Diagonse Your Problem

tutuploadsmedia_1283465932340.png

In this example, our welcome message is too small. We'd like to have "Welcome to your new Drupal website!" in larger text.

Start the Webdeveloper toolbar

tutuploadsmedia_1283465966628.png

Click "CSS" in the toolbar and then click "View Style Information"

Click the item you want to edit

tutuploadsmedia_1283466041231.png

Hover your mouse over any part of the page and a red box will appear around it. Click on that area.

See the CSS Code at the bottom of the page

tutuploadsmedia_1283466068610.png

At the bottom of the page you'll get a lot of information about why that item on your site looks like it does. Here's what's controlling the "Welcome to the Frontpage" line:
1: The file with it's exact location
2: The exact line number inside that file
3: The code at that line number
In this case you can see that the font-size is 170%. We now know exactly which line in which file to edit.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!