SimpleNav: Custom course format - Part 1

THE GOAL
I recently worked for a client in the food service that wanted users to view a quick overview of their company and complete a couple training exercises. So we setup a Moodle course with about 10 activities and 5 videos in the course the student had to complete. The intended time frame for completion was about 10 minutes or less.

The client asked for a streamlined user experience, eliminating confirmation screens and backtracking to the main course page. So in effect, the user could flow seamlessly between each consecutive activity in the course.

THE SOLUTION
The easiest solution for a new navigation between activities would be a new, custom course format. This would allow me to make custom changes without messing with core Moodle code. So the first thing I did was to build my new course format off of a classic:  the Topics format.

1. Go into the moodle source code to:   moodle/course/format/
2. Copy the "topics" folder and rename it to something else. I chose to name mine "simplenav" 

Now the fun part: re-naming everything. 
Open up the course format folder you just renamed. Let's start at the top and work our way down.

Lang Folder

1. Open the lang folder and navigate to the only file in there:  format_(formatname).php. Rename this file using the new name you picked out like this:  format_simplenav.php
2.  Open the file with a text editor, like Notepad++
3. Let's rename some of the strings in there, so it matches our "simplenav" plugin. Here is an example:
             $string['pluginname'] = 'Simple Navigation format';          $string['page-course-view-simplenav'] = 'Any course main page in simplenav format';          $string['page-course-view-simplenav-x'] = 'Any course page in simplenav format';

format.php

1. Open this file in a text editor. You only need to change two lines. 
2. Search for the keyword "topics," since that is the format name we'll be replacing.
3. Near the end of the file, find these line and update it:
1. $renderer = $PAGE->get_renderer('format_simplenav'); 
2. $PAGE->requires->js('/course/format/simplenav/format.js');  

lib.php

1.  Open this file in a text editor. Search for the keyword "topics"
2. The first change is the class name, at the top of the file:
1. class format_simplenav extends format_base {  
3. Continue to search and replace.

renderer.php
This is the same process. Make sure you rename the class at the top of the file:
             class format_simplenav_renderer extends format_section_renderer_base {    

css.php
Same thing again. Re-name all the css classes from "topics" to "simple nav like this:
             .course-content ul.simplenav {margin:0;}             .course-content ul.simplenav li.section {list-style: none;margin:0 0 5px 0;padding:0;}             .course-content ul.simplenav li.section .content {margin:0 40px;}


version.php
You only need to change the last line:.
$plugin->component = 'format_simplenav';  
INSTALLATION 
Now that everything has been copied and renamed properly, it can be installed within moodle. 

1. Login to your site as the Administrator. You should be automatically redirected to a new page, where you must install updates within your site. 
1. If you are not automatically redirected, go to the Site Administration block, and click on "Notifications."
2. You will be redirected to a page to update your site – the new “simplenav” course format will appear. Update your site to move forward. 

CHANGES TO COURSE ADMINISTRATION

We need to change the settings of our course to enable our new format.

1.  Login to the Moodle website as an Administrator or Teacher.
2. Go into your course and go to “Course Administration > Edit Settings.”
3. Open up the “Course Format” section. If the simplenav format installed correctly, you’ll have a new option called “Simple Navigation.” Click on that one

YOU'RE READY!
Everything is ready to start customizing and using your new, custom course format! In the next blog post, we'll talk about the changes we need to make to have a linear activity flow.

New posts, plugins and moodle updates

I wanted to let everyone that follows this blog know that new content is coming. I'm been working on Moodle as a freelance developer for over the last six years and I'm still learning a lot about the platform with every new release that comes out. But now that I have the time, I will be writing new posts on other customizations I created:

• Use the category and course hierarchy to change Moodle into a client web portal
• Attaching themes to course categories
• Add custom php pages to Moodle
• New custom blocks
• Custom graphs and charts based on HTML5
• Custom course formats
• Browse through activities without all the confirmation screens
• Recreate the Moodle course
• To have its own front page and navigation style
• Sync Tools
• Allow students to upload text files and parse the data for Moodle

The list could be longer, but these are some of the things I'll begin to tackle in my blog. I'm also considering to make these into public plugins that can be downloaded from my website. The price hasn't been decided yet, but I'd like to make them free if I can get some friendly donations coming in first. That would pay for the development and upkeep. 

For now if you have any questions, leave a comment below or visit my website for more Moodle examples:   

www.arcinteractive.net

Change the document root

I am using a dedicated CentOS server, with access to WHM and cPanel. 
What I want to do is unload my moodle code into a nice, organized file structure within my "File Manager" on cPanel." The end result should be that I can put my moodle code here:

public_html/moodle
public_html_moodledata

And still reference my site like this:  www.mysite.com 
(instead of normally having to extend the url like:   www.mysite.com/moodle/)

Since I have root ssh access on my server, I am going to edit where the documentroot points to. 

Login to SSH
Since I'm using a windows machine to access my server, I went ahead and downloaded PuTTY, a free ssh client. 

1. I opened up putty and input my server's IP address. 
2. I logged in as the root user. 
1. If logged in as another user, use the command su -  command to enter root password and gain root access.
3. Now we need to open and edit your domain file. Again, you can only do this as root user. Type in the following command:   vi /var/cpanel/userdata/USERNAME/DOMAINNAME
1. An example would be:   vi /var/cpanel/userdata/testuser/mysite.com
4. Now the file should be open within PuTTY. Click the "i" key to start editing mode, and use arrows to navigate to the section of text called "documentroot."
5. Change that text to say:     documentroot: /home/testuser/public_html/moodle
6. Rebuild the Apache conf and restart Apache. You can do this through SSH:
1. /scripts/rebuildhttpdconf
2. service httpd restart
7. Or through the WHM panel. Type in the search bar "Apache Config". Go to the page.Save and rebuild.
8. The change will be immediate. Simply clear your browser cache and force refresh the page!

I used this blog guide as a reference:

http://blog.servint.net/2012/03/30/the-tech-bench-changing-a-document-root-in-cpanel/

Install memcache on moodle 2.4

So...this took me a stupidly long time to wrap my head around it. But I think I finally installed everything correctly. Even though Moodle 2.4+ supports caching through memcache, you first need to install it on your server.

ON YOUR SERVER
Hopefully you will be using WHM manager to have a nice interface when interacting with your server.

1)  Login to your WHM panel as the root user
2)  Go to "Easy Apache". Click through the screens until you get to the php setup page.
3)  Scroll down so you will see the "See Exhaustive Options" button. Click it.
4)  Now there are more options on the page. Simply search the page until you find "memcache." Check the option and save your configuration.
5)  Now you need to go into "Software -> Module Installers -> PHP Pecl". Click on the manage button so you option up the new options screen.
6)  Now you should see the area on the screen that says "Install php Pecl module" and an empty text box. Inside the box you can type "memcache" and/or "memcached".
7)  Click the "Install Now" button.
8)  Once the installation process is complete, you will need to restart apache. (Restart services -> HTTP (apache))

ON MOODLE
1)  Login to moodle as the administrator
2)  Go to "Site Administration -> Plugins ->Caching -> Configuration."
3)  You will come to a new page where you will see the caching options listed inside the first table on the top of the page. Inside the row that says "memcache", you should now see a new link in the right-most column that says "Add Instance." Click the link
4)  You will come to a new page where you configure which server should be memcached. In my case, it's the same server that I am hosting on.
5)  Name your file and enter the domain of your server like:   mydomain.com (you don't need the www in front).
        a)  I also needed to add the default port number to make this work. mydomain.com:11211
6)  Save your changes.
7)  Now you need to go into "Plugins ->Caching ->CacheStores ->Memcache." Enter the same domain like step #5 (mydomain.com:11211).
8)  Save your changes.
9)  On the "Plugins ->Caching -> Configuration,"  you will need to modify the other settings within those tables and map them to your new memcache store. Just like the right-most column that said "Add instance", the right-most column in the other tables are links. You need to "Edit" some of those columns and activiate your new memcache store to start loading things. Like the strings.
10)  Finally, you should go into "Plugins ->Caching ->Test Performance." The "result" column should say "tested" next to the memcache row. If it doesn't you didn't install it properly.

Easily find the course id for any page

Here is a nice code snippet to find the course id of a page (assuming it's actually related to a course).

global $PAGE;

$context = $PAGE->context;
$coursecontext = $context->get_course_context();

// current course id
$courseid = $coursecontext->instanceid;

Tada! Came across this on stackoverflow today and thought I would keep a record of it for myself :)

Define a new font-face using $CFG->wwwroot

It's been several times now where I defined a new font-face type with my CSS file using an absolute url path to my website. And of course, that doesn't work if I want to port my code to another server. Or even put it on my local machine.

The best way to do this is to point my css to use the $CFG->wwwroot location when including my font files. This way, you only have to modify the config.php (one file, instead of many) to change your site url.

The way to do this is:

1)  Inside of your own theme, you should have a lib.php file. In my case, this is the file structure:  theme/mytheme/lib.php

2)  I used this forum post as inspiration, but I'll also give a quick recap down below: https://moodle.org/mod/forum/discuss.php?d=220495

3)  Inside of lib.php, create a new function:
<?php

function mytheme_process_css($css, $theme) {
    $css = mytheme_set_fontwww($css);
    return $css;
}

function mytheme_set_fontwww($css) {
    global $CFG;
    
    $tag = 'setting:fontwww';
    $css = str_replace($tag, $CFG->wwwroot . '/theme/mytheme/fonts/', $css);
    return $css;
}
?>

That part that is highlighted in yellow above, make sure that it is the location of where your font files are located. (So an extra step would be making sure you put your font files on the server to begin with :)

Next, you need to modify your css file. For myself, I defined my new font inside of theme/mytheme/style/core.css.

@font-face
{
    font-family: ArchitectsDaughter;
    src: url('setting:fontwwwArchitectsDaughter.eot'); /* IE8-9 */
    src: url('setting:fontwwwArchitectsDaughter.eot?#iefix') format('embedded-opentype'),  
         url('setting:fontwwwArchitectsDaughter.ttf') format('truetype');

}

Notice that the parts I highlighted above are the same text as the "$tag" variable I assigned in the previous functions. Also, my code has multiple font files to suit both Internet Explorer and other browsers.

Make sure to refresh the theme caches on your server and/or computer. After that, you should see your new font appear.

Setting up cPanel account from WHM

Setting up a server with the WHM panel is pretty easy, since most of that is done for you by your hosting company. But it's not so intuative to setup the cPanel account itself (for the first time installation). So here are some instructions:

Here is a video: http://www.namecheap.com/support/knowledgebase/article.aspx/1091/97/web-hosting-tutorials-how-to-create-a-cpanel-account-in-whm

First you need a domain:
1) Purchase one from godaddy.

Or create a subdomain:
http://support.godaddy.com/help/article/4080/managing-a-domain-names-subdomains?pc_split_value=1&countrysite=in
1) From Account manager, click on the "Domains" section to open it up. Select the domain you want and click on the "Launch" button.
2) Click on the "DNS Zone File" tab
3) Click on the "Edit" button.
4) Now you should be inside the DNS Manager section. At the very top of the page, there should be a tool bar with icons. Click on the "Add Record" icon.
5)  From the drop-down box, choose the option called "A (Host)."
6)  Inside the box called "Host Name", enter the subdomain you want to use. (For example, dev.mydomain.com)
7)  Enter the IP it should point to.
8)  Click Okay. Now you will return to the DNS Manager page.
9)  Remember to now click on the "SAVE FILE" button at the top of the page.
10)  You'll probably need to wait a couple hours before it takes affect.

Then setup WHM:
1)  Login to your WHM panel and go to:   Home -> Account Functions -> Add new account
2)  Fill in all the information with your domain.
3)  Create a default package with manual settings. Leave everything as is.
4)  Click save!

Now you have an account that will access cPanel. From the WHM manager, you can go to: Accouts -> List Accounts. Then click on the cPanel icon to login.

Or you can login to your cPanel directly: http://myip:2083
===========================

Now setup a database in cPanel:
1) Inside of cPanel, go to the section called "msqyl databases". You need to create a new database with collation utf8_unicode. Remember the name.
2)  Create a new user for your database
3)  Finally assign the user you just made, to the new database you just created. Give the user all privileges.

Additions to moodle install:
http://docs.moodle.org/24/en/CentOS_Linux_installation
http://docs.moodle.org/24/en/PHP
- Enabled XCache for php
- Enable IonCube Loader if necessary for custom licensing tools
- Make sure you have mysqli installed for the database (done through WHM->software->easyapache)
- Make sure you have curl installed

Now to setup moodle inside of cpanel:
1) Go to the Filemanager.
2) Create a folder named "moodledata" at the same level as the "public_html" item. Or simply remember to install it at a higher level than the moodle code. It needs to be one level higher in a folder hierarchy.
3) Go inside the "public_html" item. Upload a zip file of the latest moodle release. Upack the zip file. (Note: the zip file might extract to a folder called "moodle." For our purposes, make sure that all files are not within a separate folder, but extracted directly inside of "public_html."
4) Access the website via url to start the moodle installation process.

During installation:
1)  Make sure the "unix socket" check box is on.
2)  Make sure your database was set with the utf8_unicode option

After installation:
1)  Make sure you set the cron for the moodle site and server.
http://docs.moodle.org/24/en/Cron_with_web_hosting_services
2)  Go into cPanel for your server. Scroll down to the "Advanced" section and click on the "Cron Jobs" button.
3)  Choose the timing for your cron job (normal is to every 30 minutes)
4)  Enter the cron command like this example:  /usr/local/bin/php -q /home/username/public_html/moodle/admin/cli/cron.php

Redirect user to course page upon login

This is a feature I've been wanting for a while, especially for teachers. I would like that teachers are re-directed to their course page immediately after login. I've created some code inside the "login/index.php" file to accomplish this feature.

NOTE:  This code will only redirect the teacher to the FIRST course they are enrolled in. For me, this is okay because each teacher is only enrolled in one course anyway. If you want the user to be redirected to a specific course (out of many), you will need to modify this code and search for the course by name or id.

1)  Go to login/index.php on your moodle server.

2)  Around line 222, you will see some code that determines if the user will be redirected to the site home or the my moodle page. (In a previous post, I set up my system that teachers were sent to the my moodle page, and students were sent to the site home)

3)  Now we will add some code to get the user's list of courses and redirect the page to a specific course page.


// Go to my-moodle page instead of site homepage if defaulthomepage set to homepage_my
if ($home_page == HOMEPAGE_MY && !is_siteadmin() && !isguestuser()) {
         if ($urltogo == $CFG->wwwroot or $urltogo == $CFG->wwwroot.'/' or $urltogo == $CFG->wwwroot.'/index.php') 
                {
                     $urltogo = $CFG->wwwroot.'/my/';

                    // I set up the page to redirect teachers to the 'my' page. 
                    // So here, instead of looking for user's role, I simply see if they
                    // are directed to the mymoodle page. Then I know it's a teacher and 
                   // I redirect to their course.
   if ($courses = enrol_get_my_courses(NULL, 'visible DESC, fullname ASC')) 
   {
           foreach($courses as $course)
                          {
                                $urltogo = $CFG->wwwroot.'/course/view.php?id='.$course->id;
                                break;
                          }
                    }
          }
 } 


4)  If you wanted to search for a specific course, then add logic inside of the foreach loop to look at the $course->id, $course->name, etc.

Create new block for "My Courses" including activities

I want to make a custom block that will show the courses I'm enrolled in and the activities included within.
I don't want to show anything extra: no reports, participants, or grades.
So the structure I'm looking for will be similar to this:

Block Name:  My Courses

• Course 1
• Topic 1
• Topic 2
• Activity 1
• Activity 2
• Activity 3
• Topic 3
• Course 2

I'm going to duplicated the "Courses" block and modify it to create a new, custom block for myself. Then I'm going to use the "My courses" branch within the Navigation block as inspiration to make the list of content that I want to have.

Duplicate the "courses_list" block

1)  You will need access to your moodle server. Go inside /blocks and find the folder called "course_list." Copy the folder and rename it to....whatever name you want to give the new block.

For example, I will name my folder "course_outline."

2)  Now we'll need to rename some files:

-- block_course_outline.php

-- lang/en/block_course_outline.php

3)  Modify data in those files:

-- db/access.php:  rename all instances of "block_course_list"  with "block_course_outline"

-- lang/en/block_course_outline.php:  Give the pluginname = your name. ("Course Outline")

-- In all the remaining files, rename all instances of "block_course_list"  with  "block_course_outline"

4)  Go to your moodle site and login as admin. Click on "Site Administration -> Notifications."  You should now see your new block ready to be installed. 

Choose "upgrade moodle database" and install the block. 

Now we customize our new block

1)  The next thing we need to do is populate the course list to show activities.

2)  Go into the blocks/course_outline/block_course_outline.php file. Around line 35, you will see code like this:

foreach ($courses as $course) 

{

       $coursecontext = context_course::instance($course->id);

       $linkcss = $course->visible ? "" : " class=\"dimmed\" ";

       $this->content->items[]="<a $linkcss title=\"" . format_string($course->shortname, true, array('context' => $coursecontext)) . "\" "."href=\"$CFG->wwwroot/course/view.php?id=$course->id\">".$icon.format_string($course->fullname). "</a>";

}

Right now, that code is only printing out the course name. So we need to insert some new code that also prints out the activities of that course. Here is the new code we will add:

foreach ($courses as $course) 

{

       $coursecontext = context_course::instance($course->id);

       $linkcss = $course->visible ? "" : " class=\"dimmed\" ";

       $this->content->items[]="<a $linkcss title=\"" . format_string($course->shortname, true, array('context' => $coursecontext)) . "\" "."href=\"$CFG->wwwroot/course/view.php?id=$course->id\">".$icon.format_string($course->fullname). "</a>";

         $myactivities = get_array_of_activities($course->id);

         if(!empty($myactivities))

         {     

                 $activityList = "<ul>";

                  foreach($myactivities as $activity)

                  {

                        $activityList .= '<li><a $linkcss 

                         href="'.$CFG->wwwroot.'/mod/'.$activity->mod.'/view.php?id='.$activity->cm.'" 

                         title="'.$activity->name.'" >'.$activity->name.'</a></li>';

                   }     

                   $activityList .= "</ul>";

                   $this->content->items[]=$activityList; 

          }

}

3)  You can see that we get the activities within the course and save it in an array variable called "$myactivities."  Then we are going to make a list of the activities and add that to the content of the block.

PATCH: Fix default homepage for users when using "force login"

At the moment, a certain feature is broken in the stable release of Moodle 2.4.1.
If you enable the "force login" setting on the site, users will always be directed to the site home.
This is bad if you have also allowed users to choose their own homepage -- even if they have chosen the "my moodle" page as a default homepage, they will never be redirected there upon login.

Just as a recap for those settings:

•  "site administration -> appearance -> navigation". Set the default homepage to:  user preference.
• "site administration -> security -> site policies. Enable the setting called: Force users to login

I have followed the trackers on moodle.org for a solution and a patch has recently been uploaded. AND it works!
https://tracker.moodle.org/browse/MDL-37983

Here are the steps to implement the patch:
1)  Go to /login/index.php file.
2)  Around line 209, we are going to add some code.
This is the original code:


            // no wantsurl stored or external - go to homepage
            $urltogo = $CFG->wwwroot.'/';
            unset($SESSION->wantsurl);

            $home_page = get_home_page();

            // Go to my-moodle page instead of site homepage if defaulthomepage set to homepage_my
            if ($home_page == HOMEPAGE_MY && !is_siteadmin() && !isguestuser()) {
                if ($urltogo == $CFG->wwwroot or $urltogo == $CFG->wwwroot.'/' or $urltogo == $CFG->wwwroot.'/index.php') 
                {
                    $urltogo = $CFG->wwwroot.'/my/';
                }
       } 
}

AND here is the new code. I will highlight all the new parts of code you must add.


           // no wantsurl stored or external - go to homepage
            $urltogo = $CFG->wwwroot.'/';
            unset($SESSION->wantsurl);
        }

        // If the url to go to is the same as the site page, check for default homepage.
        if ($urltogo == ($CFG->wwwroot . '/')) 
        {
            $home_page = get_home_page();

            // Go to my-moodle page instead of site homepage if defaulthomepage set to homepage_my
            if ($home_page == HOMEPAGE_MY && !is_siteadmin() && !isguestuser()) {
                if ($urltogo == $CFG->wwwroot or $urltogo == $CFG->wwwroot.'/' or $urltogo == $CFG->wwwroot.'/index.php') 
                {
                    $urltogo = $CFG->wwwroot.'/my/';
                }
       } 
}

3) Now the site will save and display the user's preferred homepage. Yay!

Create RSS Feed block for database activity

I really liked how the Glossary activity had a menu block on moodle, but the database activity did not. By using the RSS feeds block, you actually can achieve the same effect.

Enable RSS on your moodle site
1)  Enable RSS settings within the administration. Go to:  Site Administration -> Advanced Features
2)  Scroll down and enable the option called "Enable RSS feeds"
3)  Now we need to enable RSS for the database activity itself. Go to:  Site Administration -> Plugins -> Activity Modules-> Database.

4)  Enable RSS Feeds and click the "Save" button

Generate the RSS file for your database activity

1)  Open up your database activity so you can see the database settings. Choose "Edit Settings"

2)  Now you see a new option called "RSS Articles" --here you can choose the amount of entries that should be stored in the RSS feed. I think 5 is a pretty good number for myself. 

Make sure you save the new setting.

3)  We need a link to the newly generated RSS file. Look at the database settings again:

At the bottom of the list, a new option appears called "RSS feed for this activity." 

 -- Right-click on the link and say "Copy link address."

 -- You can also click the link and it will open in a new window. Highlight and copy the url inside the browser window.

Create the RSS Feed Block

Now we simply need to create a new RSS block and put it on whichever page we like. For myself, I'm going to put the RSS Feed block on the database activity page.

1)  Go to your desired page and turn editing on.

2)  If block editing is enabled on your site, you should see a new block appear called "Add a Block." From the drop-down list, choose "RSS Feed Block"

3)  Once the new rss block appears, click on it's pencil icon to edit the settings. 

Here is where you will paste the url of the database activity rss feed.

4)  If the url was correct, then your RSS block should now be configured. You can choose additional settings to change the name of the block, etc.

NOTE: It is possible that you'll need to add an entry to your database activity and run your cron job before the RSS block will display entries properly.

Move blocks to the left by default

I've had a couple issues with blocks appearing at different sides of the page, depending on the page I'm at. There are a couple options that will set default actions for blocks.


Choose the region that blocks appear on your course page:

1) Navigate to your current theme and open up the config.php file.
theme/mythemename/config.php

2)  Scroll down until you see a line of code that describes "in-course"

'incourse' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
    ),
This code sets the regions for the blocks within a course page. This applies to pages used by any activities as well.
Side-pre:  left side of the page
Side-post:  right side of the page

Setting the "regions" to include both, means that when moving a block, you can choose either the right or left side.
Setting the "defaultregion"  means all blocks appear on the left side by default.



Decide how many default blocks appear on a course page:
This setting decides which default blocks appear automatically on a course page when it's created for the first time. Some people like myself, don't need 5 blocks spawning each time.

1)  Go to your moodle server and located the course format you are currently using. In my case, I'm using the "Collapsed Topics" format for my courses.
course/format/topcoll

2)  Open the config.php file.
course/format/topcoll/config.php

3)  You should see a line of code that looks like this:
$format['defaultblocks'] = ':...';
Here you can delete or add the blocks you want to automatically appear on all course pages.

Include javascript file in your theme

Including javascript inside my moodle theme gave me soooo much headache.
Now I've finally figured out how to do it, and this post will be my proof!

1)  Go inside your "/theme/mythemename"   folder. If you don't have one already, create a new folder called "javascript."

2)  Inside the new javascript folder, upload or create your actual javascript file. We could call it "text.js" for example purposes. 

3) Next, go inside your  "theme/mythemename/config.php."  At the very bottom of the file, we will add a new line of code to include your javascript file. 

$THEME->javascripts_footer = array('test');  // Recommended:  This loads the file in the html footer

OR you could load the file in the html header:

$THEME->javascripts = array('test');

4)  In order to see the changes, the caches of the site must be purged. What I normally do:

-- Turn on "Theme designer mode" while I'm working, to automatically prevent caching

-- Go to "Admin -> Development -> Purge all caches" (if not in designer mode)

-- Refresh the page you want to see

Just a word of warning:  jQuery does funky things to Moodle and half of the time, including it will give you more headache than not. Try to use the YUI libraries and find equivalent functions instead of jQuery.

http://www.jsrosettastone.com/

Here is the offical documentation from Moodle about jQuery and including javascript files:

http://docs.moodle.org/dev/Using_jQuery_with_Moodle_2.0

Adding a new font to your theme

I wanted to include a True-Type font to my moodle theme. And with some internet browsing, I have found the solution.

1) Go inside your theme folder and make a new folder called "fonts." In my own instance, I used this path:
mythemename/pix/fonts/

2)  Upload your .ttf file inside the "fonts" folder.

3)  Now add some code to the css to show the font. Go to your  mythemename/style/core.css file.

@font-face
{
    font-family: myfontname;

    src: url('mythemename/pix/fonts/myfontname.eot'); /* IE8-9 */
    src: url('mythemename/pix/fonts/myfontname.eot?#iefix') format('embedded-opentype'),  
          url('mythemename/pix/fonts/myfontname.ttf') format('truetype');

}

4)  Now that you declared your new font, you can start using it inside your theme

html,body 
{
    font-family: myfontname !important;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, input, textarea 
{
    font-family: myfontname;
} 

5) Remember to clear your theme caches in order to see the changes. You are done!

Add settings to a theme

This will show you how to add your own controls to the "settings" area of a theme.

1)  Go into theme/lang/en/theme_yourtheme.php.  Here create the actual names and descriptions of your setting. Save these names for use later in code.Here is my example:


$string['endcolor'] = 'Menu gradient: End Color';
$string['endcolordesc'] = 'Change the ending color of the gradient for menu bar.';


2)  Go into theme/settings.php.  Here you can add a new type of setting, referencing the new names you just created. For example, I'm going to add a new color picker:


// Menu background colour setting
$name = 'theme_yourtheme/endcolor';
$title = get_string('endcolor','theme_yourtheme');
$description = get_string('endcolordesc', 'theme_yourtheme');
$default = '#ffffff';
$previewconfig = NULL;
$setting = new admin_setting_configcolourpicker($name, $title, $description, $default, $previewconfig);
$settings->add($setting);

3) Go into theme/lib.php. Here we need to add functions that will replace the current color with our new setting's color.
--- Within the  function yourtheme_process_css($css, $theme)       function, you need to add some code to check for your new setting. Here is an example:


if (!empty($theme->settings->endcolor)) {
        $endcolor = $theme->settings->endcolor;   <-- here we make a new variable to store our settings.
    } else {
        $endcolor = null;
    }
    $css = yourtheme_set_menuendcolor($css, $endcolor);

-- You'll see that we just called a function on the last step that doesn't exist yet:
yourtheme_set_menuendcolor($css, $endcolor);

-- So now we need to create it. At the bottom of the document, outside of any other function brackets, create your new function:


function yourtheme_set_menuendcolor($css, $menuendcolor)
{
    $tag = '[[setting:endcolor]]';
    $replacement = $menuendcolor;
    if (is_null($replacement)) {
        $replacement = '#333333';
    }
    $css = str_replace($tag, $replacement, $css);
    return $css;
}


4)  Last step is to change the theme/styles/core.css file and insert our new settings.
background:[[setting:endcolor]]


DONE!
Now you know how to make basic settings for your theme file.
Please remember to "clear theme caches" or put your site into "theme designer mode" to see these changes take place in real time.

Copy a theme folder to create your own theme

I'm going to use the new "aardvark" theme as my base folder. I'm going to rename the files so it all points to "mytheme name" instead of "aardvark."

Every place I use the yellow highlighter below is the area in which you must replace with your own theme name.

1)  Make a new folder for your theme -- only use lowercase letters. Copy this name so you can reuse in the next steps.

2)  Go into theme/lang/en.  Rename the file to:   theme_newthemename.php
Go inside that same file.

$string['pluginname'] = 'newthemename';  <-- Only place you can use uppercase letters
$string['region-side-post'] = 'Right';
$string['region-side-pre'] = 'Left';
$string['choosereadme'] = 'Aardvark is a three column fixed-width theme for Moodle 2.1+ originally created by Shaun Daubney for <a href="http://www.newbury-college.ac.uk">Newbury College</a>';
$string['configtitle'] = 'newthemename theme';  <-- use lowercase here

3)  Go into theme/config.php. Rename the following using lowercase letters here
$THEME->name = 'newthemename';  
$THEME->csspostprocess = 'newthemename_process_css';

4)  Go into theme/lib.php. Use the finder box to locate and replace all the "aardvarks" to "newthemename."
     Go into theme/settings.php and do exactly the same:  find and replace.

5)  Go into theme/settings.php. Change this line:  $plugin->component = 'theme_newthemename';