Now we will add our widget area to the TwentyCustom theme.

1.  In Dashboard ->Appearance -> Widgets, see that the theme currently has two widget areas: The Main Widget area and the Secondary Widget area….

current widget areas

that corresponds to these locations in our theme …

location of widget areas

2.  Let’s add a new widget area at location shown in blue above — the right side of the header.

3.  We put some code (marked in red below) in header.php of our theme folder TwentyCustom to make room for our new widget area …

widget area code in template

We bounded our existing header in a div floated left at 60% width.  We inlined the CSS styles for the purpose of this tutorial.  But you should refactor those styles out to your style.css file.

Then we created a second div floated left at width 40%.  This div shall be our header widget area.  To test how it shows up, we applied a blue border and put in dummy text “This is our new widget area”.

Finally, we wrapped these two divs in an container div with class “clear” because we see that class clear in style.css uses the micro clearfix technique to clear floats.

4. Applying these changes, we see our widget area is nicely placed …

widget area placed

5. Next we have to register our widget so that admins can configure it in the dashboard.  We use the hook APIs which goes into the functions.php file of our theme folder.  At the bottom of our functions.php, we write this …

code to register widget

How did we know to write this?   Because that was how the theme TwentyThirteen registered its Main and Secondary widget area.  Just search “register_sidebar” in your functions.php and you see similar code.

But what it means is …

The “add_action” line is the taking advantage of WordPress’s widgets_init hook.   “widgets_init” is a WordPress hook.  When that event happens (which will happen when wordpress start initializing widgets), WordPress is going to call our function which we arbitrarily named “header1_widgets_init”.  But by convention, we usually have the suffix of the function match the hook.  That’s why the function name ends with “widgets_init”.

Then we define our function header1_widgets_init.  It basically just calls the WordPress function register_sidebar.  ”sidebar” is what it calls “widgets area”.   register_sidebar takes array of key-value pairs, where you fill in the values.  For name, we gave it the value “Header Widget Area One”.  And we gave “header-1″ as the id.

6. The function register_sidebar enables our widget area to show up in the dashboard.  Go to dashboard now and you can see it …

widget area in dashbard

Note that the description that we passed into register_sidebar shows up as well.

7. While we are here, drag a search widget into there and give it the title “Find Something”.

add widget to widget area

8. But it won’t show up on our site yet until we alter our theme header.php file code to be like …

dynamic_sidebar

We wrapped an if-statement around the second floated div (which we have removed the debugging blue border).   If the header sidebar is active (as determined by is_active_sidebar()), only then we display the second div.   Contained within the second div is our header widget area.

We replaced the dummy text dummy text “This is our new widget area”  with the call to the WordPress function dynamic_sidebar().  Thgis function will output all the necessary code for your widget area.  You just have to pass it the widget area id, which we had specified as “header-1″ when we registered our sidebar.

8.  Now when you refresh the site, we see the search widget shown…

widget output code

Inspecting the code, we see that our widget is wrapped in a pair of “aside” tags.  This is because of the values that we gave it for before_widget and after_widget when we register_sidebar.

Note that h3 tags that wraps our widget title is from the before_title and after_title values passed into register_sidebar.

The class attributes in these tags are what we gave it.  Except there is a “%1$s” and a “%2$s” in the values for before_widget and after_widget.  These are sprintf placeholder arguments so that WordPress can pass the widget id and widget type into the tags.

What you want to do is to clone the Twenty Thirteen theme and give it a new name.  Then you can make customization edits to this new theme.

1.  In your wp-content/themes/ folder, copy the twentythirteen folder to a new folder called twentycustom.  We will call our new custom theme “TwentyCustom”.

clone wordpress theme folder

2.  Within your new twentycustom folder, find the style.css file and edit the theme name to be “TwentyCustom” .  This line enables WordPress to find your theme.   You might want to alter the description and other properties in the file as well.

3. Now when you go to Appearance -> Themes in your dashboard, you will see your new TwentyCustom theme.  If you want to change the theme thumbnail image, it is the file screenshot.png in the twentycustom folder.  Click “Activate” to activate your new cloned theme.

activate the cloned theme

4.  Now you can go make whatever edits you want in the theme files within the twentycustom folder without worry that WordPress updates would overwrite it.

HTML 5 is a significant change from HTML 4.  It comes with brand new tags and a new doctype plus more.   However older browsers that was in existence prior to HTML 5 will not know of these news tags.  Of course, we will want our page to be viewable on these older browser as well. Therefore there are various tricks and techniques that we have to employ in order to get our HTML 5 page to render on older browsers.

The easiest way to start is to start with an HTML 5 template that has all these techniques and best practices coded for you already.   HTML 5 Boilerplate is the popular template to use.  We will use this template as the skeleton for our HTML page.

1.  First download the latest HTML5 Boilerplate from http://html5boilerplate.com/

In this tutorial we are using version 4.0.0.

2.  After you have downloaded and extracted the zip file into a new folder on your hard disk, you will see a bunch of files like the following…

3.  The main file that we are interested in is index.html.   Open this file in your favorite text editor. (I’m using Dreamweaver).

4.  Note the new doctype is now the following…

<!DOCTYPE html>

This is the new doctype for HTML5.  If you see this, it means that the author intends for this to be an HTML 5 document.

5.  Without changing any code, just test it by running the index.html file in your browser.   We are using Chrome for this viewing. As of this writing in October 2012, Chrome version 22 is the browser that supports the most features of the latest HTML5 specifications, according to HTM5Test.com. That is why many web designers like to using Google Chrome during development.

You will see the following in the browser …

which indicates that everything currently works.

You can say that this is your first “Hello World” HTML5 page.  Of course, we now want to start writing some code so that we can understand how all the pieces are put together.

6.  Let’s add a title to our page by typing in “Our First HTML5 Page” into the index.html file in between the <title> tags as shown…

This is known as the “Page Title”.  After saving the file and refreshing the browser, you should see that our page title shows up in the browser tab.

7.  HTML5 Boilerplate intends for you to delete things from it that you do not need.  One of the things that it puts in near the bottom of the HTML file is a code snippet intended for Google Analytics.  Since we will not be using that in this example, we will delete it.  If you don’t know what Google Analytics is, then you don’t need it.

Delete the code as that is marked as shown…

If you save file and view in browser, you will see that the deletion had no effect.

8.  Let’s make the background color be a pale gray.   Styling information is done in CSS.  And if you are using HTML5, you would be using CSS3 (as opposed to CSS2).   The CSS code is found in the main.css file within the css folder.  You can see that our index.html file links to this css file via the link tag shown below …

8.  Now open up the main.css file in your editor and look for the section that says “Author’s custom styles” — that’s for us.

9.  We write our first CSS rule into that section.   The code shown above highlighted by the red rectangle is the code that we just added.  This tells the browser to set the background color of our page to be light gray (which is the hexidecimal color #CCCCCC).  Save changes in the CSS file and refresh browser.   Our page now has gray background.

10.  Now you may have noticed that the index.html page also links to another css file called normalize.css.

11. You don’t have to worry about that css file.  Not all browsers may use the same default styling for a HTML page.  Hence, one technique is to use CSS to make the styling consistent among browsers .   This is known “normalizing the styles” and the code for doing that is known as “css reset code”.  That is what is contained within normalize.css.

12.  Also within normalize.css, you will see this code …

This is to allow older non-HTML5 browser to work well with the new HTML5 tags (some of which are article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary).

The CSS contain styling to make these new tags display as “block style” tags.   Shown above is the “display” property with the “block” value for these new tags.  Don’t worry about what that means for now since this is your first  HTML5 page.  We have to take things one step at a time.  Just know that the above CSS code is needed to make older browser work with the new HTML5 tags.

13.  Next, let’s give some definition to our content area containing the text by adding some borders and a different content background color to set it apart from the background color.  In the index.html file, we will add an “article” tag (one of the new HTML5 tags) around the text content as shown…

Note that the starting tag (the first tag) is <article>

And the closing tag is </article> with the extra slash at the end.  That is how most tags work.  They come in pairs with a starting tag and a closing tag.  Save changes and refresh browser.

14.  You will see no effect until we add styling rule for the article tag.  Let’s add the article CSS rule to the main.css file…

We set the width of our page to be 500 pixels with the line …

width: 500px;

The margin property has two values …

margin: 20px auto

The first value 20px represents the top and bottom margins of our page.  The second value represents the left and right margins of our page.  Since we set that to “auto”, it has the effect of making the page be centered horizontally across the browser.

Saving the file and running in browser, we get  …

15.  In CSS3, we can have rounded corners and drop shadows like …

by adding the following two lines to our article CSS rule as shown below …

For the border-radius property, we set the roundness to 8 pixels (the greater the value, the more rounded).

The first two values of the box-shadow property represents the horizontal and vertical offset respectively.  The third value is the amount of blur.  And the fourth value is the color of the shadow.

16. One last thing before we are done, the text content is too close to the left edge of the page.  Add a bit of padding around the article element by ….

and we should get …

Since  we had only specified one value for the padding property, it will use the 30 pixels as padding for the top, right, bottom, and left edges.

In this case, since all the properties of the article CSS rule is unique, it does not matter which order you place the properties in.  We just like putting the padding property where it was.

And that is your first HTML 5 page.

This can be fixed by applying …

img { max-width: 100%; }

to the image. This constrains the maximum width of the image to be the width of its container. If the container resizes smaller, the image will accordingly resize smaller to fit the container. If the container resizes larger than the image width, the image will just be as big as its native width.

The image will not scale up, unless you do …

img { width: 100%; }

which in this case would cause the image to be always at the width of its container.

This is known as fluid image. It not only work for images, but works for other media as well. Often designers will use the rule …

img, embed, object, video { max-width: 100%; }

Alternatively, instead of resizing the image, one can hide any portion of the image that falls outside its container by …

img { overflow: hidden; }

This can be remedied using a the “faux column” technique that uses a background image of the form …

This background is to be applied to the page wrapper and repeated down in the y-direction.

However, you have to make this image really wide (say 3000 pixels) to accomodate those people who stretch their browsers with really wide monitors.

And then apply this background image as follows …

The trick is use the background x-position a percentage that matches the column split percentage.

Here is how it looks….

And it will look the same even if you resize the browser.

If you are using pixel fixed width, when the browser window is smaller than the page design width, you get horizontal scroll bars.

By using percentages instead, your page will resize as your browser resizes.

Suppose you have an HTML structure such as …

We want our article to be on the left taking up two-thirds of the page. And the aside to be one-third on the right. Both are contained by our page represented by a div of id “wrapper” which we want to be 90% of the width of whatever our browser window happens to be.

So we would construct our CSS to be …

And this is how it looks in our browser ….

Note that our page is centered horizontally across our browser window with a 5% margin on left and right. That is because our page is 90% of browser width.

And if we resize our browser wider, our page resizes and the proportion of our article and aside remains the same.

Note that the column lengths are uneven due to uneven amounts of content. We will learn how to fix this with resizable faux columns in the next tutorial.

Here is how.

In your HTML CSS …

html {    
    font-size: 100%;
}

That means that the font will be in the browser’s default size, which is typically 16px.

If your design calls for larger or smaller font than that, use “em”. For example, if you want exactly 16px, then it would be 1em. As in …

body {
    font-size: 1em;
}

If you want your h1 to be 32px, use “2em” as in …

h1 {
    font-size: 2em;
}

If you want your h2 to be 24px, it would be 24/16 = 1.5em.

If you want class “.smalltext” to be 12px, it would be 12/16 = 0.75em.

Advanced note: In HTML5Boilerplate, they use

html {    
    font-size: 100%;
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
}

where the 2nd and 3rd line is to “prevent iOS text size adjust after orientation change, without disabling user zoom”.

horizontal CSS tabs

View live code here.

Graphics Used

The graphics looks like this …

Default gradient tab: default_tab.jpg

Highlighted tab…

But instead of using two different graphic files for the two tabs, we combine the default tab and highlighted tab into one graphic as shown.

Combined tab: tabs.jpg

Because the two tab images are on one file, they will load with the single file. This will improve performance due to one less server call to get another graphics file. And it will avoid any “flicker” that may occur if we had to wait for the browser to load a separate image for the hover state.

Page Structure

First, we will start out with a page structure on to which we will place our tabs to be sitting right on top of the gold nav strip.

page structure for horizontal tabs

The code for this page looks like …

code for page structure of CSS tabs

Note that for the sake of simplicity, this tutorial had placed the CSS on the same page embedded in the head section. However, for production code, you should put the CSS in a separate CSS file. Also images will be referenced in the same directory. Again, for production code, they would normally be in a separate directory.

Coding the CSS Based Horizontal Tabs

1. Start by letting the tabs be links in an unordered list…

And we get this …

2. Because different browsers may have different default margins and paddings for ul‘s and li‘s, we set them all to zero first and then we can adjust them later. We give the ul element an id of tabnav and create a CSS rule to select this ul and li’s that it contains.

3.  In the CSS, we remove the bullets that normally appears in the unordered list.  And we remove the underlines that normally occurs in the links for li’s.

4. The main characteristic about horizontal css tabs is that they actually be horizontal.  We make the list items horizontal by floating the li’s.  When we float the li’s, we need to give it a width.  We set the li’s to 88px by 23px since that is the size of our graphic image for one tab.

Now the list items are horizontal …

5. We set the display of the link to be block so that the link will expand to fill the entire width of the li, making the entire tab clickable and not just the text clickable.  This is done with the following CSS …

display:block;

6.  We set the background image of link to be the tab graphic.  We center align the text.  Finally, we stylize the link with a color and font size that is suitable to match the tab graphics…

And we get…

7. Notice that the tabs are much shorter than we would like.  In fact, the tab height is only taking up as much height as needed by the text instead of the full 23px height of the tab graphic.  Therefore, we remove the “height” attribute from the “li” to the “a” selector rule.

And we get …

8.  The text is sitting a little bit too high in relation to the tab graphics, so we add 3px top padding to the link.  But when we add padding to the link, remember to decrease the height by the same amount since “height” in CSS is defined as “content height” and does not include any padding.

9. To create the hover effect where the highlighted tab is displayed when the mouse cursor is over the tab, we add a new CSS rule using the hover pseudo-class where we shift the background image to the left by 88px.  Recall that the highlighted tab image is on the right-half of the graphics file and that each tab image is 88px in width.

We also altered the link color upon hover to better constrast with the highlighted tab.

And here is what it looks like if you hover over the home tab…

10.  If we want the home tab to stay highlighted because this is the “home” page, then we have to add a class to the “home” link to make it different from the rest of the links.  We’ll give it the arbitrary class called “selected” and add the CSS selector rule as shown…

11.  We want the tabs to be sitting on the gold nav strip, not floating near the top of the page masthead.  No problem.  With some graphical measurements, we determined that all we need to do is to move the whole tab structure 71px lower.  We do so by giving a top margin to the ul element, since the ul element is what contains all the tabs.

And now it looks like …

12.  Let’s space the horizontal tabs apart by adding 10px right margin to the li element.

And we got our final product that looks like …

horizontal CSS tabs

And there you have it.

In this tutorial, we will show you how to use FileZilla’s “Quick Connect” feature to transfer files to a web server.

Although this method is the simplest way to connect, it is not the best because it transmits passwords and data over the internet route via “clear text”. Once you have learned the basics of FTP, ideally you will want to use SFTP which is a secured transmission of data as described in our other tutorial.

FileZilla Quick Connect FTP

Step 1: First download and install FileZilla from FileZilla-Project.org. Click on the “Download FileZilla Client” button. It is free.

Step 2: In order to connect to the webserver, you need three pieces of information provided by your webserver administrator: 1) the host name, 2) the username, and 3) the password.

In this example tutorial, we use these three fake pieces of information…

server: example.com
username: someone@example.com
password: 123456

Note that depending on the webhost, the username can in the form of an email address (but it is not a real email address) as in the above or it can be a single word as in “someone“.

Step 3: After you run FileZilla, enter the server, username, password and click the “Quick Connect” button as shown.

Quick FTP connect with Filezilla

Step 4: The pane on the left shows your local disk. The pane on the right shows your webserver. In the left pane, navigate to the files you want to upload. Using the left pane and then drag those files from the left pane to the right pane.

Step 5: When done, disconnect the connection to the server by clicking the disconnect icon.

More info…

• Hostmonster’s Video Tutorial on downloading and using FileZilla
• FileZilla Documentation
• Using FileZilla Site Manager to remember connection info

The text surrounded by the title tags in the HTML code is what the browser will display in the browser window frame and browser tabs.

Joomla title tag

By default, Joomla sets the title tag to be the title of the article being displayed. We want to create a plugin that will append our site name at the end of the title tag as in …

sitename added to title tag

For the purposes of this example, the site name is “Demo Joomla Site”.

Do Not Modify Core Joomla Code

The core Joomla code that controls the output of the title tag is found in …
libraries/joomla/document/html/renderer/head.php

However, it is not considered good practice to alter this file here. Because an Joomla upgrade may wipe out your changes to that file. Altering core Joomla files to get the behavioral changes you want is sometimes known as a “hack”.

Better to Create a Joomla Plugin

Instead, a better way is to create a Joomla plugin that will add our site name to this output without modifying the Joomla core code. We will be inserting new files into the Joomla system instead of altering any existing Joomla files. We will call our plugin “SiteNameInTitle”.

1. Plugins can be in any of the nine plugin groups shown below in the Joomla file system.

Joomla plugin groups

We will put our plugin into the “system” group. So we create two files (sitenameintitle.xml and sitenameintitle.php within the system folder on our local computer (not on the webhost yet). I like to keep all the characters of the filename in lowercase.

2. The sitenameintitle.xml is the plugin installer file. Make it look similar to the following with your own relevant information.

Joomla plugin xml file

The name of our plugin is highlighted in the above. Also note that we put group=”system” and the reference to our second file sitenameintitle.php

3. For our second file sitenameintitle.php, we put the following …

Joomla plugin code

We create a class plgSystemSiteNameInTitle which extends JPlugin. The class name is constructed by convention to start with plg to indicate a plugin followed by the plugin group and by the plugin name.

4. Inside the class, we have a function onAfterDispatch() to handle the event.

First we get our document object by …
$document = & JFactory::getDocument();
We need this to access our title.

We handle the event onAfterDispatch by setting the document title to whatever the document title is currently suffixed by the site name …

$document->setTitle($document->getTitle() . ‘ – ‘ . $mainframe->getCfg(‘sitename’));

We use $document->getTitle() to get our current title. We concatenate it with a hyphen. And we get the site name as configured in the Joomla administrator via $mainframe->getCfg(‘sitename’)

Then we use $document->setTitle to set the new title.

5. Now zip the two files up into a zip file called sitenameintitle.zip

6. In your Joomla Administrator -> Extensions -> Install, browse to pick up the sienameintitle.zip and click Upload File and Install

upload and install plugin

7. You should see “Install Plugin Success”. Note the plugin description from the XML file is also shown here.

Joomla plugin successful

Joomla has just unzipped the two files sitenameintitle.xml and sitenameintitle.php into the plugins/system folder on your webhost.

8. In Extensions -> Plugin Manager, find your new plugin and enable it.

enable Joomla plugin

9. Refresh your browser and see that site name is now added to the title tag…

sitename added to title

Notes:

We can not remove the text “Mozilla Firefox” that you see in the browser frame because that is put there by the browser and not controlled in the title tag HTML code.

This tutorial refers to Joomla version 1.5.14.