How to use Twitter Boostrap without the Overhead

I went over to the Twitter Bootstrap website today to download the latest Bootstrap version for a new project I am starting and was happy to notice that the Bootstrap files are now available as remotely included files! That means you do not have to download the files and put them on your server. They include the two main files, the CSS and the JavaScript files, for Twitter Bootstrap.

How to use remote file includes for Bootstrap

MaxCDN has provide CDN support for Bootstrap’s CSS and JavaScript files. Simply replace old links to CSS and JavaScript files with these Bootstrap CDN links:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

 

 

Dynamically Click on a Button with JavaScript

Today I ran into a case where I needed to emulate a button click. How did I imitate a button click? Here is how I did it with a little JavaScript and the click function.

Emulate Button Click with JavaScript

Imagine you have a button with the id of mybutton:

document.getElementById(‘mybutton’).click();

The above JavaScript line will click on that button. What I needed to do is to have a button clicked when someone clicks on a div. Note that it could be any element that is clicked on such as another button or even an image. I did this:

<div style=”width:400px;height:225px;border:1px solid red;” onclick=”document.getElementById(‘buttonb’).click();” />Click on this div to click the submit button…</div>

<input type=”submit” id=”buttonb” name=”buttonb” value=”” />

In the above example, when the user clicks on the div that says “Click on this div to click the submit button…”, the submit button is clicked and whatever form it goes to is submitted. There are various reasons why you might need to use this trick and it is a good one to have in your bag. Notice I added styles to the div to make it visible.

WordPress Responsive Top Navigation Menu

Code a Responsive Top Navigation Menu in WordPress

As promised, here are the steps necessary to code a completely responsive top navigation menu into your current WordPress theme:

  1. If you know what your current theme is. Skip to next step, otherwise go to your WordPress admin dashboard and click on appearance/themes and see which theme is your active theme. Mine is twenty eleven so that is what I will reference in this tutorial, but the same instructions apply to any WordPress theme.
  2. Open the header.php file for your theme in a text editor or from the WordPress admin editor by going to appearance/editor and click on the header.php file name in the right column of the page.
  3. In header.php look for a meta tag for devices. In twenty eleven it looks like this:
    <meta name="viewport" content="width=device-width" />

    And change it to look like this:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  4. Now open your single.php file and search for the nav tag which should be at line number 17 or so. Delete everything in between the opening nav tag and ending nav tag including the tags themselves and replace them with:
    <nav><?php wp_nav_menu( array( 'theme_location' =>  'primary' ) ); ?></nav>
  5. Open your theme’s style css file and append the following CSS styles to the end of it:
    nav select{
      display: none; /*= Force dropdown navigation to hide on desktop = */
    }
    @media (max-width: 960px)  
    {
      nav ul     { display: none; } /*= Force normal horizontal navigation to hide mobile devices and ipad = */
      nav select { display: inline-block; } /*= Force dropdown navigation to get displayed on mobile devices and ipad = */
    }

That’s all there is to customizing your WordPress top navigation menu to work great on iPod, iPhone and other mobile devices. Go ahead and check it now on a mobile platform and verify that it works.

How to Identify a Font

Today I was challenged with figuring out what a font was that a client wanted. He had sent me an image of some text with the font he wanted, but no name and no example HTML code to look at. So what did I do? It wasn’t easy at first until I found some helpful sites on the internet.

Identify Font From Image

A site to help you discover what a font is from an image:

http://www.myfonts.com/WhatTheFont/

The above website allows you to idenfy a font by uploading an image of the font then asking a series of questions about what letter is what. A tip is to take an image of the font that is about 14 characters long and save it as a .jpg before uploading to that site.

Identify Font by Answering Questions

Here is another site that will help you figure out what a font is just by answering a series of multiple choice questions about the font in question:

http://www.identifont.com/

Just answer the first question on that page on the left site and keep on going until it gives you the answer you were seeking with several alternative fonts from which your font will most likely be one of.

Summary

I used both above methods successfully after years of having issues identifying fonts, so I thought I should share them.

How to Add Custom Fonts to Any Website

Today we are exploring how to add custom fonts to any website including WordPress. First let’s take a quick look at the basic available font formats:

Font Formats:

TTF – Works in Firefox and most decent browsers but does NOT work IE and iPhone.
EOT – IE only because they have to be difficult.  EOT is an acronym for Embedded Open Type. The format was created by Microsoft (the creator of @font-face) over 15 years ago. It’s the only format that IE8 and below will recognize when using @font-face.
WOFF – Web Open Font Format. Created for use on the web, and developed by Mozilla, it is the compressed, emerging standard. Should soon work with ALL modern browsers!
SVG – SVG or Scalable Vector Graphics fonts are For iPhone/iPad. Its the only format allowed by Safari version 4.1 and below. iPhoneSVG fonts are basically for older versions of iOS Safari (3.2-4.1).

Here is how to embed custom fonts on your website using the @font-face property of CSS:

  1. First be sure to have at least a true type font file and a .woff file because .woff is for modern browsers including Firefox while true type fonts are for some versions of Firefox, safari, android, etc. browsers. so if you only have a .ttf file for your new font, use an online file converter to convert the .ttf file to a .woff file like the one found HERE: http://everythingfonts.com/ttf-to-woff
  2. find your site’s main CSS style sheet and add the following code to the start of the file:
      @font-face{
    font-family: ‘shapefont’;
    src:  url(‘fonts/OptimusPrinceps.woff’) format(‘woff’), /* Modern Browsers */
    url(‘fonts/OptimusPrinceps.ttf’)  format(‘truetype’);/* Safari, Android, iOS */
    }
  3. Then simply declare your font wherever needed in the site’s css sytles using the new font-family you created so an example CSS delaration for the above font which I named “shapefont” would be:
    font-family: shapefont;

NOTE: if you copy and paste, you’ll need to replace all quotes, single and double because this site uses fancy ones that don’t work with CSS code.

Using Free Web Font Kits from FontSquirrel.com

A quick and easy way to make sure that you have fonts that will work in all browsers and devices is to include all four basic font types, tff, wof, eot and svg. An easy way to assure that you can get all four in a nicely wrapped font kit is to use Font Squirrel. Here are the simple instructions for geting a complete free font kit from Font Squirrel:

  1. Go to http://www.fontsquirrel.com/fonts/list/find_fonts and you’ll see a list of the fonts available through Font Squirrel.
  2. Click on one of the fonts(not on the download button because that is for one font type only).
  3. Then select the “webfont kit” tab on that font’s page.
  4. Make sure that all 4 file types are checked then click on the button that reads “DOWNLAD @FONTFACE KIT” and click “ok” to download to your computer.
  5. Unzip the zip file on your desktop and open it. You’ll see a file named “How_to_use_webfonts.html” which will have step by step instructions on how to install the fonts from here.

A Sure-Fire Method to Make your Font Work

I understand that the instructions from Font Squirell can be a little vague, so here is my sure-fire method for installing a web font kit and this method will work with fonts from anywhere by the way.

  1. After you have your font files(steps 1-5 above). Make a new folder on your desktop named “mysite”.
  2. put your HTML page or a test HTML page into your “mysite” folder.
  3. Inside of the head tags in your HTML page, add:      <!–Custom fonts:–>
        <link rel=”stylesheet” href=”font.css” type=”text/css” charset=”utf-8″ />
  4. Create a new CSS file called font.css and paste the following code into it: @font-face{
    font-family: ‘MyFont’;
    src: url(‘WebFont.eot’);
    src: url(‘WebFont.eot?iefix’) format(‘eot’), url(‘WebFont.woff’) format(‘woff’), url(‘WebFont.ttf’) format(‘truetype’), url(‘WebFont.svg#webfont’) format(‘svg’);
    }
  5. In line two of the above code, where font-family is declared, change “MyFont” to whatever you want to call your new font. This is the name you will use to call your font by in your regular style sheet.
  6. Save the font.css file and put it inside your “mysite” folder with your HTML page.
  7. Move your .wott, .eot, .ttf and .svg font files into the same “mysite” folder as the HTML and CSS files. If you are using a Font Squirrel kit, open the folder you unzipped earlier, find the “web fonts” folder inside and select the one you want. There are different types such as light, medium, bold etc. for most fonts. You may choose to install more than one type. If so, simply repeat the process for each type and give it a unique font-family name. If you’re not sure which folder has your font files, use the one that ends with “regular_macroman” and open it. copy the .svg, .eot, .wott and .ttf files into your “mysite directory.”
  8. Take the name you named your custom font(originally MyFont”) in steps 4 & 5 above and use it in your web page’s CSS style sheet. If you don’t have one yet, create a new file called style.css and add the following code to it:

    body{
    font-family: “MyFont”;
    }

  9. Save your style sheet as style.css if you made a new one. If you had an existing CSS file already, modify the font-family declarations you want to include the custom font name you created for “MyFont”. Simply replace whatever comes after “font-family:” with the name of your new font wherever you want to use it and you are done!

 Summary

That’s really all there is to it. The Font Squirrel method just described was made simple by putting everything in the same folder. You’ll probably desire a different structure, so be sure to change any file paths accordingly if you do so. If you’re doing this to a WordPress website, just locate your current theme’s style.css file and add the @font-type declaration shown above to the top of the file then add the font you named wherever you like in the site using the font-family declaration. It’s easy as pie! Good Luck!

Buy Scripts, Applications and Web Tools at Jafty.com/products

Yes, I finally am starting to sell some of my products that I have been developing for over 12 years now. I am only putting together the best tools I have made and remaking certain ones I find the most useful for sale on my website, Jafty.com/products

Types of Products for sale on Jafty.com/products

  • Email Marketing tools
  • Domain name tools
  • DNS tools
  • Server administration tools
  • webmaster tools
  • PHP tools
  • Customized tools for business
  • Have me build one custom for you if you don’t see what you need

CLICK HERE TO VISIT Jafty.com/products/ and see what’s listed for sale now. However, I do not have them all listed yet, so drop me an email or give me a phone call at 330-903-6074 or 330-417-3617 to find out how I can help you.

jafty0

Want to learn more about SEO? Check out these relative books from Amazon:

Twitter Bootstrap Tutorial

This is a beginner’s Bootstrap tutorial for those of you who are just starting out using Twitter Bootstrap.

What is Twitter Bootstrap?

Twitter Bootstrap, which I will refer to simply as Bootstrap from here on out, is a collection of JavaScript, CSS and images set up in an organized manner for web developers to enrich their programming interfaces with such as websites, online applications and user interfaces.

Things you  can do with Bootstrap include but are not limited to the following:

  • Forms
  • Navigation
  • Bread Crumbs
  • Tables
  • Responsive Designs
  • Icons
  • Tabs
  • Thumbnails
  • Progress Bars
  • Error Alerts
  • Modal Windows
  • Dropdowns
  • Pop Overs

Bootstrap Plugins

Bootstrap has a plethora of plugins that can be used to enhance your applications. Some of the plugins include:

  • Scrollspy – allows you to automatically update nav targets based on scroll position.
  • Carousel – creates content or image sliders.
  • Buttons – a plugin to help you easily create styled buttons.

 

Why Use Boostrap

Hopefully just from reading this far in this Bootstrap tutorial, you should already have reasons to use Bootstrap, but if you haven’t ready enough to convince you yet, read on and also look at these before and after screenshots of the exact same HTML code with and without Boostrap:

Before:

b4

After:

aft

The before image above is without the Bootstrap CSS file linked to the HTML document and the after image is with the Boostrap CSS fle linked. See the difference Bootstrap makes to the look of a form? Pretty nice and easy if you ask me since all you have to do to make it work is link to the style sheet and include the proper class names in the form elements as in the following example code which produce the above images:

<!DOCTYPE html>  
<html lang=”en”>  
<head>  
<meta charset=”utf-8″>  
<title>Twitter Bootstrap Version2.0 horizontal form layout example</title>  
<meta name=”description” content=”Twitter Bootstrap Version2.0 horizontal form layout example from w3resource.com.”>  
<link href=”bootstrap/css/bootstrap.css” rel=”stylesheet”> 
</head> 
<body> 
<form class=”form-horizontal”> 
        <fieldset> 
          <legend>Controls Bootstrap supports</legend> 
          <div class=”control-group”> 
            <label class=”control-label” for=”input01″>Text input</label> 
            <div class=”controls”> 
              <input type=”text” class=”input-xlarge” id=”input01″> 
              <p class=”help-block”>In addition to freeform text, any HTML5 text-based input appears like so.</p> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”optionsCheckbox”>Checkbox</label> 
            <div class=”controls”> 
              <label class=”checkbox”> 
                <input type=”checkbox” id=”optionsCheckbox” value=”option1″> 
                Option one is this and that—be sure to include why it’s great 
              </label> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”select01″>Select list</label> 
            <div class=”controls”> 
              <select id=”select01″> 
                <option>something</option> 
                <option>2</option> 
                <option>3</option> 
                <option>4</option> 
                <option>5</option> 
              </select> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”multiSelect”>Multicon-select</label> 
            <div class=”controls”> 
              <select multiple=”multiple” id=”multiSelect”> 
                <option>1</option> 
                <option>2</option> 
                <option>3</option> 
                <option>4</option> 
                <option>5</option> 
              </select> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”fileInput”>File input</label> 
            <div class=”controls”> 
              <input class=”input-file” id=”fileInput” type=”file”> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”textarea”>Textarea</label> 
            <div class=”controls”> 
              <textarea class=”input-xlarge” id=”textarea” rows=”3″></textarea> 
            </div> 
          </div> 
          <div class=”form-actions”> 
            <button type=”submit” class=”btn btn-primary”>Save changes</button> 
            <button class=”btn”>Cancel</button> 
          </div> 
        </fieldset> 
</form> 
</body> 
</html> 

 

 

  • <!DOCTYPE html>   
  • <html lang=“en”>   
  • <head>   
  • <meta charset=“utf-8”>   
  • <title>Twitter Bootstrap Version2.0 horizontal form layout example</title>   
  • <meta name=“description” content=“Twitter Bootstrap Version2.0 horizontal form layout example from w3resource.com.”>   
  • <link href=“twitter-bootstrap-v2/docs/assets/css/bootstrap.css” rel=“stylesheet”>  
  • </head>  
  • <body>  
  • <form class=“form-horizontal”>  
  •         <fieldset>  
  •           <legend>Controls Bootstrap supports</legend>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“input01”>Text input</label>  
  •             <div class=“controls”>  
  •               <input type=“text” class=“input-xlarge” id=“input01”>  
  •               <p class=“help-block”>In addition to freeform text, any HTML5 text-based input appears like so.</p>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“optionsCheckbox”>Checkbox</label>  
  •             <div class=“controls”>  
  •               <label class=“checkbox”>  
  •                 <input type=“checkbox” id=“optionsCheckbox” value=“option1”>  
  •                 Option one is this and that—be sure to include why it’s great  
  •               </label>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“select01”>Select list</label>  
  •             <div class=“controls”>  
  •               <select id=“select01”>  
  •                 <option>something</option>  
  •                 <option>2</option>  
  •                 <option>3</option>  
  •                 <option>4</option>  
  •                 <option>5</option>  
  •               </select>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“multiSelect”>Multicon-select</label>  
  •             <div class=“controls”>  
  •               <select multiple=“multiple” id=“multiSelect”>  
  •                 <option>1</option>  
  •                 <option>2</option>  
  •                 <option>3</option>  
  •                 <option>4</option>  
  •                 <option>5</option>  
  •               </select>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“fileInput”>File input</label>  
  •             <div class=“controls”>  
  •               <input class=“input-file” id=“fileInput” type=“file”>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“textarea”>Textarea</label>  
  •             <div class=“controls”>  
  •               <textarea class=“input-xlarge” id=“textarea” rows=“3”></textarea>  
  •             </div>  
  •           </div>  
  •           <div class=“form-actions”>  
  •             <button type=“submit” class=“btn btn-primary”>Save changes</button>  
  •             <button class=“btn”>Cancel</button>  
  •           </div>  
  •         </fieldset>  
  • </form>  
  • </body>  
  • </html>  

– See more at: http://www.w3resource.com/twitter-bootstrap/forms-tutorial.php#sthash.kgyHadcw.dpuf

Get Rid of submenu indicator in Udesign WordPress Theme

Are you as annoyed with that little character after the menu items that have sub-menus in the Udesign theme’s main navigation as I am? Here is the simple solution. Nothing is generally simple when making changes to the UDESIGN theme, so I like to post little hints to help people who may be struggling. To get rid of that little character after main navigation menu items, ,simply add the following line of code to the style.css file inside the Udesign theme’s style1/css folder:

span.sf-sub-indicator{display:none !important;}

Editing Style of the Cheope WordPress Theme

This tutorial describes how to make changes to the U-Design WordPress theme and most of the content will probably apply to most other themes as well.

Finding the element you wish to edit To find what you need to edit, I use Firefox with the Firebug plugin. Right click on the page element you wish to change the style of and select “Inspect Element” to view it’s HTML and CSS code at the bottom of your browser window.

In my case, I wanted to change out the background in the U-Design theme so I clicked on an area where only the background was visible and got the div id for that element which in my case was “top-wrapper” there are several sections to the background in the U-Design theme, that is the top one. I checked all the CSS files in the source code and that top-wrapper element wasn’t listed in any of them, so I went to FTP client and searched around to find it in

Finding the style sheet that has the CSS

Next you have to find the style sheet that has the CSS declaration you are seeking. Do this by looking at the source of the page and do a search for “.css” to quickly find the style sheet names. Then go to your FTP client and locate the file to download for editing.

The trick with UDESIGN styles to change the background:

Finally I figured out through hours of trial and error that the way to get the full background image implemented in UDESIGN theme was to go to the wp admin and go to “settings” click on “page-navi” and uncheck the box that said to use pagenavi styles…

Creating a WordPress Theme From Scratch

There is a lot to learn about WordPress theme development. In this intermediate level tutorial for aspiring WordPress theme developers, I will describe the bare essentials for developing your own responsive WordPress theme from scratch.

 

What is a Responsive WordPress Theme?

When I speak of responsive WordPress themes, I mean a theme that is mobile friendly with elements that change size and sometimes position according to your current screen size. In my opinion a truly responsive web page should look good in any browser window and any elements on the page should self-adjust according to the window size.

 

Dynamic sizing of elements on the webpage is important. This means that elements should change size and sometimes even shift position while you resize the browser window. In other words, you will see the images change size as you resize the window. Other objects can resize as well,but images are often the number one concern. Divs, text and other inline or block objects can also be sized accordingly while the window size is manipulated. Of course this allows for the page to open at any size and size the elements accordingly.

 

File Infrastructure

The first thing you can do to start your theme is create a directory to house your theme in the wp_content/themes directory of your WordPress installation. Name a new directory after the theme you are creating. In this tutorial, we are creating a theme called responsive_jafty so that is what you can call the directory unless you have a more appropriate theme name in mind, in which case you are free to name it as you please of course.

 

The actual files we will be creating will be style.css, index.php, header.php, sidebar.php and footer.php, the bare essentials to get you started in theme development. These files need to be named as stated above or WordPress will not recognize them as it should.

 

Layout

Before you start coding it is crucial to know what you are doing. The very least you should do is draw a basic wireframe with the main areas of your webpage defined as in the following image:

When developing a professional theme, you will want to do a little more than a simple wireframe, but this works for our learning purposes. In real life, if you were developing a professional theme for yourself or a paying client, you would want to develop a detailed Photoshop rendering of the theme you wish to create. You should at least layout the home page or main posts page in Photoshop including all details. The finished Photoshop template should look exactly like the theme you wish to create. However, a wireframe is often a great way to start if you don’t really know what you want or if you are a stronger developer then you are a designer.

 

Creating Your header.php Script

One of the essential files to create a theme is the header.php file. From looking at the above wireframe, I can tell how I will need to code heaer.php. Here is a working example:

 

<!DOCTYPE html>

<html>

<head>

<title>Jafty Responsive WordPress Theme</title>

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>

</head>

<body>

<div id=”wrapper”>

   <div id=”header”>

   <h1>Jafty Responsive Theme</h1>

   </div><!–end header–>

 

That’s all there is to a simple header file. It just needs a doctype declaration, opening HTML tags an opening wrapper div and the site’s header div with the contents of the header.

Creating the index.php file

The next essential page for your theme is the index.php file that includes the above header as well as the sidebar and footer files. Here is a working example of a simple index.php page:

 

<?php get_header(); ?>

 

   <div id=”main”>

      <div id=”content”>

      <?php if (have_posts()) : while (have_posts()) :     

 

   the_post(); ?>

      <h1><?php the_title(); ?></h1>

      <h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>

      <p><?php the_content(__(‘(more…)’)); ?></p>

      <hr>

      <?php endwhile; else: ?>

          <p><?php _e(‘Sorry, no posts matched your criteria.’);

 

?></p>

      <?php endif; ?>

      </div><!–end content–>

   </div><!–end main–>

   

 

   <div id=”sidebar”>

   <?php get_sidebar(); ?>

   </div><!–end sidebar–>

 

<div id=”delimiter”></div>    

   

   <div id=”footer”>

   <?php get_footer(); ?>

   </div><!–end footer–>

</div><!–end wrapper div–>

</body>

 

</html>

That’s a very basic working example which you may expand upon as necessary to get the desired results. Now lets move on to the footer and sidbar pages next.

 

Creating Your sidebar.php Script

The sidebar.php script just needs to have a few built in functions from WordPress to get your sidebar objects into your template such as categories and archives as in the following example code for sidebar.php:

 

<h2 class=”sidebartitle”><?php _e(‘Categories’); ?></h2>

<ul class=”catlist”>

<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>

</ul>

<h2 class=”sidebartitle”><?php _e(‘Archives’); ?></h2>

<ul class=”archivelist”>

<?php wp_get_archives(‘type=monthly’); ?>

</ul>

 

That concludes sidebar.php, now move on to footer.php to finish our PHP files.

 

Coding footer.php

The footer.php script just needs to have the content for the footer widget. It is nice to have footer.php file so making changes to one file will change the footer throughout the entire site.

 

<h2>Another WordPress Site created by Jafty Interactive Web

 

Development</h2>

&copy; 2013-2035 Jafty Interactive Web Development.

 

That’s a start, you can add what is appropriate for your own footer.

 

The Magic is in the Style Sheet!

The style sheet is probably the single most important file for a new theme. It is what WordPress uses to recognize the theme and provide information in the WordPress admin area regarding your theme, so be careful to include all the necessary elements indicated in the below example:

/*

Theme Name: Responsive Jafty

Theme URI: http://jafty.com/

Description: A bare-bones responsive WordPress theme example.

Author: Ian L.

Author URI: http://jafty.com/

Version: 1.0

Tags: blue, white, two-columns, flexible-width, flexible-header, http://wordpress.org/extend/themes/tag-filter/

 

License:

License URI:

 

General comments (optional).

*/

body {

text-align:center;

}

 

#wrapper{

display: block;

border: 1px #000 solid;

width:90%;

max-width:1400px;

margin:0px auto;

}

 

#header{

border: 2px #000 solid;

}

 

#sidebar{

width: 35%;

height:500px;

border: 2px #000 solid;

float: left;

}

 

#main{

width: 62%;

border: 2px #000 solid;

float: right;

}

 

#delimiter{

clear:both;

}

 

#footer{

border: 2px #000 solid;

}

There you have it. Notice the tags I used. Those help people searching for themes find what they are looking for, so will help make your theme popular if people are searching for the attributes of your particular theme. There are only certain tags that will work here. For a list of working tags, see: http://wordpress.org/extend/themes/tag-filter/

 

Putting It All Together

Okay, we have laid out all the theme elements above. It is time to put it all together and have a working responsive WordPress theme. It is just a start, but you can build on this. It is fluid and adjustable. When you are done, you will probably want to add a section of JavaScript code or Jquery code to resize images on page resize.

 

Now simply upload all the files to the new theme directory we created at the start of the tutorial, then go to your WordPress installation and activate the theme from the admin console. Simple as that! When you open your site you will see a very basic wireframe responsive theme layout as in the two examples below that demonstrate the way it will look in two vastly different screen sizes:

 

 

Above is a narrow screen size and below is a wider size. Notice the way it behaves:

Using JavaScript in WordPress

How to Build A Common Mult-Part Web Page in PHP

In this beginner’s level PHP tutorial I will show you one of my favorite methods for Building a website from scratch using PHP with HTML5, CSS and maybe a little JavaScript. If you can master at least PHP, HTML and CSS, you can become a well-paid website developer in no time at all! I did about ten years ago and have been doing it full time ever since, so it’s something to think about if you like web design and are looking to start a carrier. PHP is the most commonly used website coding language used for dynamic websites. All PHP site contain HTML with a few exceptions of course, but using HTML5 and PHP is what I recommend definitely if you want to make a living or even just develop your own site.

Advantages of using PHP for Website Development

Why use PHP? That’s an easy question for me to answer. I use PHP because it is easy to learn, well documented, well known and a vastly sought after skill. PHP developers get paid. It’s that simple. THe main reason though is it makes life easier for you, the developer. A prime example is how I will demonstrate how I use PHP to include content into a basic HTML page template.

A Basic Webpage Layout

This is the basic layout I use on 90% of the websites I build when the decision is up to me. You should plan out your site pages first. For example, write out a simple list of pages you want like this:

  • Home
  • About
  • Contact
  • services

Those are some of the common pages I like to include in the top nav of my website and are often close to the exact framework I use for building a website. Other pages I include in the footer in a sitemap.

Basic Features for a Website

Always plan the basic features your site will include. For example you might have an image slider on some pages. In my example, I am keeping it simple and only including the following necessary features that are common and could be used for almost anyone’s website:

  • Drop-Down Navigation Menus –  the top navigation bar will allow for drop down menus, but they don’t have to be on every tab, for example in this example I only use drop down menus on the about and services pages. When you hover over either of those links in the top navigation bar, a drop-down list of pages within those sections will appear. An example would be under services, links for Website Development, SEO, Server Administration and Logo Design could be used. Customize these to fit your needs of course.
  • Simple PHP caching system. This is not a traditional cache, but a cache none-the-less because we are essentially loading the index.php page with the header, top navigation menu and footer once and only changing the content of the page dynamically with PHP which speeds up page load times greatly, especially if you have a lot of images in your header, navigation bar and footer designs.

Make a Simple PHP Webpage Template

The first step to developing a website after you have drawn up some specs is to code your first page. I call it a bare-bones page. This is a page you can use to start off all the other pages in your website with so keep a copy of it without content and add content as needed to a copy of the template whenever you add a new page to the website. The basic parts to a well formatted PHP webpage are as follows:

  • Index.php – serves as the landing page as well as a page template in this infrastructure.
  • header.php – contains the website header including the site’s logo and top navigation menu often along with whatever else you want at the top of yourpage such as login, logout and sign-up links for example. I include my header.php file in index.php.
  • topnav.php – I like to keep my top navigation menu in a separate file which i include in the header.php file usually.
  • content.php – will be the main content for the page. You will have several of these with different file names such as home, about, contact, etc., one for each page of your site. The content pages should contain only content that is different for each page. the other files in this infrastructure are all reused for every page of the website in most cases, but the content files are where you go to make general content edits without having to worry about common areas of the website pages that don’t generally change much such as the header, top navigation bar and footer as in this example layout.
  • footer.php – is your common page footer used on every page in yoru website. If you surf the web and loo at a few different sites, a lot of them all have the exact same header and footer, so why have a different block of code to edit for each pages footer when you can edit one page and it will change the footer for every page in the site. That’s the advantage of using PHP includes.

Developing Your First Page

The first page I always develop for any website is just a bare-bones page without content or with dome placeholder text and/or images for content. The first file you want to write is index.php. Here is a common method I use very often”

Coding index.php

<?php
//any PHP code that doesn’t display anything to the page can be included above the opening HTML tags below, but do not put anything in this top PHP section that writes content to the page. This area is for preparing page content, not showing it.
//############ prepare content for different pages: ###############
//set tab class before including the header:
//set tab defaults:
$homeclass=”;
$aboutclass=”;
$contactclass=”;
$serviceclass=”;
//dynamically include main content according to URL’s pg variable:
$pg = $_GET[‘pg’];//pg request from URL
//set default main content  pg content in case nothing is requested in URL:
$pginc = ‘home.php’;//default landing page if no other page requested
if($pg==””){$pg=”home”;}

//set up your navigation bar to dynamically highlight the pg your are on
//if page is in the home tab:
if($pg==’home’){$pginc = $pg.’.php’;$homeclass=’current’;}
//if page is in the about tab:
if($pg==’about’){$pginc = $pg.’.php’;$aboutclass=’current’;}
if($pg==’about_me’){$pginc = $pg.’.php’;$aboutclass=’current’;}
if($pg==’about_company’){$pginc = $pg.’.php’;$aboutclass=’current’;}
if($pg==’about_history’){$pginc = $pg.’.php’;$aboutclass=’current’;}
//if page is in the My contact tab:
if($pg==’contact’){$pginc = $pg.’.php’;$contactclass=’current’;}

//if page is in the contact tab:
if($pg==’contact’){$pginc = $pg.’.php’;$contactclass=’current’;}

//if page is in the services tab:
if($pg==’services’){$pginc = $pg.’.php’;$serviceclass=’current’;}
if($pg==’PHP’){$pginc = $pg.’.php’;$serviceclass=’current’;}
if($pg==’webdevelopment’){$pginc = $pg.’.php’;$serviceclass=’current’;}
if($pg==’serveradmin’){$pginc = $pg.’.php’;$serviceclass=’current’;}

//set default tab to home so home page is highlited in nav when landing on site:
if($pg==”){$home=’current’;}
//now after this is where you start writing to page close PHP and open HTML tags
?>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Jafty.com Example Website</title>
<link href=”css/global_styles.css” rel=”stylesheet” type=”text/css” />
<?php
//dynamically include extra style sheets & files for content area:
if($pg==’home’) {
echo “<link href=’css/home_style.css’ rel=’stylesheet’ type=’text/css’ />”;
 //you can also include other page specific PHP files here
}//end if parkingcrew page, add home CSS style sheet.

//contineue to include special style sheets for any other pages if needed:
if($pg==’about’){
echo “<link href=’css/about_style.css’ rel=’stylesheet’ type=’text/css’ />”;
}//end if about page, add about CSS style sheet.
?>
</head>

<body>
<div id=”wrap”><!–wrap (100% wide)–>

<?php
include ‘includes/header.php’; //includes header file w/tabs.
?>

<div id=”content”><!–content area is common standard of 960px wide–>
<!–#################### Start Main Content #######################–>
<?php include “includes/$pginc”; ?>
<!–################### End of Main Content #######################–>
</div><!–end content div–>

<?php include ‘includes/footer.php’; ?>
</div><!–end wrap (100% wide)–>

</body>

</html>

The above code creates your page template. this file can be modified once you get all your pages in place and it is the framework for all of your content pages. All before the doctype declaration is PHP code that doesn’t display anything to the page so it is okay there. Basically the first block of PHP code before the doctype declaration is to set up your tabs and page variables for use inside the head tag and after the opening Body tag.

After the HTML body tag, we use more dynamic PHP code to include the proper header for the website then show the content according to what page is called in the pg PHP GET variable visible in the browser’s URL. In this example, I have named my main pages home, about, contact and services. Then the pages in the drop-downs for the about and services links have pages as well which are called about_me, about_company, about_history, PHP, and so on. Just be sure to name your PHP files according to these names and everything will work perfectly. For example, the about_me page needs to be named about_me.php and all the content pages go inside the includes folder so your site directory tree will look like the example in the next section.

Towards the bottom of the pg we include the footer file with PHP too so we have one footer file for the entire site, making changes easy.

Site Directory Tree

Here is what should be in the root folder for your website:

  • index.php (only file in the root directory for simplicity)
  • css – folder that holds all CSS style sheets for the site
  • images – for all your site’s images
  • includes – folder for all your content pages as well as the header and footer files.

Create your header.php:

for this example site, every page will have the same header and it is coded like this:

    <div id=”header”><!–header div 100% for dynamic width by 132px high–>
    <div id=”headercontent”>
    <img id=”logo” src=”images/logo.png” alt=”Jafty.com” />
    
    <div id =”logininfo”><strong>Welcome to Jafty Interactive Web Development!</strong><br />

   Email Ian L. For a web development quote – <a href=”mail:linian11@yahoo.com”>linian11@yahoo.com</a>
   
    <p><strong>Jafty Coding Blog:</strong><br /><a href=”http://jafty.com/blog”>find code examples, tutorials and more web development info</a></p>
    </div>
    </div><!–end header content div 960px wide –>
    </div><!–end header div 100% wide by 132px high–>

    <div id=”headspace”></div>
    
    <div id=”topnav”>
    <div id=”topnavcontent”>
    <div id =”utility”><ul id=”utility_menu”>
    
  <li><a href=”index.php?pg=services”>Services</a>

    <ul class =”end”>

      <li><a href=”index.php?pg=PHP”>PHP</a></li>

      <li><a href=”index.php?pg=web_development”>Website Development</a></li>

      <li><a href=”index.php?pg=server_admin”>Servier Administration</a></li>

    </ul>

  </li>

  <li><a href=”index.php?pg=contact”>Contact</a>

  </li>

  <li><a href=”index.php?pg=about”>About <span style=”color:#FFFFFF”>&nbsp;&nbsp;|</span></a>

    <ul class =”end”>

      <li><a href=”index.php?pg=about_me”>About Me</a></li>
      
      <li><a href=”index.php?pg=about_company”>About Jafty</a></li>

      <li><a href=”index.php?pg=about_history”>About History</a></li>

    </ul>

  </li>

  <li><a href=”index.php?pg=dom_stats”>Home <span style=”color:#FFFFFF”>&nbsp;&nbsp;|</span></a>
  </li>

</ul></div>
    </div><!–end topnav content div–>
    </div><!–end topnav div–>

Create a common footer.php File:

This is a very simple footer example, but also very functional. Modify as needed then save the following code in your includes directory for your website:

<div id=”footer”>
<br />
Terms of Service | FAQs | Contact Us<br />
Phone: 234.567.8900 – FAX: 234.567.8901<br />
&copy;2013-2025 YourSite.com Designed by Jafty.com
</div><!–end footer div (80px by 100px wide)–>

 

Set up your global.css File:

Global.css is s file that will get called in index.php and contains site-wide stiles for the header, footer and common attributes of pages maybe. I also make separate style sheets for pages that have special content, but that’s up to you. At the least, you need the global.css file though for your pages to work, so here is the contents of that:

html,body{
padding:0;
margin:0;
}

#wrap{
width: 100%;
height: 2252px;
margin: 0 auto;
background-color:#FFFFFF;
background-image: url(‘../images/0100.png’);
font-family:arial;
font-size:14px;
}

#header{
margin-top:0px;
width: 100%;
height: 160px;
background-color: #FF0000;
font-weight:bold;
}

#headercontent{
margin-top:0px;
width: 960px;
height: 160px;
background-color: #FF0000;
font-weight:bold;
margin:0 auto;
}

#logo{
margin-left:6px;
margin-top:8px;
float:left;
}

#logininfo {font-size: 10px;margin-top:20px; margin-right:0px; float:right; text-align: right; color: #FFFFFF; padding: .5em;}
#logininfo STRONG {font-size: 12px;}
#logininfo a{color: #FFFFFF; text-decoration: underline;}
#logininfo a:hover{color:#FFFFFF; text-decoration: none;}

#headspace{
width: 100%;
height: 2px;
background-color: #FFFFFF;
}

#topnav{
position:relative;
width: 100%;
height: 40px;
background-color: #F88017;/*#FE9A2E;*/
}

#topnavcontent{
position:relative;
width: 960px;
height: 40px;
background-color: #F88017;
margin:0 auto;
}

#utility {position:absolute; display: block; width: 100%;bottom:0; left: 0px; padding: 0; margin:0; color:#FFFFFF; overflow: visible;}

#utility_menu {position: absolute; display: block; bottom: 0px;    overflow: visible; padding: 0; margin: 0; list-style: none;}
#utility li {position: relative; display: block; float: right; overflow: visible; margin: 0;}
#utility a { background: transparent; color: #FFFFFF; display: block; border-left: 0px solid #FFFFFF; padding: .2em .5em;  text-decoration: none; font-weight: bold;}
#utility a em {font-size: 11px; font-style:normal; font-weight: normal; color: #6F6F6F;}
#utility a:hover { background: transparent; color: black;}
#utility a.current {color: yellow; background: transparent; border-left: 0px solid #FFFFFF;}
#utility a.current:hover {color: #000000; background: transparent;}

#utility  a.navfirst { background: transparent; color: #FFFFFF; display: block; border-left: 0px solid #999999; padding: .2em .5em; text-decoration: none; font-weight: bold;}

#utility a.current.navfirst {color: yellow; background: transparent; border-left: 0px solid #999999;}
#utility a.current.navfirst:hover {color: black; background: transparent; border-left: 0px solid #999999;}

#utility ul li ul {font-size:11px; position: absolute; display: none; top: 15px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-left: 0; margin-top: .6em; padding-top: 0; z-index:100;}
#utility ul li ul {
* top: 15px;
}
#utility ul li ul.end {right: -1em;}
#utility li > ul { top: auto; left: auto; } /* Opera fix */

#utility li:hover ul, #utility li.over ul  { display: block; z-index: 100; }
#utility li ul li { clear: left; position: relative; float: none;  z-index:100;}
#utility li ul li a {font-weight: normal; width: 15em; border: 1px solid #999; border-top: 0; background: #FFF url(../images/bck-tab-04.png) top repeat-x; color: #000;  z-index:100;}

#utility li ul li a:hover {background: #F3F6F9; color: #cc0000;  z-index:100;}

#content{
width: 950px;
height: 2000px;/*was 1748px;*/
margin:0 auto;
background-color: #efefef;
padding-top:15px;
padding-left:20px;
padding-right:20px;
/*box shaddow on right and left only by Ian L. of jafty.com
 box-shadow: h-shadow v-shadow blur spread color;
*/
    -moz-box-shadow:
        10px 0 10px -10px #333,
        -10px 0 10px -10px #333;
    -webkit-box-shadow:
        10px 0 10px -10px #333,
        -10px 0 10px -10px #333;
    box-shadow:
        10px 0 10px -10px #333,
        -10px 0 10px -10px #333;
/*prevents padding from changing page div’s width:*/    
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

hr {
border: none;
border-top: dashed 2px #FF0000;
color: #efefef;
background-color: #efefef;
margin-top:12px;
}

#footer{
width: 100%;
height: 80px;
background-color: #FF0000;
font-weight:bold;
text-align:center;
color:#FFFFFF;
}

/*link styles that you can take out if you don’t need:*/
a:link{color: #1414bb; text-decoration: underline;}
a:visited{color: #1414bb; text-decoration: underline;}
a:hover{color:#000000; text-decoration: none;}
a:active{color: #1414bb; text-decoration: underline;}
/*end left over styles*/

Finally Add Content Pages

Now create your first contact page. All of the content pages can be created using the same basic method, so I will just create a simple home page example, so this will be the home.php file that gets saved in your includes directory for your site:

<h1>Home Page Content</h1>
<p>
This is the content that is in the home.php file which can be found in the includes directory. Locate the file to add content to the home page.
</p>

That’s all I’ll add for now because you will surely want to add your own content to your site, but put that as a placeholder for the home page and create a similar place holder for now for the other pages in the main nav and in the drop-down menus for the nav links if you have any. Create simple placeholders for now and save them in the includes directory. If you have followed along in this tutorial successfully, you should have a web page now that looks like this:

screenshot

 

EmployWorkers.com Virtual Work

Need to hire the perfect coder, designer, developer or graphics specialist? EmployWorkers has all areas of Information technology covered and more.

Virtual employment agency
Where work that needs done, gets done.

Need to find work in the Information Technology field, EmployWorkers.com is for you! We employ all skilled workers in a vast array of areas including, but not limited to graphic design, logo design, Photoshop, web design, web development, application development, special needs coding, PHP, HTML, CSS, SEO, writing of all types, programming of all types and much more. If you need work, visit employworkers.com today and sign up for free. Finding work online has never been easier!

I, Ian L. of Jafty.com have created employworkers.com to fill a niche left open by the buyout of Vworker.com. They had a simpley to use website for posting jobs and finding work. I have expanded on the idea by making it even easier to sign up, post jobs and find work all for free. You never pay a cent, we collect a small percentage of the project price only in cases where a job was completed satisfactory and accepted by the employer. We have a zero risk policy where you don’t pay anything until you are satisfied with our services. Money for projects is held in escrow so the worker knows he will be paid once he fulfils his contract with the employer, but employers can dispute at any time they feel there is a breech in the contract and get their escrowed funds returned to them hassle free. Most times you will find that satisfaction is standard however because employworkers.com uses a skilled pool of workers and expertly matches the most qualified workers with your project.

Go ahead and visit EmployWorkers.com today and give it a try whether you are an employer seeking assistance on a project or a worker looking for your next project, we have got you in mind!

Hiring Virtual Workers

When you need a project done, there is nothing more discouraging sometimes than finding the perfect person for the job. Virtual workers are in abundance, but finding the right one is often a trick that takes time and trial and error to to get right.

The best site out there in my opinion was Vworker.com. Unfortunately, they were recently bought out by freelancer.com who doesn’t quite meet up to the standards Vworker did as far as ease of use of their site and reliability of their worker pool.

The above are two main reasons I decided to start a site called employworkers.com that will facilitiate employers and workers both seeking to work virtually from the home or office. I modeled the site, not after Vworker, but with the same principals in mind. I concentrated foremost of ease of use and allowing only quality workers into the worker pool. The workers will be tested on every category they would like to work under, so employers are sure to get a worker who knows the subject matter at hand.

Centering Anchor Link Tags

Have you ever tried to center a link using text-align:center? If you have, you know it doesn’t work. There are a few ways to center a link and some are more correct than others, but I wanted to offer an alternative solution. Most times, I think people just put the link in a containing div and set the text-align attribute there. What do you do if you don’t want to add a new element to your HTML though? Here is one solution:

<a style=”position:relative;left:50%;width:200px;margin-left:-100px” href=”http://www.jafty.com/”>Go to Jafty!</a>

One thing you have to pay attention to is the width and margin-left in the style attributes though. What I do is estimate or measure the actual length of the text between the opening and closing anchor tags and use that as the width. Then set the margin-left value to negative half of the width. So if your width was 200px, your margin-left would be -100px. If you get the width close, it will be reasonably well centered. Experiment with different values always keeping the left margin to negative half of the width and it will be easy as pie in July!