WordPress Premium Theme -WP Vineyard Premium WordPress Theme

WordPress Premium Theme -WP Vineyard Premium WordPress Theme

Vineyard - eCommerce WordPress Theme

Vineyard is a ecommerce wordpress theme. The specificly designed store pages will show off your products perfectly. It fully supports the cart66 plugin for a complete webshop experience. Packed with options, custom widgets and shortcodes, this theme will not dissapoint!

A) Code Structure

This is a wordpress theme, meaning every page loads other files into it. See this wordpress codex page for more info on all individual files: http://codex.wordpress.org/Theme_Development#Template_Files_List

When a page is called, the header, sidebar and footer are included automaticly. If you’ve included any widgets in the sidebar, these will be included in the sidebar as well.

This theme also includes a range of shortcodes. The php and html code for this can be found in includes/shortcodes.php, and the style can be found in style.css in the appropriate section.

Most css styles and javascript code are enqueued in the functions.php file. Enqueueing means that wordpress will load every file only once, thus making it compatible with correctly written plugins and widgets.

B) CSS Files and Structure

The first css file is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The main style for this theme can be found in style.css. If you want to change the look of certain elements, this is NOT the place though. I suggest you download a plugin for Firefox called Firebug, or use the Chrome “inspect element” feature. This will allow you to look at the html and css without leaving your browser. This way you can pinpoint what css you need to change and what id or class you need to search for. Your custom css can be placed in the custom.css file. This way we can update the theme without your custom css going to waste!

The variable colors in this theme are loaded in style.php. In this file all color settings from the theme settings will be converted to usable colors. In case of gradients, lighter of darker versions of the selected color will be calculated and pasted in normal css through php. Be carefull with editing this file, or your color theme setting might not be reflected properly in the theme.

The css files contains all of the specific stylings for the different pages. If the file is large enough, comments are added to different segments of the page:

 /* begin ---------- Header */

	some code

 /* end ---------- Header */

 /* begin ---------- Content */

	some code

 /* end ---------- Content */

	etc, etc.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Just remember: if you want to make changes to the css, make sure you overwrite the default css rules. To be very sure, you can add the custom css to the bottom of the file.

If you would like to edit the style, lets say the color, of any elements in one of these files, you would do the following:

	#primaryContent a {
		color: #someColor;

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.


	#wrap #primaryContent a {
		color: #someColor;

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

C) JavaScript

This theme imports a couple of Javascript files.

  1. jQuery
  2. jQuery slides.js
  3. jQuery custom scripts
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Slides.js is a jQuery script that is needed for the frontpage slider.
  3. Most of the animation in this site is carried out from the customs scripts. You can find them in the jquery.php file. Some of the theme settings are used in this file to either enable or disable certain functions, or to tweak their behavior. In short, this file:- Enables google analytics- Enables the submenu animation

    - Wraps a button element around all submit button so that they’re all styled the same way

    - Centers all images neatly both vertically and horizontally in an element if necessary

    - Enables the toggle shortcode effect

    - Enables the portfolio filter effect

    - Enables the fancybox plugin

D) PSD Files

I’ve included eight psds with this theme:

  1. The frontpage (frontpage.psd)
  2. The blog page (blogpage.psd)
  3. The blog post (blogpost.psd)
  4. The gallery (gallery.psd)
  5. The product page (productpage.psd)
  6. The shop page (shoppage.psd)
  7. The shoppingcart (shoppingcart.psd)
  8. The contact page (contact.psd)

If you’d like to change the looks of the theme, you can edit these files with programs like Adobe Photoshop. Just remember that the theme is almost entirely made out of html and css, and not images. This makes the theme fast, dynamic, and reduces server load. These files are included to experiment with the looks of theme, without having to change all the code.

E) Sources and Credits

I’ve used the following images, icons or other files as listed.

  • jQuery – http://jquery.com
  • slides.js – http://slidesjs.com/
  • Iconsweets2 – http://iconsweets2.com/

F) Installation

First of all, to use the The Vineyard WordPress theme, you need to install it on your server. In this tutorial we’ll cover how to do that.

Step 1: Browse to install page

Go to your wordpress admin (http://www.yourdomain.com/wp-admin) and go to the following page: Appearance / Themes / Install Themes

Step 2: Upload the .zip package

To install the theme, you need to upload it to your server.

Now choose ‘Upload’ at the top of the page. Here you can upload the .zip package.

CAUTION: Before your proceed make sure you unzipped the package you have bought from Themeforest.

Select the ‘thevineyard.zip’  file and press ‘Install Now’. Make sure you have the correct zip file, and not the whole package.

When it’s done press ‘Activate’ to set your newly acquired theme as your current theme.

Congratulations! You’ve installed the The Vineyard WordPress theme!

G) The Vineyard Tutorials

There are more settings to explore for this WordPress theme. Therefore we’ve made some tutorials for you, so you can easily fill up this theme! Please go to our Documentation section on the demosite!



Posts Related to WP – Vineyard – eCommerce WordPress Theme


Enhanced by Zemanta

Related External Links

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>