Energize Your Static Website with This WordPress Conversion Tutorial (Part 2)

Help!

That’s the first reaction you might have if you are trying to figure out your WordPress conversion tasks, right?

Even if you are just a beginner and not really a web expert, you can definitely create a WordPress theme for as long as you know how WordPress works.

If you’ve been using WordPress as your website platform, chances are, you’re tired of using generic WordPress themes for your site. You might even think of just doing your own theme to have your preferred styles and features.

Customizing Your WordPress site

You can design your ideal site by creating a mockup in Photoshop and then convert the PSD file to HTML and CSS. Afterwards, you can then convert it to a fully functional WordPress theme.

Designing websites using Photoshop PSD files and then converting it to WordPress themes is one of the easiest shortcuts in web design and development today. It is the most ideal way to provide your client a site with small amount of time and with ease.

It is easy-peasy, believe it!

This tutorial will help you learn how to convert your HTML and CSS static site to a fully functional WordPress blog theme.

  • Converting HTML and CSS static site to WordPress theme will be your shortcut in web design and development. This means you can easily deliver your customer’s site at ease within a small amount of time.
  • Reading this tutorial, you can simply gain knowledge on how to create your own WordPress theme.

Disclaimer: You need to have a background knowledge about HTML, CSS, JavaScript and PHP.

Here Are Your Expected Results

At the end of this tutorial, you will learn how to convert your plain HTML and static site to a fully functional WordPress blog theme. This tutorial will give you insight about WordPress blog theme templates which we have stated in the first part of the tutorial.

This tutorial will encourage you to apply the following coding standards to your WordPress theme:

  • Validate your HTML and CSS codes first. You can use service like W3C’s validation site to ensure that your markup and styles are valid.
  • Ensure that your WordPress code syntax won’t cause any issues. You can always visit this site to check your codes if it aligns to the WordPress Coding Standards.
  • Always test your code on all browsers if possible. Check if your site works across all major browsers to avoid any further issues on your theme.
  • Test your code on multiple devices. As mobile and tablets users grow it is ideal if you would check if your site is responsive and is working across modern devices.

What You Have Learned So Far

In part one of this tutorial we’ve worked on the following:

  • Copying files to the NeoBlog WP directory
  • style.css
  • screenshot.png
  • Activating the theme

If you’ve been following this tutorial, the WordPress theme was named via style.css and a screenshot was added for the theme to be identifiable at the WordPress admin panel.

After doing this, the theme was activated. Really, there are more things to do. Familiarize with the steps covered in the first part of this series to enjoy this second serving for you will be learning things a notch higher.

More focus would be on the rest of the WordPress templates that have defined on the first part of this tutorial.

OK, without further do, let’s finish the remaining templates so that a fully functional WordPress theme can be achieved.

What You Should Expect

To be specific, you will work on the following:

  • functions.php
  • header.php
  • footer.php
  • searchform.php
  • sidebar.php
  • index.php
  • single.php
  • page.php
  • page-about.php
  • page-contact.php
  • page-contact.php
  • search.php
  • content-search.php
  • comments.php
  • 404.php

Resources You Need

What’s the Fuss about This Tutorial

In the first part of this series, you were how to prepare your HTML and CSS files for WordPress and then brand and activate the theme.

In this last part of the series, you will learn what codes each remaining WordPress template must have to build a working WordPress theme.

At the end of this tutorial, you will have the same output just like the demo image file we posted in part 1 of the series.

STEP 1 – Defining constants and registering navigation menu support

The theme is already active! Now add support to the theme directory as well as the navigation menu thru the functions.php. Go ahead and create the functions.php file first on the root directory of the NeoBlog WP theme.

Next, define the constants for the theme directory. Go ahead and copy the code below to the functions.php recently created.

(Note: Since this is a php file all of the functions and codes relating to php must be enclosed with < ?php ?> tag.)

/***********************************************************************************************/
/* Define Constants */
/***********************************************************************************************/
define('THEMEDIR', get_stylesheet_directory_uri());
define('IMG', THEMEDIR.'/images');

You also need to register a function for the navigation menu. Below are the functions needed to make a working navigation. Go ahead and grab it.

add_action('init', 'register_my_menus');
 function register_my_menus() {
   register_nav_menus(array(
       'main-menu' => 'Main Menu'
      ));
}

An add_action hook has been added to register the navigation menu. The first argument is the tag (to which the action will be added later) and the second argument specifies the register_my_menus function to call.

To learn more about this, check this page.

STEP 2 – Creating header.php

Now, create the header.php file. Open index.html and copy everything from the opening DOCTYPE declaration to the ending tag and then paste it into the header.php file created on the NeoBlog WP theme folder.

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>NEOBLOG</title>
<meta name="description" content="A simple WordPress blog theme for 1stwebdesigner.com">
<meta name="author" content="Sam Norton">

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Stylesheets -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<!-- HEADER -->
<header class="main-header align-center ">
<a href="index.html" class="logo" ><img src="images/logo.png"  class="img-responsive" alt="NEOBLOG blog theme" /></a>
<nav class="main-nav">
<ul class="inline">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

Some of static HTML tags can be replaced by the WordPress built-in functions such as the language, meta information, body class and so on.

Add the wp_head hook before the closing head tag. Use this hook by having the function echo the output to the browser, or by having it perform background tasks. For more information about this, see the WordPress Codex.

For the navigation menu, use the wp_nav_menu function to display a navigation menu created in the admin panel of WordPress.

The theme_location parameter will display the menu assignment to the location it was set. Otherwise, if it was not set, the parameter fallback_cb will determine what is displayed.

To learn more about the wp_nav_menu, check this page.

Copy the code below and replace the static html header information just copied.


<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->

<head>
<meta charset="<?php  bloginfo('charset'); ?>">
<title><?php wp_title('|', true, 'right');?><?php bloginfo('name');?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">
<meta name="author" content="Sam Norton">

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Stylesheets -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<!-- HEADER -->
<header class="main-header align-center ">
<a href="<?php echo home_url(); ?>" class="logo" ><img src="<?php print IMG;?>/logo.png"  class="img-responsive" alt="<?php bloginfo('name');?>" /></a>

<nav class="main-nav">
<?php
   wp_nav_menu(array(
     'theme_location' => 'main-menu',
      'container' => '',
      'menu_class' => 'inline'
));
?>

</nav>
</header>

STEP 3 – Creating footer.php

For this part, create the blank footer.php and once again open index.html from the NeoBlog HTML and CSS theme folder. Copy everything from the sharing idea section to footer section. Then paste it to the footer.php file on the NeoBlog WP theme folder.

You must have the same HTML codes below.

<!-- SHARING IDEAS AREA -->
<section>
<div class="sharing-container section-content align-center">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>

<p>Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.</p>
<h4><a href="contact.html" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>

<!-- FOOTER -->
<footer class="main-footer section-content align-center" id="contact-info">
 <p>&copy; 2014 - <a href="http://www.1stwebdesigner.com/" target="_blank">NEOBLOG theme</a> by <a target="_blank" href="https://twitter.com/NickDalusung">Sam Norton</a></p>
</footer>
</body>
</html>

Same with header.php file. Again, replace some of these HTML tags to the WordPress built-in functions such as the link to the homepage, the current year and the blog name information.

Check out the codes below.

<!-- SHARING IDEAS AREA -->
<section>
<div class="sharing-container section-content align-center">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>

<p>Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.</p>
<h4><a href="<?php home_url(); ?>" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>

<!-- FOOTER -->
<footer class="main-footer section-content align-center" id="contact-info">
<p>&copy; <?php echo date('Y'); ?> - <a href="<?php home_url(); ?>"><?php echo bloginfo('name'); ?></a> by <a target="_blank" href="https://twitter.com/NickDalusung">Sam Norton</a></p>
</footer>

<?php wp_footer(); ?>
</body>
</html>

STEP 4 – Working with searchform.php

Next on the list, add the markup (with built-in WordPress functions), which will display a search box on the sidebar. Go ahead and create searchform.php and copy and paste the code below on it.

(Note: Most of the classes you see here came from the search box markup of index.html file)

<div class="controller">
<form role="search" method="get" class="search-form" action="<?php echo home_url(); ?>">
<input type='textbox' name="s" class="form-control" id="search-box" value="<?php the_search_query(); ?>" placeholder="Search.."/>
<input class="btn btn-primary no-border" type="submit" class="search-submit" value="Search" />
</form>
</div>

Notice that the the_search_query function as the value of the text box was used. This will simply display the search query for the current request, if a search was made.

STEP 5 – Working sidebar.php

Before creating the sidebar.php, register the sidebar on functions.php file. Go ahead and open functions.php and add the codes below on it.

register_sidebar( array(
    'id' => 'main-sidebar',
    'name' => __( 'Main Sidebar', $text_domain ),
    'description' => __( 'This the main sidebar.', $text_domain ),
) );

The codes above will build the definition for a sidebar and returns the ID.

Next, let’s call the sidebar. Create the sidebar.php file on the root directory of the NeoBlog WP theme and paste the codes below.

<?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
<?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>

The codes above contain function that calls main-sidebar widget callbacks and prints the markup for the sidebar but, first, it will test if the sidebar is active before proceeding.

STEP 6 – Populating the Index File

After adding all of these template files, work on the Home Page – the index.php file. Go ahead and create first the index.php on the root directory of the NeoBlog WP theme.
Now, put some codes on thew index.php file to display the changes.


<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now, let’s now check out the front page of the NeoBlog WP theme and see results.

temp

Notice that the header and the footer are on their proper positions except for the sidebar.

To add the contents inside the home page, open the index.html file and copy the blog area section up to the closing div tag of box-layer align-center page-nav class and then paste it just under the get_header function. You’ll get similar codes below.


<!-- BLOG AREA -->

<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">

<ul class="negative-margin">
<li>
<h1><a href="single-blog.html" class="gray">Should I use a Pencil or a Ballpen?</a></h1>
<p class="details">By <a href="#">Sam Norton</a> / On July 20, 2014 / <a href="#">Life Hacks</a></p>

<figure>
<img class="opacity-hover box-layer img-responsive" src="images/thumb1.jpg" alt="Pencil or Ballpen" />
</figure>
<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>	

<div class="btn-margin">
<a href="single-blog.html" class="btn btn-primary">CONTINUE READING >>> </a>
</div>
</li>

<li>
<h1><a href="single-blog.html" class="gray">How to test your patience!</a></h1>
<p class="details">By <a href="#">Sam Norton</a> / On July 20, 2014 / <a href="#">Life Tips</a></p>

<figure>
<img class="box-layer img-responsive" src="images/thumb2.jpg" alt="Pencil or Ballpen" />
</figure>

<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>	

<div class="btn-margin">
<a href="single-blog.html" class="btn btn-primary">CONTINUE READING >>> </a>
</div>
</li>

</ul>

<div class="box-layer align-center page-nav">
<ul class="btn">
<li><a href="#">Next Page >>> </a></li>
</ul>
</div>
</div>

The codes above will only show a static display of the theme. To make this dynamic, structure the WordPress loop within the markup of the blog area. Copy the code below and replace the blog area just copied from index.html file.


<?php get_header(); ?>

<!-- BLOG AREA -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">

<?php if (have_posts()) : ?>
<div class="row">
 <div class="col-md-8">

<ul class="negative-margin">
 <li>
<?php while(have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" class="gray"><?php the_title(); ?></a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>

<p class="excerpt"> <?php the_excerpt(); ?> </p>
<div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>
</li>

<?php endif; ?>
 <?php endwhile; ?>

</ul>

<?php
global $wp_query;

if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->

<?php endif; ?>

<?php endif; ?>
</div>

<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

</div>
</div>
</div>
</section>

<?php get_footer(); ?>

The WordPress loop are PHP blocks of code used by WordPress to display posts. Using the loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within the loop tags. The WP loop usually comes with these blocks of PHP codes:


<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} // end if
?>

The codes above is the basic loop along with the markup; however, it has to display the blog information using the following WordPress functions:

  • the_permalink – Displays the URL for the permalink to the post currently being processed in the loop
  • the_title – Displays or returns the title of the current post
  • the_author_posts – Displays the total number of posts an author has published
  • the_author – Displays the name of the author of the post
  • get_the_date – Retrieves the date the current $post was written
  • the_category – Displays a link to the category or categories a post belongs
  • the_post_thumbnail – Displays the Featured Image for the current post, as set in that post edit screen (more on this below)
  • the_excerpt – Displays the excerpt of the current post after applying several filters to it, including auto-p formatting which turns double line-breaks into HTML paragraphs

With regards to the featured image, use the code the following codes.

<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
<?php endif; ?>

First, test it if there is a featured image set on the WordPress post panel. If the statement is true, it displays the URL of the post and the featured image itself.

Notice that an array is added with a class opacity-hover box-layer img-responsive. This is a way of adding a class in the Featured image to make a nice hover, border and box shadow on it.

But, doing this won’t display the featured image. You need to add functions first to register the featured image. Copy the codes below and paste it into the functions.php.

/***********************************************************************************************/
/* Add Theme Support for Post Thumbnails */
/***********************************************************************************************/
if (function_exists('add_theme_support')) {
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(742, 428);
}

Great! The featured image will now appear. Next, add function to remove brackets, ellipsis or the hellip word at the end of the excerpt (which is the default display of the excerpt).

Open the functions.php and add again the following codes.

/***********************************************************************************************/
/* Remove the brackets, ellipsis and hellip on excerpt */
/***********************************************************************************************/
function trim_excerpt($text) {
 	$text = str_replace('[&hellip;]', '...', $text);
     return $text;
	}
add_filter('get_the_excerpt', 'trim_excerpt');

Next, you will tinker the page navigation that was already added on the index.php file. The following code will call the wp_query, a class defined in the WordPress core that deals with the intricacies of a posts (or pages) request to a WordPress blog.

It will then set the previous_post_link and next_posts_link function to add a navigation to the blog post list.

Check out the code below:


<?php
global $wp_query;
if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->
<?php endif; ?>
<?php endif; ?>

As a final touch, place the get_sidebar function inside the col-md-3 col-md-offset-1 margin-sidebar div along with an HTML5 aside tag to make it float on the right side of the page.

Check the code the below.

<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

As a review, the index.php will contain all of the following PHP codes. Check out the code to avoid missing something.


<?php get_header(); ?>

<!-- BLOG AREA -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<?php if (have_posts()) : ?>
<div class="row">

<div class="col-md-8">

<ul class="negative-margin">
<li>
<?php while(have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" class="gray">
<?php the_title(); ?> </a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>

<p class="excerpt"> <?php the_excerpt(); ?> </p>
<div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>
</li>
<?php endif; ?>
<?php endwhile; ?>

</ul>

<?php
 global $wp_query;

if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->

<?php endif; ?>

<?php endif; ?>
</div>

<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

</div>
</div>
</div>
</section>

<?php get_footer(); ?>

STEP 7 – Working with single.php

Now, to display each individual posts in a blog page, create the single.php file and then copy and paste the code below.


<?php  get_header(); ?>

<!-- BLOG AREA -->
<section>
<hr class="no-margin" />

<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">
<section>

<h1><a href="<?php the_permalink(); ?>" class="gray"><?php the_title(); ?></a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> /  In <?php the_category(', '); ?> </p>

<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>

<p class="excerpt"> <?php the_content(); ?> </p>
<?php endif; ?>
</section>

<?php endwhile; ?>
<?php endif; ?>

<section>

<div class="comment-section">
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() ) : comments_template();
endif;
?>

</div>
</section>
</div>

<!-- RELATED ARTICLE AREA -->

<section>
<div class="box-layer related-articles custom-padding">
<h2 class="align-center">Related Articles</h2>
<?php
$current_categories = get_the_category();
$first_category = $current_categories[0]->term_id;

$args = array(
 'post_per_page' => 3,
 'category__in' => array($first_category),
 'post__not_in' => array($post->ID)
);

$related_articles = new WP_Query($args);
if ($related_articles->have_posts()) : ?>

<ul>

<?php while ($related_articles->have_posts()) : $related_articles->the_post(); ?>
<li class="col-md-4">
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
</figure>

<p class="related"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<?php endif; ?>
</li>
<?php endwhile; ?>

<div class="clear"></div>
</ul>
<?php endif; ?>

<?php
// Restore original Post Data
wp_reset_postdata();
?>

</div>
</section>
</div>

<!-- SIDEBAR AREA -->
<aside>

<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

</section>

<?php  get_footer(); ?>

There is for the comment section. Check out the codes below.

<section>

<div class="comment-section">
<?php
if ( comments_open() || '0' != get_comments_number() ) : comments_template();
endif;
?>
</div>
</section>

This code will check if comments are open or at least have one comment. It will load up the comment template (more on the comment template later).

STEP 8 – Working with page.php

After working on the blog page, work on the regular pages. Create the page.php file and then copy and paste the code below.


<?php get_header(); ?>

<!-- BLOG AREA -->

<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">

<div class="col-md-8">
<div class="box-layer custom-padding">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2> <?php the_title(); ?> </h2>

<?php
if (has_post_thumbnail()) : ?>
                                                                                                           	 <figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>

<?php	endif; ?>
<p><?php the_content(); ?> </p>
<?php endwhile; endif; //ends the loop ?>
</div>
</div>

<!-- SIDEBAR AREA -->
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php  get_sidebar(); ?>
</div>
</aside>

</section>
<?php get_footer(); ?>

Again, there is nothing new to this file except that it doesn’t have the comment section since this is a regular page.

In the next 2 files, create 2 WordPress built-in Post Types template. These are pages that display page layout differently.

STEP 9 – Working with page-about.php

For this part of the tutorial, first create a php file and call it page-about.php. Since this page is focused on the details about the website owner, it just contains plain HTML codes along with the header, sidebar and footer.

Add a comment at the beginning of the page-about.php file to make sure WordPress will treat the file as a page template.

Copy the codes below and paste it to the page-about.php file.


<?php
/* Template Name: About Page */
?>

<?php  get_header(); ?>

<!-- BLOG AREA -->

<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">

<img src="<?php print IMG; ?>/my_image.png" class="opacity-hover img-responsive center" alt="my image" />
<div class="align-center">

<h2>About Me</h2>
<p>I am a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. I spend most of my time practically every day, experimenting with HTML, CSS and WordPress.<p>
<hr/>

<h3 class="blue">Feel free to contact me for some Web Projects</h3>
<p><i class="fa fa-envelope"></i>  Email: [your email] </p>
<p><i class="fa fa-twitter"></i>  Twitter: [your twitter username] </p>
</div>
</div>

<!-- END RELATED ARTICLE AREA -->
</div>

<!-- SIDEBAR AREA -->
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

</section>
<?php  get_footer(); ?>

STEP 10 – Working with page-contact.php

Many WordPress plugins can add a contact form to the blog, but a plugin is sometimes unnecessary. For the page-contact.php file, add a little bit of PHP and JavaScript codes. First, go ahead and create the page-contact.php file.

Now, create a simple contact form. Simply paste the following code on the page-contact.php.

<?php
/*
Template Name: Page Contact
*/
?>

<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '')  {
$emailError = 'Please enter your email address.';
$hasError = true; } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[a-z]{2,4}$/i", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

if(trim($_POST['subject']) === '') {
$subjectError = 'Please enter a subject.';
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}

if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {                            	

if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}

$subject = '[PHP Snippets] From '.$name;
$body = "Name: $name nnEmail: $email nnComments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . 'Reply-To: ' . $email;

wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?>

What has been done here is simply to make sure that the form has been submitted and filed correctly. If an error, such as an empty field or incorrect email address occurrs, a message is returned and the form isn’t submitted.

Next, create the form and display the error messages below each text box and text area field.


<?php get_header(); ?>
<section>
<hr class="no-margin" />
 <div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">

<div id="container">
<div id="content">
<div class="align-center">
<h2>We want to hear from you!</h2>
<p>If you are seeking to contact us, please fill up the form below. If you want to advertise or be partner with us just inform us on the message box below. </p>

<p>Thank you so much for your support!
<br/>We really appreciate!</p>

<div class="entry-content">
<?php if(isset($emailSent) && $emailSent == true) { ?>

<div class="thanks">                                                                                                            	<p>Thanks, your email was sent successfully.</p>
</div>

<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
                                                                                                                            	<p class="error">Sorry, an error occured.<p>
<?php } ?>

<form action="<?php the_permalink(); ?>" id="contactForm" method="post" class="general-form">
                                                                                                            	<div class="contactform">
<p>

                                                                                                                            <input type="text" name="contactName" class="form-control" id="contactName" placeholder="Your Name.." value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
                                                                                                                            	<?php if($nameError != '') { ?>
                                                                                                                                            	<span class="error"><?=$nameError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	</p>
                                                                                                                           	<input type="text" name="email" id="email" class="form-control" placeholder="Your Email.." value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" />
                                                                                                                            	<?php if($emailError != '') { ?>
                                                                                                                                            	<span class="error"><?=$emailError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	</p>
                                                                                                                           	<p>
                                                                                                                            	<input type="text" name="subject" id="subject" class="form-control" placeholder="Your Subject.." value="<?php if(isset($_POST['subject']))  echo $_POST['subject'];?>" class="required requiredField subject" />
                                                                                                                            	<?php if($subjectError != '') { ?>
                                                                                                                                            	<span class="error"><?=$subjectError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	</p>
                                                                                                                     	<textarea name="comments" id="commentsText" class="form-control" placeholder="Your Message" rows="4" cols="100" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                                                                                                                            	<?php if($commentError != '') { ?>
                                                                                                                                            	<span class="error"><?=$commentError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	</p>

<p><input type="submit" class="btn btn-primary no-border" value="Send Message"></input></p>
</div>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
<?php } ?>
</div><!-- .entry-content -->
</div><!-- .post -->
</div>
</div>
</div>

<!-- RELATED ARTICLE AREA -->
</div>
<aside>
<!-- SIDEBAR AREA -->
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>
</section>

<?php get_footer(); ?>

The form is now working but you can enhance it further by adding client side verification. To do this, use jQuery and the validate jQuery plugin.

First, download the validate plugin and then place it on the js directory on the NeoBlog WP theme.  Add the following links to the header.php file before the closing head tag.


<?php if( is_page('contact') ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>

Now, create the verif.js file and put the jQuery code to enable the validation. Here are the codes:


$(document).ready(function(){
$("#contactForm").validate();
});

Great! The contact form has just been created. The form will now validate every input and simply picks a form element with class required and verifies if the form is properly filled.

Note: Use a plugin if doing the coded above is too difficult.

Try Contact Form 7, a very powerful and flexible plugin that adds a contact form to the pages.

STEP 11 – Assigning page templates to pages

Cool! The page templates have been created. To make them work, assign them to a page.

For this part of the tutorial, create first a page from the WordPress admin panel and then assign a page template to it.

To do this, go to Pages -> Add New and then give it a title About or Contact.

pages

Now to assign a page template to the page, go to the right side panel and look for Page Attributes panel on the right side. Under template, select the preferred template and hit Publish.

page-attributes

Now you can check the page if it works in the front-end.

STEP 12 – Working with search.php

The structure of the search box is now set up but it is not working yet; it needs some functions to make it work.

For this part of the tutorial, add the functionality to enable the search query on the search box.

The codes below will have some PHP codes for the search to output the results; otherwise, it will return an error message: “Bummer! No results found”, which is wrapped in an H2 tag.

Create first the search.php file and grab the following code below on it. Otherwise, if there is a result returned, it will display the result within an H2 tag.

Note: The codes below contains HTML tags based on the page.php and single.php


<?php get_header(); ?>
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">

<?php if ( have_posts() ) : ?>
<header class="page-header">
<h2 class="page-title"><?php printf( __( 'Search Results for: %s', '_s' ), '<h3>' . get_search_query() . '</h3>' ); ?></h2>
</header><!-- .page-header -->

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

 <?php
 /*** Run the loop for the search to output the results. */
get_template_part( 'content', 'search' );
?>

<?php endwhile; ?>
<?php else : ?>

<h2>Bummer! No results found</h2>
<?php endif; ?>

</div>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
</section>

<?php get_footer(); ?>

STEP 13 – Working with content-search.php

The search.php will control the layout of the search results; however, add the loop of the search to output the results.

For this part, create the content-search.php file on the NeoBlog WP theme directory and then paste the code below on it.


<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">

<?php the_title( sprintf( '<h1 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?>

<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
<?php endif; ?>
</header>

<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> /  <?php the_category(); ?> </p>
<p><?php the_excerpt(); ?></p>

</div>

STEP 14 – Working with comments.php

To check again the single.php file, notice that there is a part on that file that contains a div class of comment-section along with some PHP codes.

See code below.


<div class="comment-section">
<?php
if ( comments_open() || '0' != get_comments_number() ) :
comments_template();
endif;                                                                                                                       	?>
</div>

These codes will simply check if the comments are enabled on the WordPress admin panel using an if statement. If it returns true, it will get the number of comments and simply display all comments returned.

Take note these codes alone won’t yet display comments, one needs to create the comment_template, using the comments.php file. For this part of the tutorial, go ahead and create this file on the NeoBlog WP theme directory.

Now copy the code below and paste it on the created file.


<?php
/**
 * The template for displaying comments.
 *
 * The area of the page that contains both current comments
 * and the comment form.
 *
 * @package NeoBlog
*/
/*
 * If the current post is protected by a password and
 * the visitor has not yet entered the password we will
 * return early without loading the comments.
 */

if ( post_password_required() ) {
return;
}
?>

<div id="comments" class="comments-area">
<?php // You can start editing here -- including this comment! ?>
?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php printf( _nx( 'One Comment on &ldquo;%2$s&rdquo;', '%1$s comment on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', '_s' ), number_format_i18n( get_comments_number() ), '<h3>' . get_the_title() . '</h3>' );
?>
</h2>

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-above" class="comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-above -->
<?php endif; // check for comment navigation ?>

<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
));
?>
</ol><!-- .comment-list -->

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-below" class="comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-below -->
<?php endif; // check for comment navigation ?>

<?php endif; // have_comments() ?>

<?php
// If comments are closed and there are comments, let's leave a little note, shall we?
if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
?>
<p class="no-comments"><?php _e( 'Comments are closed.', '' ); ?></p>
<?php endif; ?>
<?php

$fields =  array(
        'author' => '<p class="general-form">'.'<input class="form-control"  placeholder="Your Name.." id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
        'email'  => '<p class="general-form">'.'<input id="email" class="form-control" placeholder="Your Email.."  name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
        'url'   => '<p class="general-form">' . '<input id="url" class="form-control" placeholder="Your Website.." name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>'
	);

$comments_args = array(
'fields' =>  $fields,
 'title_reply'=>'<h2>'.'Leave a Comment'.'<h2>',
'comment_field' => '<p class="general-form"><textarea id="comment" class="form-control" name="comment" rows="4" cols="100" aria-required="true" placeholder="Write your comment here.."></textarea></p>',
'comment_notes_after' => '',
 'id_submit' => 'submit-btn'
);

?>

<?php comment_form($comments_args); ?>
</div><!-- #comments -->

There are a lot of things happening on this file. First, it will test if the post needs a password for the user to be able to comment. Next, if it returns true, the comments number and comments will be displayed.

Notice that there is also a navigation to see the comments (both previous and next) using the previous_comments_link and next_comments_link function.

Finally, use wp_list_comments to display all comments for a post or page based on a variety of parameters, including the ones set in the administration area.

Next, add some wp_enqueue_script to check if the threaded comment is enabled. If it returns true, it will enable comment reply. Open up your functions.php and copy the code below on it.


if( get_option('thread_comments') ){
wp_enqueue_script('comment-reply');
}

STEP 15 – Working with 404.php

Creating a custom 404 page is easy using the 404.php template in a WordPress theme. This will make sure that every link actually goes to a specific web page. If there is a broken link, it will display this page.

For this part of the tutorial, create a simple 404 page template. Copy the code below.


<?php  get_header(); ?>

<!-- BLOG AREA -->

<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">
<section>
<h2> Oh Snap! Page not found!</h2>
<h3> It seems you're looking for something that isn't here!</h3>
<p> <a href="<?php echo home_url(); ?>">Click here</a> to go back to homepage! </p>
</section>
</div>

 </div>
<aside>
<!-- SIDEBAR AREA -->
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>                                                                                                        	</div>
</aside>

</section>
<?php  get_footer(); ?>

A 404 ‘Not Found’ error page is a page generated by the server to inform a user about non-existing page.

On the code above, a simple message error message “Oh Snap! Page not found!” is displayed along with a home link URL. This is making sure that the visitor will stay on the site.

The NeoBlog WordPress theme is now complete! Congratulations!

Our Final Project

Final_theme

 

[Download Source]

Tips You Ought to Remember for This Part of the Tutorial

  • Always check out the WordPress Codex for functions, tags and PHP codes. This will keep you on the right path in dealing with codes.
  • Make sure to use well-structured, error-free PHP and valid HTML. See WordPress Coding Standards.
  • Follow design guidelines in site design and layout.
  • Always Backup your files. Always, always backup your files just in case you made changes on a template file so that you can easily retrieve it later.
  • Seek for help. If you are working on a different theme, chances are you might have some issues while converting some files. I recommend asking help in Stackoverflow community, which is a community of developers helping each other’s codes issues.

What Troubleshooting Techniques You Can Use

There is not really an official rule to check on errors while you are developing a theme. It might be your own codes or some typographical error you just missed on your WordPress templates.

However turning on the Debugging mode or checking your error log might help.

Before You Leave

You don’t want to read the whole thing? You might wanna try the video version! If you need to know the Part 2 of this tutorial series, you need to watch the whole playlist.

Round-up

Congratulations! You just converted an HTML and CSS template into WordPress blog theme. That was easy, right?

You’ve successfully converted your plain static HTML and CSS NeoBlog theme to a WordPress theme.

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.

Clear Conclusion

Congratulations! You just converted an HTML and CSS template into WordPress blog theme on full. That was easy, right?

Now you have a fully functional WordPress blog theme that can pull and display content from a database.

You can also add more functionalities and styles on it by just browsing the WordPress codex to check all the functions you need.

If you have any comments or suggestions, please feel free to drop a line in the comment section.

Hope you learned something on this tutorial and see you again next time!

Powered by WPeMatico

Shake up Your Dying Website Using These Free eCommerce WordPress Themes

WordPress is a kingdom of sorts.

For a long time (but not like a century long), WordPress has been known as the “King” of the websites. It is the kingdom where personal blogs, business sites, portfolio sites and the likes are built. You can find all sorts of themes there, including free eCommerce WordPress themes.

However, you can’t stay long in the King’s dominion unless you become fruitful. To survive and earn the trophy of success, you must know how to deal with competition.

Fight for It

Now, you decided to take a step forward to fight and started developing a site for business purposes.

You see, people in the world nowadays are more comfortable in shopping online. That’s your leverage. You can sell them goods, clothing, gadgets, jewelry and some other things.

You become an entrepreneur to survive.  You have your ally now. You are prepared for combat to stay productive in the kingdom. But, how can you attract your target market without a proper theme for your site?

You look for the perfect free eCommerce WordPress theme for your page. You will probably find hundreds of them scattered all over the magical land of the Internet. How will you know the best one to choose?

You might confuse yourself as there are two kinds of themes. There are free themes and premium themes available around Internet land.

Which One to Choose?

The functionality of free themes is not too complicated compared to the premium ones. The designs may be simplistic yet these are powerful enough to lure people to buy.

The advantage of free themes is that, you don’t need to spend any amount of gold because they are absolutely free (especially when you are just starting your business battle) unlike the premium ones. And in this case, you don’t need to pay for a designer to do the theme for your website.

Are you ready to enter the WordPress kingdom?

Open Up the Gates…

1. Albeco

Albeco2

It is a reliable kind of theme with professional and stunning looks for your site. It has a WordPress short code support, which makes it truly remarkable. It also has professional options that give you no effort in configuring items.

What’s the secret?

It is in the WordPress eCommerce template plugin. What does it have?

  1. A customizable store header
  2. Social network integration and with easy-to-use and setup product categories.

Its CSV product import extension will help you quickly transfer your product lists and descriptions from your previous store to your new WordPress site.

Common Issues Encountered by Users

  1. The list option doesn’t work.
  2. Sub-categories are overlapping.
  3. Installation failures.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

How do you  fix a bug that hides the created products and categories?

Check WP admin area, go to admin, point permalink and click the save button.

In the loop: Did you know Albeco uses Google Fonts on the headings?

2. Arcade (Basic)

Arcade

A theme with full functionality on its end, really great for your site. A lightweight and responsive theme that goes with any device. It is simple, attractive and awesome, which makes it different from other theme.

What’s the secret?

It has a full-screen header image, followed by a large call-to-action, widgetized homepage area with a block of posts at the bottom.

You can choose from the eight post formats for every post you write. Formats are included in the gallery, image, video, audio, quote, link and status.

The Master Mind

This theme is created by WordPress theme designer C.Bavota, who favors Bootstrap as a front-end framework for his products. He started working on layouts and designs a long time ago but still dreams of becoming a rockstar.

Unfortunately, he is no longer part of the band. On the bright side, he only layouts and designs the band’s tapes and the likes. He fell in love with designing and programming and he took off leading to that path.

What they say about this theme?

It’s beautiful and easy to use and customize. The headers look fantastic, the fonts are perfect, the posts are well displayed, it really is awesome. Embedded videos and photos are seamless and smooth, and that’s critical when that’s the whole point of my website. Playing around with it is easy and intuitive, and there are tons of ways to make it your own.” – amandabuckiewicz.

Common Issues Encountered by Users

  1. The support forum isn’t super active.
  2. It can’t add social media links/icons on the homepage.
  3. The font can’t be changed from the header.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

3. Artificer

Artificer

A great responsive theme especially for starters. It is really terrific as a commercial theme and that makes it unique.

What’s the secret?

This theme has a responsive layout design that can easily adapt to any desktop, laptop, iPhone and iPad.  It has a sticky note and sale banner to highlight and notify users when you have special offers and ‘mini-features’.

However, support is not included. If you need it, you will purchase a product from WooThemes to gain access to all the support resources.

How to Install?

If you want to know how to install your Artificer theme, you can go here.

Update your themes at all times to avoid all kinds of issues or problems on your site.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

In the loop: Artificer is designed for sole traders and small start-up business owners that seek to sell handmade products?

4. Balita

Balita

This is a reliable theme that will totally suit your site, especially when you are selling products for children. It is free and can be used to all your projects without any prior constraint in design. It is really an exceptional theme that you must have.

What’s the secret?

It is specially catered to showcase products for children. The theme is released under GPL. It has a Facebook Page Integration to market your products potentially on Facebook.

In addition to this, the products are listed in a grid-view, from which customers can easily compare the general overview and price of the products.

The Master Mind

This theme is designed by Tokokoo and released exclusively for Smashing Magazine and its readers. He has over forty thousand customers who use his creations on their online stores.

Common Issues Encountered by Users

  1. The CSS stylesheet is missing.
  2. It’s not installing properly.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

In the loop: Did you know Balita means toddler in Indonesian.

5. Boot Store

BootStore

This is a theme with excellent functionality and trustworthiness. It has a full support that is rarely given on free themes. Imagine, with a theme like this attached on your site, it will look extremely delightful.

What’s the secret?

This theme, which is based on Bootstrap, is attached with a grid extended system that allows your website to to be displayed at any viewing environment. It has a full website support such as:

  • Corporative pages
  • Blog (post formats)
  • Store with eCommerce support (TheCartPress eCommerce + Marketplace plugins)
  • Community (Buddypress support)

It also has a versatile and scalable carousel for posts, products and custom types. It’s independent navigation structures consists 20 widget areas.

Basically the theme is:

  • Multilingual-ready (WPML. qTranslate)
  • RTL-Language supported
  • Search engine friendly
  • W3C markup validated
  • Cross-browser configurated

What they say about this theme?

The best, and free of charge, way to make a professional Ecommerce.” – Inigoini.

Common Issues Encountered by Users

  1. Frontpage sidebar does not work.
  2. Not compatible with WooCommerce
  3. It’s very complicated to change the navigation background.

How many tried it?

This theme has over sixty three thousand downloads in the past days. Last week, 567 freelancers downloaded it. This is the high-end free theme for you.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

6. Bearded eCommerce WordPress Theme

Bearded

This is a simple but great theme for your site. This theme is filled with amazing touches like supports animate slider plugin support, among others. It just simply differs from other themes. See for yourself.

What’s the secret?

Bearded has an eCommerce solution for the WooCommerce plugin that comes very handy in setting up your web shop. It is hassle-free with its four column responsive layout.

The CSS3 and HTML5 of the Bearded theme is built with blogging and portfolio features. It is also built on Hybrid Core and supports the custom content portfolio plugin.

What they say about this theme?

This theme is awesome. Bar none, the coolest one I could find after hours of searching online. It’s slick, responsive, intuitive from a user standpoint; development, after playing around for awhile, is fairly self-explanatory and easy. There’s also a handful of good plugins that fit perfectly, similar to how Apple products work together. On top of all that, it’s FREE! Bearded has a great user interface and can handle whatever I throw at it, with the added benefit of being 100% cost-free. This is the first time I have downloaded a theme for creating WordPress websites and it might be the last; I can’t be more satisfied.” – TheChuchNorris.

The Master Mind

Designed and created by Justin Tadlock together with Hybrid Core Framework. They are really stunning designers who captively enchant their customers, clients and others.

They formed a collaboration to create a beautiful work of art such as this theme.

Common Issues Encountered by Users

  1. Incomplete CSS functions
  2. Too many files, need to organize stuff

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

7. Boemia

Boemia

This is an amazing theme that would performs greatly in your site. It is one of best themes on the market. The simplicity and responsiveness of its features makes it unique from others.

What’s the secret?

It has a Mega-menu feature with which you can select shopping according to price, category and brand function. It has a “Catalogue Mode” where you can turn off the cart bar and add the button to the cart without using the cart option.

It also has 2 customer checkout pages and an SEO panel to optimize the SEO of your pages and products.

Can you change the language of this theme?

This theme is localized using GNU’s ‘gettext’ functionality that allows users to translate any kind of language on their themes in whatever way they please.

What’s the technical support like?

The developers let you have an unlimited access on the support forum in all their themes.

What they say about this theme?

Excellent entry! It’s always nice when you can not only be informed, but also entertained!” –  Aquademica.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

In the loop: The developers started the word Boemia because the theme is made to be clean and clear just like a Bohemian crystal.

8. Cartsy

Cartsy

This is a really beautiful, organize and classic kind of theme.What makes it particular is that it is designed to have an exceptional typography.

What’s the secret?

Cartsy is optimized to work with WooCommerce to sell your own products. It has a built-in secure payment system and customizable product pages.

It’s extensive tax and shipping options with one page checkout for improving conversions works great.

In addition to these, it has advanced reporting and order management and includes a coupon module for running marketing campaigns. Also, it has an extensive documentation for both beginners and developers.

The Master Mind

This was constructed and designed by developers from Templatic. This is the company that has created various WordPress themes for 5 years.

This team is composed with different designers and programmers around the globe who make easy to manage themes for freelancers.

Do this theme work with the plugins?

The theme mostly work with the plugins. However, it’s not really guaranteed that it would work in all plugins.

Do the theme work with the latest version of WordPress?

The theme is updated regularly so, it will work with the latest version of WP.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

In the loop: Cartsy theme was graded at ThemeGrade and it aced 94% of it’s functionality which means it’s one of the best eCommerce themes out there.

9. Entire

Entire space

It’s an amazing and responsive eCommerce theme. It’s very powerful that you can get all options in this one theme. It’s a really great theme for your site.

What’s the secret?

This theme optimizes your WordPress-driven website from traditional online shopping to a business with eCommerce integration.

It has an outstanding minimalistic interface design that guides your consumers from getting confused on the your product lists. You can arrange sales pages easy and fast.

If you want to change the slideshow speed, you can edit entirespace/function/foundation/js/jquery.foundation.orbit.js. You can go under the defaults, “animation” controls the type of transition. Options will be shown there. To change the time between the slides, you can tap the “advance speed” option.Motsbro.

Common Issues Encountered by Users

  1. Users can’t seem to locate and edit their sliders.
  2. Link color override problem.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

10. eSell

eSell

This is a powerful theme with full functionality for your site. This is purely designed for WooCommerce and bbPress plugins. It has full features that can easily adapt into mobile, desktop or any other devices.

What’s the secret?

The theme support includes features and some plugin such as:

  • Breadcrumb
  • Page navigation
  • Post navigation
  • Edit Footer Copyright Text

This support and some others can be controlled via Theme Option Panel. It also has a powerful option panel that controls theme functions like:

  • Upload website logo
  • Favicon support
  • Custom widget control
  • Custom CSS styling
  • Advertisement management

eSell has a responsive style which increases user experience and allows you to control and customize backgrounds. It supports Google+ publisher URL in meta and website verification for Google and Bing.

The Master Mind

The brain who created this amazing theme was Sandy. He started to be an Internet surfer guy then, he started blogging and studying HTML codes. Now, he’s the founder and developer of an online web store called Baztro.

His store sells digital products like WordPress themes and more.

What they say about this theme?

Really helpful support for fixing an issue and help with customising. Perfect theme for use with WooCommerce plugin. Highly recommend.”- EgJS.

How many tried it?

Around 20,809 downloads were rated at WordPress stats. This might be the theme you need.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

11. Exquisite Style

ExquisiteStyle

This is a well-polished design with full integration of options for your site. It has a unique interactive style that is rarely available for your site.

What’s the secret?

Exquisite style uses the WooCommerce eCommerce plugin. It has 100+ handy options integrated into the framework. The options has a preview function that helps you view all changes.

It won’t generate until you save them. It is an SEO-ready theme. It can also translate the theme into 4 languages: German, Spanish, Italian and Russian.

The Master Mind

Designed and enhanced by Crocoblock, it is the known as the fastest growing WordPress theme club on the Web. They are a team of developers who create fully responsive WordPress themes.

They build their fresh creations using the Cherry Framework foundation. A free software where anyone can fully develop their theme websites. Today, they have over 75 themes on their page, both free and premium.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

In the loop: Promise first that you won’t freak out. The exquisite style demo has Latin language. Don’t worry, you can change the theme language once you uploaded the theme in your site.

12. Gold

gold

It is a sleek theme that will truly look great on your site. It compatible with WooCommerce and has a responsive shop template that makes it particular from others.

What’s the secret?

Gold is best for multi-purpose website because of its three-post area columns. It has well planned multiple templates, which makes it very flexible.

It is based on latest version of Responsive Framework of Twitter Bootstrap. It also has different template layouts with widgetized sidebar, footer.

What they say about this theme?

When I found your theme. Very customizable and sensible use of WordPress and responsive framework. I have customized the theme for using on my blog and found it very good.”- Clarkebrian.

Common Issue Encountered by Users

  • There are a few bugs in the theme.

Surely, support guys can fix that immediately.

  • How many tried it?

Over fifteen thousand users have already downloaded this theme. It’s simple, clean and tweaked easily. It is really great for all eCommerce sites.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

13. InterStellar

InterStellar

A clean and responsive theme perfect for your site. This theme has everything from it’s roots to make your site awesome. It’s design and style is uncommon in a very refined way.

What’s the secret?

InterStellar has multiple portfolio page layouts, homepage slider, widgetized homepage, theme options. The theme customizer and theme options has cross browser compatibility. Signing-up is required to enable download on the free theme.

The Master Mind

Created and designed by UFO Themes. They make beautiful and responsive WordPress themes for your websites.

What they say about this theme?

“Amazing theme! Not only is it gorgeous and easily customizable to fit my needs, it’s also very intuitive, which makes it so easy to use even for inexperienced user such as myself.”- Olga Saratova, a photographer.

Wanna know how it works?

If you want to discover more of this theme. You can check out this YouTube video. It will provide graphical information to you.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

14. Intuition

Theme Preview   Previewing Another WordPress Blog

This is a fully responsive theme that will look great on any device. One of the best free themes because it can present your product well without any complicated coding or tweaking on the theme.

What’s the secret?

It has an animated slider and featured content that displays your posts and pages. It highlights the selection without the need of creating an additional content. It is specially made to integrate with plugins like WPML for translation, Yoast SEO, Contact Form 7 or even WooCommerce.

What they say about this theme?

Very easy to use and simple, plus great design too.”- Regradi.

Common Issues Encountered by Users

  • The slider is not working.
  • Header not displaying on homepage.

You can ask your question on the support platform to help you with your theme problem.

How many tried it?

Over forty four thousand have downloaded, tried or used the theme. It’s a precise theme and you should give it a try.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

15. iShop

ishop

This free eCommerce WordPress theme has great features and easy to manage kind of theme for your site. This is a fabulous theme that will suite your online shop.

What’s the secret?

It requires few plugins like Options framework and Cart66 lite to activate and work. It fully supports WooCommerce and all WordPress features. It offers a custom template of the homepage to adjust it easily.

What they say about this theme?

This is really good theme. Suitable for my shop needs.”- Progam Kehamilan.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

Can you add featured image to the article that appears on the slider?

Yes, you can create and save your logo image to the images directory of this theme. In this case, it will be named as logo.png.

In the loop: iShop has been rated with 40 votes and counting by their users because of it’s glorious theme design.

16. Jeans

Jeans

A great responsive theme that will rock your site. It will surely make your customers happy with whatever you are selling because it’s almost perfect. Everything is great with this theme on your page.

What’s the secret?

The customization includes:

  • Height/width specifications
  • Header/footer
  • Menu type (static or dynamic)
  • Button location
  • Login box location
  • Styling content by using font options and other text elements

eSell has a responsive style which increases user experience and allows you to control and customize backgrounds. It supports Google+ publisher URL in meta and website verification for Google and Bing.

What they say about this theme?

Hi, I really enjoy this theme and I am thrilled with the design. It has been relatively easy to use for a newbie.” – Pollywogg.

Common Issues Encountered by Users

  • Difficult to insert a picture.
  • Removing the sidebar on one page.

These problems will be address by the support group.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

17. Jewelry

Jewelry

This is a luxurious eCommerce theme that is ideal for your online jewelry shop. This is the best theme when you are trying to sell jewels on the Net. It has the perfect simplistic design that goes with the sparkle of diamonds.

What’s the secret?

This theme is WP 3.8.1 Compatible and WooCommerce 2.1.X Compatible. Also, IE8+, Firefox, Chrome, Opera and Safari compatible with WP 3.2+ Compatible. The translation ready with .po and .mo files are also available. It has widget-ready sidebars and has a valid XHTML / CSS.

What they say about this theme?

It’s really convenient to work. I was looking for something interesting, unique in design. It is very important, that I can customize it very easily. The theme saves my time – it’s priceless! Thank you for this opportunity, I will use other themes in the future!” – Yulia F

How many tried it?

It has 13,935 free downloads.This theme is elegant and it can make your site flashy to capture more customers.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

In the loop: According to ThemeGrade, The Jewelry theme got 86% overall rating on it’s functionality.

18. Kakileema

Kakileema

This is a simply awesome responsive design theme that is great for your site. If you are selling clothes or any fashion apparel, this is the right theme that you need.

What’s the secret?

It perfectly suits your fashion shop business. It has WordPress eCommerce plugin integration. Kakileema is also widget-ready with 9 widgetized spots. The Tim Thumb on this theme support can resize images. It supports multiple languages and can change the inline text language on your own.

Can the theme be used on multiple sites?

It can be freely used on unlimited number of domains.

Do the theme widget is ready?

It is all ready but, better check out the demo first for more information.

Common Issues Encountered by Users

  • Difficulty in changing logos
  • Can’t posts images on front page

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

19. Kidshop

Kidshop

This theme is versatile and completely customizable, which will surely suit your likes. It all about children’s world in new fashion trends, toys and the likes. Shopping has never been easy with this theme around.

What’s the secret?

It has custom fonts, jQuery slider of recent products or based on category, shopping cart, beautiful color scheme, awesome layout design for products and a cool testimonial section. Kidshop has over 600+ Google fonts. You can choose from 3-portfolio layouts to show your projects.

The Master Mind

Theme design by yitheme is specifically developed for children powered by the  WooCommerce plugin. They collect a hodgepodge of themes that you can choose from. They have high quality themes and free ones.

Common Issues Encountered by Users

  • Custom fonts not working properly
  • Missing CSS sheet

You can always call the support team if you have problems on your theme.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

In the loop: Over fourteen thousand customers tried the Kidshop theme. It must be reliable and convenient for them because this theme is simple, clean and user-friendly.

20. Simple Online Store Theme

Simple

It has simplistic design which is truly flawless for your eCommerce site. Simple, described from the word itself, that makes it unique to any WordPress theme.

What’s the secret?

This theme is officially supported by Shopify, and works best on mobile devices as it does on large monitors. It has sleek animation and easy-to-customize settings. The products with tags can be seen on sub-categories.

What they say about this theme?

We’ve got on really well with this theme. Having only basic coding knowledge, we’ve made quite a few changes, such as getting the social media icons showing on the mobile view, and stopping the jQuery Fancybox, as we didn’t need it. We are now really happy with the site. I would thoroughly recommend it as a ‘simple’, clean interface that is highly versatile and customisable.” – The Nature Photography Co.

Do I need to be a designer or developer to change my theme’s style?

Not at all. The theme’s settings is not that complicated to adjust. You can do it by yourself.

Common Issues Encountered by Users

  • Cannot add slideshow banner on startpage.
  • Cannot add more than one image on the homepage.

Shopify support is active in responding for the users issues on the theme.

Here’s where you can see the demo of this theme. If you want to download it, you can do it here.

Wait! There’s more…

If you are looking for more treasure themes to try on, you can search here. It has the premium and free themes you can have.

Want more? Here’s an interesting one. These are the best premium themes in the market that you might fall in love with.

Anyway, if you are new in creating your very own eCommerce emporium, this tutorial would be more helpful to teach you how to design and how to handle your site.

So, have you picked the the best treasure theme for your site yet?

What I’ve been trying to tell you is…

  • These themes are the newly placed treasures of 2014 in the market.
  • They are truly stunning and good-looking themes that you can used for your business battle.
  • You don’t need to waste time looking for the appropriate theme for your site; it’s already placed here.
  • These are easy-to-download themes that will bedeck your site.
  • These themes are designed to make your online selling fast and easy.
  • All theme gems are responsive.
  • These themes will help you showcase your products to all your target clients.

The Tale Ends Here…

WordPress has been an amazing kingdom for all freelancers in the world. It has been an excellent ground in building high quality eCommerce allies for their traders.

So, did you end up finding the right treasure theme for your shop? Are you now qualified to belong in the King’s castle? Is it your time to gain the victory of making your dream come true?

Do you believe that tales can be so much like the world today? It’s becoming vicious and competitive. However, happy endings is always achieved. Do you think you can have a happy ending? I believe so.

How?  With eCommerce theme as your ally, tied with the perfect theme on your side, no one can stop you from obtaining a happy ending.

Remember: These treasure themes can be use in any of your WordPress eCommerce sites. When you attain what you’re aiming for, you will gain a long time stay in the King’s place, making a profitable income on your end.

The themes here play a great role for you to prosper. It’s your time to have that outcome in your life.

So now that you have these themes in your sight, which one would you choose?

The End.

Do you want to have updates coming from us? You can certainly join our emailing list here and the process will only take a second.

Powered by WPeMatico

Energize Your Static Website with this WordPress Conversion Tutorial (Part 1)

Web design and development are one of the most in-demand skills in last years. Agree?

As online business are grows, more and more clients are willing to pay large amounts of dollars for their sites to those with the right skill sets. You’ve probably have learned how to create an HTML and CSS website but, chances are, these sites won’t make any more sense for a big business or even blog site nowadays. This is the very reason why it’s important that there should be WordPress conversion of your site from HTML and CSS.

At first blush, there are a number of reasons why you would choose to have a static (HTML and CSS) website.

Why do people have static websites in the first place?

  • You want to make it easier to customize your site even if you are not a developer.
  • A static website is supported on almost every browsers.

But when it comes to functionality, a dynamic site like a WordPress site is the best way to go.

Why?

  • Static websites cannot produce dynamic output alone since it is built on a static language.
  • Faster turnaround. You need not spend a lot of time on getting the colors and layout right. You can go straight to admin panel to customize it.
  • Templates look much better than sites developed in traditional static HTML sites.
  • You don’t need to code if you want to add a page or a post. Simply go to the admin panel.
  • Security features offered by HTML are much more limited than a dynamic site like WordPress.

If you started with a static (HTML and CSS only) site, you don’t need to throw it all away when you want to move to WordPress. However, converting your HTML-and-CSS-only site into WordPress might require some programming knowledge like PHP and jQuery to run the static site on the dynamic WordPress platform.

In the previous tutorial, you learned how you can create a WordPress child theme. This WordPress two-part tutorial series will introduce the basics of converting the markup into a fully functional WordPress theme using the built-in NeoBlog HTML and CSS theme.

At the end of this tutorial, you will learn how you can convert your static HTML and CSS site into a fully driven dynamic WordPress site.This tutorial aims to provide more flexibility to the site owners, thus, giving you more power to do more on your site.

Resources You Need to Complete This Tutorial

What We Are Going to Build

Final_theme

What Codes Should Readers Take Note Of?

A WordPress theme is a way of ‘skinning’ the external design of your website. The theme can make a big difference to the overall look of your site. It offers a graphical interface via the WordPress template files.

In creating a WordPress theme, it is worth to note the following:

  • Be careful of the name of the templates file you created. By default, WordPress recognizes the default template name such as single.php and page.php file. I recommend checking the name of the default WordPress template before naming or creating a new custom file.
  • Check out WordPress Codex for some functions, tags or some other PHP codes before using it on your template files. This will keep you on the right track on what you want to do in your codes.
  • Sometimes you need some external jQuery files to improve the look of your WordPress theme or add some functionality. WordPress will not provide everything in a box.
  • Make sure to use well-structured, error-free PHP and valid HTML. See WordPress Coding Standards.
  • Use clean, valid CSS. See CSS Coding Standards.
  • Follow design guidelines in site design and layout.
  • Backup your files. You never have anything to lose by creating a backup. As a precautionary measure, you should backup all of your theme files, plugins you are using as well as some other files related to your theme development.

Why You Need to Take Note of PHP?

PHP is a programming and scripting language that creates dynamic interactive websites. It is a widely-used and open-sourced general purpose scripting language that is especially suited for web development. In addition to that, this programming language can be embedded into HTML.

WordPress is written using PHP as its scripting language. This has an open source license, certified by the Open Source Initiative. Just like WordPress, PHP is also open-sourced.

Some parts of the WordPress code structure for PHP markup are inconsistent in their style so it is important you have a basic knowledge about PHP.

However, you don’t need to be a PHP web developer to create a WordPress theme. You just need to have a solid foundation about HTML, CSS, JavaScript as well as a basic background on PHP.

Just in case you need to know more:

How Does This Work?

First, you will identify first the files you need to create to build a complete WordPress theme. The next step you will do is to start putting codes on each template files.

Along the way there will be functions that might not be clear to you. In this case, the WordPress Codex will be your best friend.

After you created each template, you will add contents to your theme to test if the whole codes you are using are working on your site.

Getting Started

To start converting your NeoBlog WordPress theme, create the theme folder in the wp-content/themes directory in the WordPress installation folder.

Please take note that the name of the folder should correspond to the name of the theme you want to create. For this tutorial, it is named NeoBlog.

file-folder

The Template Files

Compared with static HTML and CSS sites, a WordPress theme consists with a bunch of template files.

These are files that contain the codes to make a working WordPress theme. To do this, create the following files into the NeoBlog theme directory:

  • css folder – This folder contains all the stylesheets. Copy this folder from the NeoBlog HTML and CSS theme.
  • fonts folder – This folder contains all the external fonts used in the markup. Copy this folder from our NeoBlog HTML and CSS theme.
  • images folder – This folder contains all the images such as the logo and so on. This folder will be copied from NeoBlog HTML and CSS theme.
  • js folder – This folder contains all of the javascripts. Also, copy this from the NeoBlog HTML and CSS theme.
  • header.php – This file will contain the code for the header section of the theme.
  • footer.php – This file will contain the code for the footer section of the theme.
  • index.php – This is the main file for the theme. It will contain the code for the Main Area and specify where the other files will be included.
  • functions.php – This file behaves like a WordPress Plugin, adding features and functionality to a WordPress site.
  • single.php – This file will contain the basic layout of a blog page.
  • page.php – This file will contain the basic layout of a page.
  • page-about.php – This is a WordPress’s built-in Post Types template. If a specific page, or a group of pages should behave or display differently, this is easily accomplished with this page template. For this template, it will display an About page layout
  • page-contact.php – Another type of WordPress’s built-in Post Types template. This template will display a contact form on the pages it was set.
  • content-search.php – This file will run the loop for the search to output the results.
  • search.php – This file is responsible for displaying search results pages.
  • searchform.php – This file contains the layout of the search form.
  • comments.php – This file will contain the code for displaying comments.
  • sidebar.php – This file will contain the sidebar widget area.
  • 404.php – This file will return a “Not Found” notification if a particular search query is not found or doesn’t exist in the database.
  • style.css – This file will include all of the styles and information of the NeoBlog theme.
  • screenshot – a png image file, that should accurately show the theme design or the title of theme. For more information see check this page.

Over the course of this tutorial, codes are going to be added to these files that will include menus, hooks, loops and widgets.

For this part of this tutorial series, you are going to work on the following:

  • Copying Files to NeoBlog WP directory
  • style.css
  • screenshot.png
  • Activating the theme

STEP 1 – Copying Necessary Files to the NeoBlog WP Theme

To get started, copy the css, fonts, images and js folders from the NeoBlog HTML and CSS theme to the NeoBlog WP theme folder.

file-folder

STEP 2 – Naming Your WordPress Theme with style.css

Before stating with the template files, first add the links of the stylesheets of the NeoBlog HTML and CSS theme to the NeoBlog WP theme. Go ahead and create the style.css file on NeoBlog WP theme and then copy the code below.


/*
Theme Name: NeoBlog
Theme URI: http://www.1stwebdesigner.com/
Author: Sam Norton
Author URI: http://www.1stwebdesigner.com/
Description:  A Simple Blog Theme for 1stwebdesigner.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url("css/reset.css");
@import url("css/bootstrap.css");
@import url("css/style.css");

There is nothing special here but the information about the theme such as the name, author, author’s website and so on are enclosed within comment tags. This will make the theme easily identifiable upon installation.

It also has a series of @import tags. This will link the stylesheets from the CSS folder to the main stylesheet of the NeoBlog WP theme, which is this file.

STEP 3 – Adding a Screenshot Image File

Now that the theme has been successfully named thru style.css file, add a screenshot of the theme. Create an 880 x 660 px file in Photoshop and put a title text, the short description and the author of the theme on it.

The screenshot will only be shown as 387x 290 px on the WordPress admin panel, but the over double-sized image allows for high-resolution viewing on HiDPI displays.

screenshot

Afterwards, save it as a screenshot.png file on the root directory of the NeoBlog WP theme.

STEP 4 – Activating the Theme

After adding the screenshot of the theme, activate the NeoBlog WP theme.

But before doing that, to check on if the theme is working or not, create first a blank index.php on the root directory of the NeoBlog WP theme (don’t worry codes will be added on this later on).

Next, activate the theme, go to the WordPress admin panel and mouse over your mouse to Appearance -> Themes. Click on the Activate button.

themes

activate

If you are going to check the NeoBlog WP theme on the front end, you will notice a blank page because you have not put anything on our index.php file yet.

Major Issues You Might Encounter While Trying This Tutorial

While trying out this tutorial, you might have issues with combining PHP codes with the HTML codes.

What you should do

Double check it. It is better that, by this time, double check your codes. Sometimes you might forget putting an end if or end while statement inside a WordPress loop.

The code below will have an error since it does not have an end if statement:

For example:

<?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Post Content here
		//
	} end while;
} // end if supposed to be here
?>

The code you see below will solve the issue.

<?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Post Content here
		//
	} end while;
} end if;
?>

It would also help if you can check the the ending and closing tags of your PHP codes; otherwise, the codes might not work when mixed with HTML codes.

If you want to learn more how to add more functionalities on this blog, you might want to check and study the WordPress Codex.

What Limitations Does This Tutorial Have?

Although this tutorial will give you a head start on how you can create a theme, there will be limitations on this one.

It can only provide the basic features of a blog theme such as the sidebar, footer, search box, post list, featured images and so on.

Some More Recommendations

If you want more features you can try to study the WordPress codex as well as online courses on tutplus.com or Lynda.com in creating an advanced theme.

But Wait!

You don’t want to read the whole thing? You might wanna try the video version! If you need to know the Part 1 of this tutorial series, you need to watch the whole playlist.

Do you want to know what the contents this playlist? Don’t worry, a list has been provided so you know what to expect:

  • Introduction: What Do You Need to Build a WordPress Theme
  • Copying Necessary Files to the Theme’s Folder
  • Naming Your WordPress Theme with style.css
  • Adding a Screenshot Image File
  • Activating the Theme

Round Up

Great! We are done with the first part of this two-part series tutorial. In this article, you learned how to set up template files, things to avoid and some notes to look out for as well as the steps in creating a WordPress theme.

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.

Clear Conclusion

If you’re using WordPress, you’ve probably spent a long reasonable period of time searching for a theme you like, only to find out that you’ve been looking at the same theme designs in a variety of colors with just different set-up of elements. Maybe, it’s time you learned to create your own WordPress theme.

This series of tutorial will help you learn to convert an HTML and CSS template at the same time build your first basic WordPress theme. We’ll get under the hood and see how a basic theme works by going over on the template files required to build a fully functional WordPress blog theme.

Our HTML file is now prepared and ready to be converted into a set of theme files. In the next tutorial, Let’s work on some template files and add functions to support some functionality of your WordPress theme.

It wasn’t as bad as you think it would be, right? Don’t forget that this is just the first part. If you can’t wait, do try this part and tell us what you think in the comments below.

Powered by WPeMatico

The Noob Guide to Web Design

Web design is so much anchored on technology to a point that it is difficult for beginners to catch up, and if they even try to, it would be very difficult.

For someone who has zero idea on web design, this can be pretty frustrating.

You want to learn something new so you decided to try out web design. Because of this, you immediately looked for tutorials.

To your surprise, there are a lot of tutorials out there. However, browsing through each of those tutorials, you realize that these lessons are actually directed towards people who have designed websites before.

wondering

Your vibe dies and, eventually, you’ll just shrug your shoulders and admit to yourself, “Meh. I didn’t like web design in the first place.”

But would everything change if some article showed you the way? If just some tutorial kindled that small matchstick in your creativity, would you stop designing?

Of course, the answer to these questions depends on a case-to-case basis. However, things might have gone differently if you just saw great newbie guides to web design.

For non-web designers to want to try out web design, a noob guide would be great.

And yes, I’m going to give you one. So, keep your eyes glued in this article and let’s all start learning!

Learning Web Design

Since the Web has soared into popularity, interest in learning web design has also increased exponentially. Right now, there are a lot of people from different corners of the world who dream of building their own websites, and in the near future, earning from such activity.

This exponential growth dominoed into the increase of platforms and courses that guarantee you web design knowledge. There are blogs, forums and courses right here and there for your choosing. You just have to know which is the best one for you.

Here are a few avenues that may lead you to learning web design.

Web Design Schools

Group of young students smiling in the college classroom

School-based learning is an alien term in the world of web design. Because schools have been traditional and often can’t keep up with the fast evolution of the industry, some think that they are already ineffective.

However, some people just find going to schools helpful.

This may play out to your advantage if you want to learn web design. With the popularity of the subject, you will always find a university that offers web design classes.

Going back to school might prove to be an effective method because it is more formal and systematized. It also teaches in a pace you can keep up with. However, if you are on a very tight budget, this is not recommendedbecause going back to college is not as easy as it sounds.

Reading

o-READING-PILE-OF-BOOKS-facebook

Of course, aside from sitting in a classroom, listening to some guy blabber about web design, you can learn while staring at the letters flashing through your computer monitor.

Reading is one of the many ways you can learn web design. Now that design blogs have become a profitable niche in blogging, web design resources, tutorials and inspirations have become easier to access.

The timeliness of reading as a way to learning something will always remain. As we live in a time where most people can read, it should always be the go-to method in self-instruction.

Although, some view it as a lesser interactive and entertaining way of acquiring new knowledge, some people find it the most effective one.

Some Resources to Check Out:

Video Tutorials

domain

The prevalence of videos directed towards learning has been notable since the inception of video cameras. For such a long time, videos have become effective ways to teach and learn.

In the world of web design, video-based instruction is very popular. However, there are only a handful of tutorials that offer in depth and high quality teaching. The reason is, it takes too much effort, time, knowledge and resources to create instructional materials with the depth that everyone is looking for.

That may be the reason why some courses are pricy. There are some learning centers that also offer subscription-based learning where you pay a fee for a month to be granted access to a library of web design knowledge.

Resources to Check Out

Web Design Jargon

Businesswomen Celebrate Success on the Laptop in the Kitchen.

A jargon is a special word or expression used in a particular profession or group and are difficult for others to understand.All professions in the world have their own jargons; web design has its own language too.

Here are a few web design terms and their meanings:

  • Anchor Text

An anchor text is the text a link uses to direct to your website. Anchor texts play a big role in increasing and optimizing your website for search engines.

  • Back End

A website’s back end is a facet of the website not visible to regular visitors. It includes information, structure, applications and Content Management Systems that controls everything within the website.

  • Backlink

backlink is a link attached to any element within another websites page that links to your own site. Also known as track backs, these links play a great role in increasing your site’s web search engine ranking.

  • Bandwidth

Bandwidth refers either to the rate the data can be delivered or the total amount of data transferable from a web host on a given time. Measured in bits-per-sec, kilobits-per-sec and other metric measurements, bandwidth can affect how fast your website loads.

  • Bounce Rate

Bounce rate refers to the number of people who browse your website without clicking any other page. This percentage commonly reflects the beauty of your website navigation and content. When your bounce rate goes high, it would only spell something wrong.

  • Breadcrumbs

Breadcrumbs refer to the small elements found in the website’s navigation. They commonly appear near the top of the webpage and shows the pages, sub-pages and other directories the said page is placed. Example, in a website’s breadcrumbs, you see: Home>Blog>Web Design>Inspiration>Post.

  • Cache

Cache are files that are saved, copied or downloaded from the website by your browser to increase the load time the site is visited, it will load faster.

  • Content Management System

CMS as it is famously known, these are backend tools for managing a website’s content. It also separates the content from the design itself and the functions.

  • DNS

A DNS or Domain Name Service’s main function is to convert your IP address into domain names. DNS servers are commonly provided with the IP of your website when you purchase a web host.

  • e-Commerce

Electric commerce or e-Commerce refers to the usage of websites to buy or sell goods. Transactions in E-commerce websites can be physical services or products delivered using email or direct download.

  • Em

An em is a unit used to measure fonts and other web elements within a webpage that relates to its parent. 1em is equal to the point size for the font defined within the parent element.

  • Fold

The fold is the point on the webpage that is shown initially. Anything that you see below the fold are the elements you see when you scroll down.

  • Front-end

A website’s front-end refers to the components of the website that the visitors see. These are pages, images, content and UI.

  • Hexadecimal

Hexadecimals, also called “hex” numbers are a base-16 numbering system used to identify colors. These numbers include the numerals 0-9 and letters A-F. They are written in three set of hex pairs: the first pair defines the red hue, the second green and the third blue.

  • .htaccess

The .htaccess file is a default configuration of the apache server. The configurations contained within the .htaccess determine which file is placed.

  • HTML

HyperText Markup Language is the primary language understood by web pages. HTML is intended to provide the framework and content of website.

  • HTTP

HyperText Transfer Protocol is a set of rules in order to transfer requests between browsers and servers.

  • HTTPS

HyperText Transfer Protocol over SSL (Secure Socket Layer) are set of rules for transferring requests from a browser to the server (and vice versa) only that it uses a secure and encrypted connection.

  • Landing Page

A landing page is the page the visitors see when they enter the website. Landing pages are specifically designed to call action from the new visitor.

  • Meta Data

A meta data is a data contained in the header that shows the information about a web page the visitor is on.

  • Permalink

A permalink or “permanent link” is used on blogs to define the permanent address of a given blog-post.

  • Plugin

Plugins are any bit of third party codes that extend or increase the capabilities of the website. Plugins go with CMS or blogging platforms and make it easier for the developer to have functions added over time without re-coding the website.

  • Really Simple Syndication

rss

RSS or Really Simple Syndication is referred to as the standardized XML format that allows content to be syndicated between two or more websites.

  • Resolution

Resolution is used to define the number of pixels displayed in the screen.

  • Script

These are portions of code in an HTML page that adds dynamism and interactivity.

  • Web Server

A web server is a computer software that allows a computer to host websites, web and web pages to make them available anywhere.

The Web Design Process

When web designers acquire clients, they follow a series of steps. These steps organize their work and allows them to monitor their own progress as each step is completed.

Here are the six steps in the web design process:

  • Research

focus

The first step in any web design project is to gather information that may help you in designing. Obviously, the information will allow you to understand the target audience, the possible content and design of the website, all of which are necessary to make the website successful in the future.

Here are a few things you need to consider:

  1. Purpose
  2. Goals
  3. Target Audience
  4. Projected Content
  • Planning

Business people shaking hands, finishing up a meeting

Planning is one of the most important steps in this process because it’s in the step where the concept of the project is built. This also requires constant communication with the client to determine the details of the project that will be retained or removed.

  • Design Proper

Graphic designer

This is the step where you make ideas real. In this stage, web designers plot the ideas approved by the client into functional visual representations.

Here are a few sub-steps:

  1. Wireframing
  2. Mockup Creation
  3. Designing
  4. Re-designing
  5. Slicing and Coding
  • Development

bg2

In this stage, the web designer becomes more like a shadow as the developer takes over. Because it includes a lot of programming and content creation, this process can be very complicated and distressing. Codes need to be organized, commented and referred to the original concept.

Conclusion

As this article ends, I hope you learned a lot. For newbies, web design is very daunting. But it takes patience, skill and some hard work to become successful web designers. Remember, all web design experts started like you are right now – newbies. If they did it, why can’t you?

Good luck. If you have questions, feel free to ask at the comment section below.

Powered by WPeMatico

How We Created The Best Freelance Marketplace On The Internet

Are you unhappy with the lack of clients you are getting as a freelance web designer?

We know, we asked, and we understood the need for a great place that connects freelancers with clients but we couldn’t find a good solution to recommend.

Existing job boards, crowd sourcing sites and freelance marketplaces all seem to undervalue designers and serve clients with cheap solutions.

Then we spoke with a few of our entrepreneur friends and guess what? The hardest part for them is finding talented designers and developers!

The world needs a better way to find the perfect designer or developer. And freelancers need a better way to get more and  better clients. We believe we’ve created that better way.

It’s called AwesomeWeb!

To kick it off with a boom, we invited 12 of the best designers and developers on the Internet to help mentor you!

Find a Web Designer or Developer · AwesomeWeb

…and these are the best designers and developers that you could find from around the globe!

The Problem with Finding More Clients

After climbing through every job board, crowd sourcing site, and freelance marketplace we could find, they all had one thing in common- they all catered to the client while putting up a barrier between you and them.

  • Job boards allow clients to post projects that generally go to the lowest bidder.
  • Crowd sourcing sites attract the low-end clients who expect hundreds of designers to work for free.
  • The big freelance marketplaces are flooded with agencies who have worked for thousands of clients.

How are you supposed to compete?

Maybe they’re right. Maybe there’s a reason they all appeal to the client. Maybe that’s the best way to maximize profits and build out their companies.

But we believe there is a large and growing group of under-served entrepreneurs, designers, and developers who value quality over cost, people who want to make the web more awesome.

The Feedback from Beta Testers

Earlier this month we started beta testing the site. People loved it! We had over 300 applications for 20-30 spots. They couldn’t wait to get in, create their accounts and showcase their work.

beta-testers

…and here’s the launching of a marketplace to search for awesome web designers and developers!

Email after email started rolling in.

“That is an awesome idea, honestly. Your work should have a fair chance in the market and the client should come to you, rather than being pressured into hiring the big dog. I feel that is one of the major areas that Elance and Freelancer went wrong. They made it to where companies came in and basically took over the market (having employees posing as freelancers) because they were able to approach the client, rather than the other way around. Sure, they had to be invited in the end, after presenting a proposal…but when they dress up their proposal with less than minimum wage rates and ‘thousands of websites built to date’, how is a single freelancer supposed to compete with that?” ~ Andrew R., designer

Right now, I believe that the bar is set pretty low on popular sites like oDesk, Freelancer, etc. I get the feeling that your project wants to change that.” ~ Liviu M., designer

“I am all for helping expand opportunities for designers and clients to meet in a forum that is fair to both. I was a Codeable vendor and resigned due to policies that only favored the client and not the designer.” ~ Jonathan F., designer

“Too many companies are conned into using services like PeoplePerHour or Fiverr and end up with substandard work.” ~ Simon P., designer

“I am all for better way to connect the right web designers to the right clients. It shouldn’t take scouring Google, Craigslist, oDesk, or Freelancer for days just to find a good web designer. Let’s make it fast, simple, and easy” ~ Charley L., designer

Talented designers from around the world are clamoring for a better solution.

We’re Like You. We’ve been there…

Before we tell you what we have built, we want to share our partner Nicholas Tart’s story because it is important for you to know where we’re coming from and why we created this project:

“As a freelance web designer and front-end developer, it took me two years to build up a modest client base. I started at $15 per hour, built a few sites, increased my rate, built a few more sites, and increased my rate again. The cycle continued but it could’ve happened much faster. I was nowhere near capacity. So I started looking into my options.

I hated the concept of crowdsourcing. I’d rather focus on my side projects than work for a 1-in-100 chance at getting paid. Then I looked through the freelance marketplaces and found nothing but a sea of $100 projects. I’m sure these sites work for some people, but it wasn’t for me.

Without finding anything that could help, I continued to take on a few clients per year while managing my existing clients. I was able to pay my bills but my days were never full with billable work. I could only imagine what it’d be like working at $50-100 per hour, 40 hours per week. And to have enough work coming in that I could start turning clients away. It’d be a dream!

There was nowhere for a freelancer like me. Someone who has several years of experience building $3K – $10K websites, who was only a few $10K projects away from opening up an agency or being able to focus on my side projects part time.

That’s when I started working with Michael and Dainis on this project called AwesomeWeb!

~ Nicholas Tart

The Beginnings of AwesomeWeb

about-team

…these are the faces of the amazing and brilliant people who designed and created AwesomeWeb.

In January of this year I met with Nick and Michael Dunlop at a cabin in New Forest, England to establish the foundation of what is now AwesomeWeb.

Michael Dunlop (founder of IncomeDiary and PopupDomination) is well-known in the Internet marketing community. His software has been viewed over a billion times. The number one question he receives is “Can you recommend a good designer?”

We set out to build a simple freelance marketplace for people who do and need awesome work. The concept is built on three principles:

  1. If you’re a website owner, it should be simple to find talent and choose who you work with.
  2. If you’re a freelancer, you should be hired based on the merits of your work.
  3. The purpose of a freelance marketplace is to connect clients and freelancers with the perfect clients and freelancers.

without barriers.

Our developer, Stefanos Ioannou, happened to be in the UK at the time, so he joined us for a weekend. Then I told them about my designer, Michael Burns, who we brought into the project just a few hours later.

We had our team. We had our foundation. It was just a matter of building it. Easy right?

How Does AwesomeWeb Work?

How would you like to focus on building awesome websites without worrying about finding new clients? Not only that, how would you like to choose your clients rather than begging them to choose you?

iterations-awesomweb

…different design styles brought by the awesomeness of AwesomeWeb developers.

AwesomeWeb is a subscription-based freelance marketplace. For a flat $17 per month, you’ll be able to create an account, choose your skills, upload a few projects, request endorsements and sit back as clients sell themselves to you.

No more percentage of project fees. No more waiting for a Big Brother marketplace to hand you a measly project. If you have the skills that clients are looking for, and you have the portfolio to back it up, clients will contact you. If they don’t, leave within 90 days and we’ll give you your money back.

One good client will pay for your account for life.

In a few short weeks, we’ll be opening AwesomeWeb to a limited number of freelancers.

In the meantime, make sure you enter to win an AwesomeWeb Scholarship below.

Back to Our Launch Contest

To commemorate our launch and give back to you, we’ve asked 12 of the world’s most talented designers and developers to mentor 12 lucky winners!

It’s called the AwesomeWeb Scholarship!

These designers have stepped up in a big way to give you an hour of their time:

Those were just the first four, care to check out more of them in here!

1800x845v2-DesignerDeveloper

…AwesomeWeb just gets more awesome every minute; you can gain a scholarship slot here from the world’s best mentors!

When Michael, Nick, and I were on a walk out in New Forest back in January, we brainstormed on how to launch AwesomeWeb.

We considered an iPad giveaway, but that would’ve been gimmicky and overdone. Then we thought about giving away 100 of the best design and development books.

It would’ve been better, but what if we could give people the chance to talk directly to the authors of those books? Nothing is more valuable than the time and wisdom of a mentor.

So that’s what we went with. It took a lot of work to get these people onboard, but they’re ready and excited to help.

Click here to enter the AwesomeWeb Scholarship!

Let’s make the web more awesome!

Powered by WPeMatico

The Listed Voyage: 30 Free jQuery Navigation Menus

Nowadays, jQuery navigation menus are more than just plain texts with links on it. In a previous tutorial, I presented to you how you can create a navigation menu with jQuery and CSS3, which is a cool way to display your menus on your site.

With the power of jQuery, it can turn the navigation of a website into a dynamic menu. Although CSS3 can now be used to create dynamic navigation, still, jQuery adds more functionality on the menus.

Aside from the dynamic functionalities, the design must also be considered. This is simply because your visitors would probably see it for the first time they visit your site.

It will definitely provide a bad UI experience if not well presented. Having a great design will add more value to your site thus adding better user experience.

Today, I present to you 30 of the good jQuery navigation menu examples that you can check on and be inspired with.

1. Pushy

1

Pushy is a responsive off-canvas navigation menu using CSS transforms and transitions. It has a smooth performance on mobile devices. Be sure to check out the demo, you definitely will like it.

Demo | Download

2. Slinky

2

This is another great jQuery for creating beautiful scrolling navigation lists with stacking headers It has a smooth scrolling with low file size.

Demo | Download

3. jQuery Pop Menu

3

This is a simple responsive popup menu yet cool features. When you click on the menu icon, it will pop-up the menu with icons. Check out the demo.

Demo | Download

4. Slidebars

4

Slidebars is a jQuery framework for quickly and easily implementing app style off-canvas space into your website. Slidebars also handles orientation changes and resizes flawlessly.

Demo | Download

5. jQuery Square Menu

5

A jQuery menu that displays a square-like menu animation for website using jQuery and CSS3. Make sure to check out the demo.

Demo | Download

6. Perspective Page View Navigation

6

This jQuery navigation will transforms the page to 3D to reveal a menu. The idea was that of mobile app design wherein you click on the menu and then it will flip the other side of the page.

Demo | Download

7. SlickNav

7

A responsive mobile menu plugin for jQuery with multi-level menu support and a flexible but simple markup. It supports cross-browser compatibility. It can be accessed by pressing the keyboards.

Demo | Download

8. Mmenu

8

A jQuery menu for app look-alike on- and off-canvas menus with sliding sub-menus for your website and web apps. It is very customizable through a wide range of options, extensions and add-ons.

Demo | Download

9. Sidr

9

A jQuery plugin for creating side menus and the easiest way for doing your menu responsive. With Sidr, you will be able to create multiple sides of your website and responsive menus.

Demo | Download

10. slimMenu

10

slimMenu is a lightweight jQuery plugin, which makes it easier to create responsive and multi-level navigation menus on your site. What is great about this menu is that it has multiple menu on the same page and it is 100% mobile responsive menu. Don’t miss the demo below.

Demo | Download

11. HorizontalNav

11

A jQuery navigation that spans a horizontal navigation to fit the full width of it’s container. This plugin makes it easy and adds support for IE7.

Demo | Download

12. FlexNav

12

This is a mobile-first example of using media queries and JavaScript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility.

Demo | Download

13. jQuery Menu-Aim

13

A jQuery menu that triggers events when user’s cursor aims at particular drop-down menu items. This is perfect for making responsive mega dropdowns like Amazon’s.

Demo | Download

14. SmartMenus

14

A jQuery website menu plugin that offers simple and neat display of navigation. It is responsive and accessible list-based website menus. It works on all devices too!

Demo | Download

15. Shifter

15

Shifter is an easy-to-use and mobile-first jQuery plugin for creating a slide menu which slides out from the right side of the page when clicking or tapping the toggle button. The plugin has only just a simple maxWidth option. This allows to set resolutions/dimensions the mobile navigation will appear on the web page.

Demo | Download

16. Hamburger

16

Hamburger is a jQuery navigation for creating an Android App-style sliding menu that displays a fly-out navigation on the left edge of the screen. As the sliding menu expands, it overlays the main content but not the action bar.

Demo | Download

17. Focucss

17

Focucss is a jQuery navigation to create an off-canvas sidebar navigation with a cool blurring effect that will focus your users on your sidebar content, and blurring useless content.

Demo | Download

18. Drawer

18

Drawer is a jQuery navigation for creating a responsive, touch-enabled and animated side menu that slides out from the edge of the screen when clicking or touching the trigger. This feature can also be seen on Android applications.

Demo | Download

19. Datmenu

19

Datmenu is a premium jQuery Responsive Menu with multiple CSS3 animations. What is great with this plugin is that it is fully customizable from js options.

Demo | Download

20. jPanelMenu

20

jPanelMenu is a clean and modern jQuery menu that helps create a paneled-style navigation with CSS3 transitions animations for your web application or website. jPanelMenu is inspired by the mobile versions of Facebook and Google. It has been used in a wide variety of mobile applications.

Demo | Download

21. Fly Side Menu

21

Fly Side Menu is a cool menu plugin that makes use of CSS3 to create a side menu navigation with 3D transforms and transitions.

Demo | Download

22. PageScroll jQuery Menu Plugin

22

PageScroll is a customizable mobile-ready jQuery menu, recommended for any website, best for landing pages.

Demo | Download

23. DD Icon Menu

23

DD Icon Menu is a jQuery plugin which allows you to create a icon-based vertical & sticky menu panel at the edge of the screen that will slide out sub-menus on hover-over.

Demo | Download

24. JQuery Mobile Date Navigation

24

A jQuery navigation menu which provides navigation between date range, by a defined range (week, month and year). Ideal for querying information accurately by AJAX calls.

Demo | Download

25. Navobile

25

A jQuery Navigation menu plugin that makes mobile navigation easy. It uses CSS to apply CSS translations to fix the position of the navigation on mobile devices.

Demo | Download

26. Multi-Level Push Menu

26

Multi-Level Push Menu is a Javascript library created by MARY LOU of Codrops. This creates a multi-level push menus which will slide out from the left side of the page by pushing the website content to the right.

Demo | Download

27. Box Lid

27

Box Lid is an easy-to-use jQuery plugin that enables you to create a side navigation menu with 3D ‘Box Lid’ effects by using CSS3 transitions and transforms.

Demo | Download

28. JQuery Mobile Slide Menu

28

A sliding jQuery menu that has similar looks to Facebook and Path’s approach to menu design on mobile.

Demo | Download

29. scrollNav

29

scrollNav is a jQuery plugin that displays the existing content on a web page, divides it up into logical sections and builds a customizable scrolling sidebar navigation.

Demo | Download

30. DoubleTapToGo

30

DoubleTapToGo is a jQuery plugin that helps you create usable multi-level dropdowns which are touch-friendly and responsive.

Demo | Download

Conclusion

There you have it! All of these jQuery menu plugins and tutorials provide cool and neat look on your menu. You can use it on your projects to impress your clients. If you know some other jQuery menu, feel free to share it on the comment section.

Powered by WPeMatico

The Zen of Relational Database: Learn the Basics Here!

Databases have been a staple topic on every digital business. Thus organizing the tables and fields is necessary. The concept of Relational Database was born way back in 1969 when Edgar F. Codd, a researcher from IBM, wrote the process of outlining a database. From there, the this concept has spread on every computing-involved business and task.

According to Wikipedia,

  A relational database is a database that has a collection of tables of data items, all of which is formally described and organized according to the relational models.

This means that using the relational model, each table arrangement must be identify a column or group of columns to distinctly identify each row also called as primary key.

Using a foreign key, it can be used to establish a connection between each row in the table and a row from another table.

To properly organize a database, it involves database normalization. This is the process of organizing the tables and fields of this kind of database to minimize redundancy of information.

That being said, using definitions and terms alone won’t make you understand this topic. In this article, you’re going to learn how you can properly structure this specific database. You are going to look on two fictional tables and start working on it.

The Data

For the data, below, the base table includes two tables: Student table and Class table.

This database maintains data about the Student’s information and Class information.

Each student will have a unique Student ID (which may consist of letters and numbers) but may have similar name, operating system, class and instructor. One instructor may teach more than one class.

The Student table will have the following fields:

  • Student ID
  • Student Name
  • Operating System

The Class table will have the following fields:

  • Class ID
  • Class Name
  • Instructor

base-d

Now to expand the data, below presented are the Student table and Class table.

student_table

class_table

Identifying the data objects and relationships between tables

Now using the given data, you need to identify the data objects and relationship that need to be maintained in the database.

Looking at the Student and Class tables, you can conclude that the data objects are Student and Class. The relationship is that one student can have one or more classes.

Identifying Relevant Attributes: Primary Key and Foreign Key

Now that data object and relationships between the two tables have been defined, specify the relevant attributes between the two.

If you are going to check the two tables, you need to find the unique column for each table. Notice that you have only 1 row on each table that contains some unique data.

For the Student table, you have the Student ID while, in the Class table, you have the Class ID. These two rows are called the Primary Key.

The primary key of a relational table uniquely identifies each record in the table.

primary-key

Next, for the relationship, you need to determine its attribute(s) and identify its Foreign key.

The foreign key matches the primary key column of another table. The foreign key is used to cross-reference tables. In this case, you will use Enrollment as our new field to connect the two foreign keys:

  • Enrollment (Student ID) attribute is a foreign key referencing the Student (Student ID) attribute from the Student table.
  • Enrollment (Class ID) attribute is a foreign key referencing the Class (Class ID) key attribute from the Class table.

Using Relational Tables

Now that you have identified your primary key and foreign key, you need to create a relational table to represent the data objects and relationships with their attributes and constraints.

See table below:

foreign-key

The foreign key Student ID in the Enrollment table references the primary key Student ID in the Student table.

The foreign key Class ID in the Enrollment table references the primary key Class ID in the Class table.

In the table above, you created a new row called Enrollment ID to relate both Student ID and Class ID, which is also define the foreign keys.

Conclusion

That’s really it! That is how you to create a database of this kind. When creating such databases, you can define the domain of possible values in a data column and further constraints that may apply to that data value.
It also requires the normalization process to remove the redundant data and connect all of the tables into one table.

In this article, you learned something about the concept of such database and how to design one; so, how do you implement one?

If using Relational Database Management Systems (RDBMS) software is your answer,  you are correct! But I won’t be discussing the process in this article.

I will create another article for that soon. Hope you learned something from this article and let me know about your thoughts on the comment section.

Powered by WPeMatico

Image Caption Animation with CSS3 Transform and Transitions

jQuery caption hover effects have been on the Web for a long time. There are plenty of jQuery libraries out there that can be used to obtain a cool and amazing image caption animation and hover effects.

That being said, it is now possible to do the same cool effects with CSS3 transitions and transform properties.

Today I want to show you how you can create cool animation hover effects with CSS3 animation. The images used in the demos were illustrated by Rudolph Musngi.

screen

Demo

Resources You Need to Complete This Tutorial

The Markup

With HTML5, you can now semantically wrap your images and captions using the figure and figcaption elements. For all the examples, use the same HTML markup. Wrap the images and figcaption contents with a figure element.

<figure>
        <img alt="nerd girl" src="img/img3.jpg">

        <figcaption>
            <h3>I love this title!</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <p><a href="#">Read More</a></p>
        </figcaption>
    </figure>

The CSS for Demo 1

For the CSS, the figure element will have a relative positioning. In this case, the captions and the images inside can be stacked over each other via absolute positioning. Then, we will put some basic styles on each element.

Notice that transform property – rotate on and transition property of the figcaption style are used. This will give a nice rotation and smooth effect for the caption. Some of the elements like H3 and paragraph tags will have a transition-delay property so that there will be a delay on the entrance of each elements for the caption.

img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-o-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
            	top: -100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	left: 100%;
	margin-top: 37px;
	font-size: 30px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	-webkit-transition-delay: 1.3s;
	-moz-transition-delay: 1.3s;
	-o-transition-delay: 1.3s;
	-ms-transition-delay: 1.3s;
	transition-delay: 1.3s;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

The CSS for Demo 2

Using the same property as above for the figure, figcaption and some basic elements, remove the transform property – rotation to from the figcaption element and the transition-delay property to all of the elements except to the figcaption element. As a result, you will have smooth fading hover effects.

img {
	width: 100%;
}
figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
    border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

The CSS for Demo 3

For the third demo, create a zooming effect for the image. For the image element, use the transform property – scale to change the size of the image when the mouse-over state is triggered. We will also put the transition-delay and transition properties on both figcaption and image elements.


img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figure img {
	-webkit-transition: all 1.5s;
	-moz-transition: all 1.5s;
	-o-transition: all 1.5s;
	-ms-transition: all 1.5s;
	transition: all 1.5s;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figure:hover img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

The CSS for Demo 4

Lastly, for this demo, create cool sliding effect. You will have almost similar CSS, like the third demo. This time, you will be adding a top property position on the figcaption but without the rotation.

img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 250px;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

Conclusion

And that’s it! I hope you enjoyed and learned something on this tutorial. I am hoping that you also got inspired to design more amazing image caption hover effects using CSS3 transform and transition-delay property.

Powered by WPeMatico