1stwebdesigner

---

Energize Your Static Website with This WordPress Conversion Tutorial (Part 2) Posted: 30 Sep 2014 06:00 AM PDT 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 NeoBlog HTML and CSS theme Basic Knowledge of WordPress Codex Intermediate Knowledge of PHP and jQuery 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. 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. 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. 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   [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!

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

The Single Var Pattern in JavaScript - Six Revisions

---

The Single Var Pattern in JavaScript Posted: 29 Sep 2014 03:00 AM PDT One of the most beautiful things about JavaScript is its flexibility. The language gives developers a lot of slack by not giving us a lot of rules and conventions to deal with. A prime example: JavaScript allows us to create any type of variable, anywhere in our script (because it’s a dynamic programming language). That’s great news, but it can also be a double-edged sword if we don’t exercise a bit of caution. One popular way of working with JavaScript variables more effectively is the single var pattern. I first formally encountered this pattern in Stoyan Stefanov’s book, JavaScript Patterns, and I’ve been using it ever since. Douglas Crockford, a leader in the world of JavaScript, supports the single var pattern. His reasoning is below: [...] because JavaScript does not have block scope, it is wiser to declare all of a function’s variables at the top of the function. It is recommended that a single var statement be used per function. JSLint: The JavaScript Code Quality Tool Let’s talk about the JavaScript pattern and why you might want to use it in your development projects. The Single Var Pattern In the single var pattern, all local variables are created using only one var statement. The statement is placed at the start of the function block. Each variable is separated by a comma (,), and the last variable ends with a semicolon (;) which terminates the var statement. Here’s an example of the pattern: function myfunction() { var a = 1, b = "Hello", c = { name: "Jake", age: 64 }, d = new Date(), e; } Details The above example is equal to having multiple var statements for each variable: function myfunction() { var a = 1; var b = "Hello"; var c = { name: "John", age: 64 }; var d = new Date(); var e; } By the way, the multiple var statement pattern shown above is a good alternative to the single var pattern because the variables are also declared at the start of the function block (which avoids logical errors) and is also readable, thus providing web developers the same benefits, albeit in a more verbose manner. In JavaScript, spaces, newlines, tabs, and other spacing characters before and after commas and semicolons are ignored, so we could have written the example above in just one line, like so: function myfunction() { var a = 1, b = "Hello", c = { name: "John", age: 64 }, d = new Date(), e; } But it’s a good practice to put each variable on its own line for improved readability, and so that you can more comfortably comment your variables individually if needed. Does Data Type Matter? JavaScript is a dynamically typed language, so we don’t need to explicitly declare what data type a variable is/will be. The data type can also be changed from one type to another without any special treatment. So, we can have a mixture of data types — strings, function literals, arrays, undefined, etc. — in one var statement without any issues. Do Some Work The book I mentioned earlier also recommends doing some "actual work" during the single var statement. For example, let’s say we created a function that returns a randomly picked integer number between two numerical arguments we feed it: // A function that returns a random integer number // between two specified integer arguments. var randomizer = function (a, b) { var min = a, max = b, random = Math.random(), result; // Calculate random number result = Math.floor(random * (max - min) + min); return result; } // Display random number in an alert box alert(randomizer(1, 100)); What we could do instead is to include the calculation of the result variable’s value in our single var statement, as follows: // A function that returns a random integer number // between two specified integer arguments. var randomizer = function (a, b) { var min = a, max = b, random = Math.random(), // Calculate random number result = Math.floor(random * (max - min) + min); return result; } // Display random number in an alert box alert(randomizer(1, 100)); Doing some work during the single var statement does two things: It slightly reduces the amount of code we have to write It avoids redundancy. More specifically, we don’t need to declare an undefined/empty variable that we will end up using in our function anyways A Variation There’s an alternative formatting style for the single var pattern, which is to place the comma-separators at the start of each line, instead of at the end: function myfunction() { var a = 1 , b = "Hello" , c = { name: "John", age: 64 } , d = new Date() , e; } The purpose of this variation is to remind you to separate your variables with commas whenever you add a variable in the statement. The placement of the commas is a matter of preference. Me? I like having the commas at the end of the line because it makes the var statement easier to read, and my code editor’s syntax highlighter quickly reminds me that I’m missing a comma between variable declarations. Also, in my opinion, having a line start with commas is unnatural and less readable. To each his/her own. Benefits of Using the Single Var Pattern Why would you want to use this JavaScript pattern? I’ll give you three reasons. But before I discuss them, I also want to say that there’s no "one correct way" of declaring JavaScript variables because the language doesn’t have any enforced rule or explicit standard for this process. Other ways, such as the multi var pattern I briefly mentioned earlier or even just declaring variables on first-use will work just fine. With that said, you do get a few benefits from applying the single var pattern. Ease of Use It’s easier to create and manage variables when they are all in one spot. You don’t have to wonder where a certain variable is; all you have to do is scroll up to the top of the function to review or modify your function’s variables. Code Readability The single var JavaScript pattern is similar to the abstract of a scientific paper: It provides the reader with a quick overview of what the function will do without having to read the entire thing, compared to if the variables were declared on first-use. However, this is only going to be true if the variables are named intuitively and when the function is commented well. Reduce the Possibility of Logical Errors Because all of the variables are right at the start of the function block, we can sidestep issues related to variable hoisting, naming collisions, and accidentally declaring global variables. Let’s talk about each of these real quickly. Hoisting In JavaScript, hoisting refers to the language’s behavior of processing all of the statements first before it executes anything else. In other words, JavaScript hoists them up to the top of the scope. Because we’re deliberately and consistently placing all of our variables at the beginning of the function, it helps us avoid unforeseen results related hoisting. Variable Naming Collisions When you’re working on long and complex scripts, you might, at some point, unintentionally reuse a variable name, and this can lead to logical errors. By having all your variables in one spot, you can keep an eye out on what variable names you have already employed. Helps Minimize Global Variables It’s a good practice to eliminate any unnecessary global variables in your work because you might run into naming collisions with other JavaScript libraries you might be using that are relying on global variables. Also, whenever you can, you should use local variables because it’s faster to access compared to global variables. The single var pattern makes it more convenient to create local variables and serves as a constant reminder to watch out for accidental global variables. Single Var Pattern Downsides To get a well-balanced perspective, I recommend reading the following articles to learn about the disadvantages of the single var pattern; they have strong arguments that can help you make an informed decision. A Criticism of the Single Var Pattern in JavaScript Multiple var Statements in JavaScript Related Content 8 Ways to Add a Responsive Navigation Menu on Your Site A List of Free Public CDNs for Web Developers Getting Started with Meteor Free Programming Fonts About the Author Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions. The post The Single Var Pattern in JavaScript appeared first on Six Revisions.

You are subscribed to email updates from Six Revisions To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

1stwebdesigner

---

Shake up Your Dying Website Using These Free eCommerce WordPress Themes Posted: 25 Sep 2014 06:00 AM PDT 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 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? A customizable store header 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 The list option doesn't work. Sub-categories are overlapping. 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) 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 The support forum isn't super active. It can't add social media links/icons on the homepage. 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 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 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 The CSS stylesheet is missing. 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 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 Frontpage sidebar does not work. Not compatible with WooCommerce 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 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 Incomplete CSS functions 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 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 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 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 Users can't seem to locate and edit their sliders. 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 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 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 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 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 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 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 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 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 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 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 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.

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610