Why I Write These Posts

This morning I was explaining to my son the reasons behind writing these posts. It's really for me. When I teach a lesson, or build a web page, and I forgot how to do something I turn to my blog.

Updating the WordPress Footer
I was unhappy with the way the PNG image of Saint Michael lined up on the page. This is the before picture:

I did not like how the top of the large Saint Michael was uneven next to the words School News. I knew why it happened. In Gimp, the words were in the center of a 194x44 pixel transparent rectangle. I needed to drag the words so that they touched the first pixel horizontally and vertically in the transparent box.

I took the time to make the adjustment and re-saved the Gimp file as a .PNG image. I couldn't remember where I needed to add the image. My first instinct was to go to Theme Options - Footer options. There was no place for an image; although I found out where the Copyright words for Avada are located.

My next instinct was the Widgets. I was correct. I uploaded the new image file and was slightly surprised that it did not overwrite the original.

I went to Media - Library and clicked on the new image. The information window on the right side of the screen contained the Permalink URL.

The new file had a 1 appended to the file name. My footer HTML read:



I added the number 1 to the file name.



I clicked the Save button, refreshed the website, and had the look I was hoping for. Everything is neat and tiny and I can refer back here if I ever need to fix the footer again.

New Home Page and Menus

Today is home page and menu day. I am relying on the power of the ThemeFusion documentation and videos. Today I am also documenting as I do things. Take a peek.

Home Page
I had already created the file for the page that I wanted to be my home page. I needed to now show it instead of the Avada template. A quick check in the documentation and I navigated within WordPress to Settings - Reading. I set the Front page display to static page with the Front page being the page I created and named Saint Michael School - Cranford NJ. The posts page is called Recent Work. It is a blog that will work as our news page. Now when I type the URL smscranford.com/wp I see my school page. I still need to go over to HostGator to set smscranford.com to show the WordPress page instead of the HostGator menu.

Retina Ready Image
This morning the menu was the sales pitch menu for Avada. I created an SMS Overview page. It will be part of the About Us drop down. For this page, I uploaded an image that is twice the size I need it. I hope I am doing this the right way. I want the image to be 903x305 so I made the original 1806x610.

While viewing the Avada Retina Ready video, I learned about the WP Retina 2x plugin. It checks to see if the images you upload are retina ready. When I did the check it showed that my image was still too small for large or portfolio full sizes. I still have to think more about this. It seems for large the image needs to be at least 2049x1054 and for portfolio-full it should be 1800x800. These numbers are hard to attain with cropping.

When I put the image on the WordPress page, I brought in the full size image and dragged it down to 903x305. I am not sure if this is what I should be doing, but now the full image is there in the file.

Menu Structure

I knew what I wanted the menu to look like. I was able to make it happen. The Appearance - Menus section has the structure of the sales menu that came with the theme. I did not want to delete those items immediately for fear of losing the menu structure all together. I started by dragging my personal Recent News under the existing word Home. Then I removed the sample drop down entries for Home Version 1 through 15. I created three sample pages for the About Us section yesterday: SMS Overview, Brochure, and Philosophy. I quickly and easily changed the word Slider to About Us and continued on. At this point, I got brave, I deleted all the submenu items from the sample data and changed all the drop down headings to my wording.

This is where I ran into a problem. I had, potentially, 12 menu entries and the theme had nine. By looking through the ThemeFusion documentation, I learned that there is a custom links section. By typing # in the URL entry and a label I could create a menu entry that is not an existing web page on the site. I then added my pre-created pages to that choice.

The 12 entries wrapped around and made two rows of menu choices. This did not look elegant. We were really happy with the Header Version 1 and it is what I initially chose. I ended up switching Header Version 4. We did not want that version initially because of the social icons in the header, but in true Avada style I found a check box in Theme Options - Header Options and was able to restrict it from showing. We will have those options at the bottom of the page.

Tomorrow I will be madly creating most of the content for the remaining pages. This has been a great experience overall!

Images and Learning About Retina Ready Images

My next task was to set up the image slider. Avada comes with Layer Slider 4.0, Revolution Slider, Elastic Slider, FlexSlider, ThemeFusion Slider, and Post Sliders. I was a little apprehensive about the slider. It turns out that I didn't need to be. I dedicated Monday to the project and it was quickly solved. In hindsight, it was the photo work that has taken up more time.

Revolution Slider
I liked the look and feel of this slider. It became my test subject. Once again the Avada YouTube tutorial made it fairly simple. I set the video to full screen and paid careful attention to the file type and size of the images being used in the tutorial.

Setting the solid color background image on the slider becomes very important when containing the actual image and potential text layers. I would not have done that step without the tutorial. (See approximately 3:16 on the video.)

Adding the photo layer and setting its exact location was another speedy tip to developing the slider (4:08 on the video).

Retina Ready
Avada is a retina ready template. I noticed the Avada Retina Ready Information video after I had edited six images and some graphic files for the school name. I wish I had found that first and I am grateful I had only a handful of graphic images already created.

My younger son had been talking with me about retina ready images for some time now. He develops apps for iPhone, iPad, and iTouch.  I understood that he was making images twice the size he needed them, but I didn't think about that as I was creating those first images for the school website. You should play the Avada Retina Ready video for a quick understanding of the concepts. What is amounts to is that however big your screen area is for an image, you need to upload an image that is actually twice as big. As the video says, if the image area is 100x100 pixels, the uploaded image should be 200x200 pixels.

I will be working on this concept tomorrow. There is a WordPress plug-in that I have to install that will check the images.

Image Editing in Gimp and iPhoto
Gimp has been my free image editing software for years now. I knew the types of images I would be seeking from the school marketing class I took in my now completed Masters program. The photos should show action not things. The photos should show the best of what we as a school want to represent. The photos should be tightly cropped on faces. The photos should be of the highest resolution possible.

From years in working with photography as a hobby I knew I wanted crisp, sharp focus. I wanted the images color balanced. I wanted clean lines and no distractions behind the faces. If I can find leading lines in the images it is all the better.

I know I will improve my methodology over the next few months. Yesterday I found an exciting option in Gimp to help me get the size I thought I needed before I started to understand the implications of being retina ready. Even as I write this, I wonder if the Revolution Slider images are ok because mine are the same size as those that were used in the tutorial. I am being very careful to look at everything on the screen in the videos.

First, the Revolution Slider needed a background image. This anchors the rest of the layers on each slide that revolves through the slider. The tutorial suggested a PNG file filled with the hex color #f6f6f6. Hex colors are another concept I teach my students when we learn about HTML. In brief, colors are made up of red, green, and blue on monitors. Instead of counting in the base 10 system (0-9) we count in base 16 (0-9 then A-F). The hash tag symbol (#) denotes a hex number.

In Gimp I created a new image that was 940x434 pixels. I filled the background with #f6f6f6. I saved it as a Gimp (.xcf) file and a Portable Network Graphics (.png) file. I started a folder called smscranford to store all images that make it to WordPress in our domain.

Next, I gathered several images and brought them into iPhoto to do a quick color balancing. I need to learn more about this step too. In iPhoto 9.4.3 I click on the Photo then choose the Edit icon on the lower left side of the screen. Next I click on the Adjust tab on the top right side of the program. Finally, I locate the tiny color picker icon and click on a white or neutral color. 

I drag the newly balanced photo to an "Adjusted" subfolder in my Pictures folder.

The tutorial showed the actual imported images to be 940x434 pixels. I don't know how that squares with the idea that for the retinal display the images should be twice as big. For the moment, I am resizing my original images that range from 2048x1536 to 4000x3000 proportionally down to 940 pixels wide. If there is a lot to be cropped out I first use the rectangular selector and attempt to select an area that is in the neighborhood of 940 pixels or a bit larger. Once the area is selected, I Edit-Copy the selected area and Edit-Paste as New Image.

Next, as needed, I Image-Scale Image so that it is proportionally 940 pixels wide.

Here is the new trick! I found Image-Canvas Size. I unlink the proportional resizing and leave the Width at 940 pixels and change the Height to 434 pixels. It then gives me the ability to slide the image up and down to determine which pixels will fill the height.

I was really happy with this feature.

Avada WordPress Theme

I have spent approximately 16 hours working within the WordPress theme at this point. I have followed the documentation index.html that came with the download from ThemeForest.

Downloading the Demo Data XML File
I initially was not sure that I wanted to import the demo data. I am glad that I did. One of the things that I appreciate about the Avada theme is that the developers took the time to make screencasts of each step. The videos are posted on YouTube. Their written directions are very clear and include links to the associated YouTube video. Despite the fact that there are clear written directions, have listened to most of the screencasts. This is a great example in relation to good teaching in general. They give their "students" multiple ways to learn.

The video helped me quickly set up the menu, home page, post page, and widgets. The XML import does include all of the menu items and is really a sales page for the Avada them. It will not take too long to modify my initial content and pare away all of the demo words, links, and images.

The First New Page

I set up the basic layout of the home page in my first attempt to learn how to apply the theme. The index.html file has great documentation. By signing on to the Theme Fusion website I was able to access more video tutorials. The tutorial quickly led me to understand how to select among different types of pages. For the home page I wanted to use the full screen. The Page Attributes on the right side of the screen gave me ready access to Full Width and many more other options that I will explore as I build more pages.

The first problem I encountered was figuring out where the shortcodes were located. Shortcodes are macros that generate snips of HTML code that enable the editor to create pages within the Avada theme.

The video tutorial explains that once you edit the page and select the visual editor a series of short codes appear. I did not see the short codes so I went over to the Theme Fusion forum. I did a search for short code and quickly found a thread with a discussion revolving around my exact problem. It had been posted just a half day earlier. One of the replies said to look for the Kitchen Sink. 

Clicking the Kitchen Sink icon still did not lead me to what I was hoping to find, but as I hovered my mouse over the new set of icons, I noticed the ThemeFusion Shortcodes drop down list.

At this point, everything became easier.

The First New Page
In all honesty I am very glad that I understand the basics of HTML. When you choose a shortcode it dumps a bunch of HTML into the editor. When I begin to teach HTML to my middle school students I explain why they might find the knowledge useful in the future. Here in my own life is a clear example.

The tutorial demonstrates how to add a tagline. I used the school's philosophy as the tagline. The shortcode looks like this:

[tagline_box backgroundcolor="" shadow="no" border="1px" bordercolor="" highlightposition="left"  title="Saint Michael School Philosophy" description="Saint Michael School exists to promote the spiritual, academic and personal formation of the whole child. As witnesses to the teachings of Roman Catholic doctrine, the students are challenged to achieve excellence in their relationship with God and in all they do. The challenge of the Saint Michael student is to live these teachings beyond our doors into the local and world community. Faculty, parents, and students are the cornerstone upon which we build our faith-based, academic environment. The deepened awareness of the presence of Jesus Christ in our lives is fundamental to life at Saint Michael School. "][/tagline_box]

while the actual output looks like this:

The words I highlighted in light purple above amount to HTML codes with options embedded. It was easy to understand how the tags equated to the final product on the screen. The default shortcode includes a link and a button. I did not want those so I removed them from the shortcode. If you care to compare the original shortcode with my edited version up above, you can see how much I removed or replaced:

[tagline_box backgroundcolor="" shadow="no" border="1px" bordercolor="" highlightposition="right, left, top or bottom" link="http://themeforest.net/user/ThemeFusion" linktarget="" button="Purchase Now" title="Avada is incredibly responsive, with a refreshingly clean design" description="And it has some awesome features, premium sliders, unlimited colors, advanced theme options and so much more!"][/tagline_box]

With a tiny bit of playing I realized the highlightposition was the think line on the tagline box.

We will be calling our "blog posts" School News. The tutorial gave very simple directions for using the Recent Posts and Title shortcodes. With these features underway the website began to take shape.

I learned that there would be more work to actual put the photo slider on the screen so I saved that for another day.

Creating a Brand New School Website

I am in the process of creating a brand new website for our school. I want to leave a breadcrumb trail behind so that if someone else from my school needs to learn what I have done, they will be easily able to do so. A bigger concern is that if I have to do it again for some reason, the entire path will be laid out here. Perhaps someone else will find it useful, too.

Getting the Domain Name
Our school is associated with a parish. There are a multitude of hosting sites to choose from. My choice of HostGator was simple because the church had just set up their new site through this company. The parish chose a business account so the school followed suit. 

Advantages of HostGator:
The website was very easy to use. We will be allowed to host unlimited domains on our own account. I am not sure how that will help us yet, but I will find out. There are unlimited POP3 email accounts. They have a one click installation of WordPress. When I had a question, I was able to call their 800 number and I received a quick response from an individual who was well trained and their spoken English was easily understood.

Minor Inconvenience:
The company sent an email requiring the principal to call in to "prove" that we had indeed requested the domain. It took a day between submitting the electronic paperwork and having the principal call the company to verify the transaction. This was not a disadvantage, but it did slow me down a little.

Setting Up the Initial eMail Address

I believe that it will be advantageous to have an admin email address to capture all of the various sites and supports for the system. I created an administrator account in eMail. After signing on to the CPANEL (Control Panel) I looked in the Mail section for the Email Accounts icon. I created an account to administer the website creation project, an account with my own name, and there is a separate account that is automatically created as a "catch all" account for unrouted mail. 

The actual account creation is simple. The Email entry is the "address" of the email such as annoro. The Password must be at least five characters. It checks the strength. Mailbox Quota specifies how much storage space the individual will have in their account.


Installing WordPress

The installation of WordPress was fairly simple. I found the installation in the Software/Services section of the CPANEL. The Quick Install icon gives an array of choices. I found WordPress under the Blog Software heading. When the pointer hovers over WordPress a green arrow appears. Clicking on the green arrow leads to a Continue button to install the software. I did not capture all the steps in the installation of WordPress, but it seemed logical to me as I did it.

Determining the WordPress Theme
This step is quite time consuming. There are many free and paid WordPress themes. I have been taking a course through Team Treehouse. I applied for, and received, a two year scholarship to learn on their website. The most recent course I have been working on is Building a Responsive Website under the Intermediate Website category. Team Treehouse deserves a post of its own sometime. I knew I wanted a Responsive WordPress theme.

I did a search in Google for wordpress responsive theme education and came up with several choices. I then removed the word education from the search query and came up with a few more choices. My principal and I then sat a looked at theme after theme. We started listing what we liked and did not like about the themes. A pattern began to emerge. When all was said and done we settled on Avada. There is a one time fee for the theme. We needed a Paypal account to pay for the theme. After submitting payment I downloaded the theme and followed the 0 - READ ME FIRST.pdf directions. The developers really paid attention to the customer. They left a breadcrumb trail of files to get me to the documentation folder. This folder had a second 0 - read me first.txt with a simple message to open the index.html file.

The Table of Contents menu in index.html contains 24 major categories to get the user going with the theme. I signed up for the free forum support and began following the directions for the WordPress installation. I downloaded a free Museo Slab web font and installed it into WordPress. I imported the demo data into my site. This is a useful step. The demo data installed all I needed to get going with the development as well as the entire sample website. Another post will follow this with my foray into the development of the site.

Keeping Track of Various User IDs and Passwords
There are an interesting collection of new IDs and passwords. I opened a TextWrangler file to log every website, user id, and password. There were more than I would have imagined: the new website has a CPANEL userid and password, downloading the Avada WordPress theme required an envato account, ThemeFusion required an id and password for the community forum, the new website has an associated default email account, the administration account and the one with my name and those associated passwords, HostGator has a billing system with a unique password.

Now the Development Fun Begins
I have already started developing the pages. As I was doing so the other evening, I realized that I was missing a big opportunity for myself by not documenting all the steps. This will serve as a record of what I have done and I am doing. I have a few most posts to get to where I am in the process now. From there forward, I can document as I create. In this way, I will not forget any steps.