Wordpress E-Commerce Template or Plugin?

You will have to choose whether you like to use an E-Commerce Plugin or Template. Mostly every Online-Shop Plugin for Wordpress doesn’t behave the way you want it to behave. You will have to spend a lot of efforts in styling and customizing the Plugin. Templates on the other hand will provide a full-featured Layout and all the Templates you will need to start your own Wordpress E-Commerce Site within a few seconds.

Introducing WP-Shopified

WP-Shopified was started as a Project of WP-Themix and IWEBIX in 2010. From that time the team was working very hard to make WP-Shopified even better than every other Wordpress E-Commerce Solution available. Since today, WP-Shopified is available for purchase and download. WP-Shopified offers a very attractive, clean and modern Layout that will blow your customer’s mind.

Our Wordpress E-Commerce Template will transform your default Wordpress Installation into a real Online-Shop including Shopping Cart, Checkout, Dashboard and many more Features you will need to seriously do E-Commerce. Right below we provide a small excerpt of it’s Features:

Of course WP-Shopified offers a lot of additional Features – Please check our full Feature List for Details. If you want to seriously use Wordpress to offer Products or an Online-Shop you should definitely try WP-Shopified.

1. Adding a page template

Did you ever add a custom page template to one of your Wordpress Themes? No? It is really easy. The code below shows you how to do. We would advise you to copy your template’s page.php file and then copy the code from below and paste it in the content-div of your page.php copy. At the top of your file (name it contact.php f.e.) add the following (Before the get_header and everything else)

<br />
/*<br />
Template Name: Contact Form<br />
*/<br />

This code makes sure, that you can choose the page template, when adding a new page in your wordpress administration area. Now add the following code to your contact.php’s content-div:

</p>
<div class="contact">
<div id="node"></div>
<div id="success">Thank you for leaving a message.</div>
<form name="contact_form" id="contact_me"/>
        <label for="name">Your Name*</label></p>
<input type="text" name="name" value="" />
        <label for="company">Your Company</label></p>
<input type="text" name="company" value="" />
        <label for="telephone">Telephone Number</label></p>
<input type="text" name="telephone" value="" />
        <label for="mail">Your E-Mail*</label></p>
<input type="text" name="mail" value="" />
        <label for="message">Your Message*</label><br />
        <textarea name="message"></textarea></p>
<input type="submit" value="submit" />
    </form>
</div>
<p>

Allright! Now save your file and upload it to your wordpress-theme directory. After that, add a new page and choose “Contact Form” as your page template!

2. Adding the CSS to your syle.css

Now that we did the structuring, we need to style the html. To do so, copy the code from below and paste it in your theme’s style.css. Of course you can customize the whole CSS to adopt your theme’s look!

<br />
.contact {<br />
float: left;<br />
width: 100%;<br />
}<br />
.contact label {<br />
float: left;<br />
width: 150px;<br />
margin-bottom: 10px;<br />
clear: both;<br />
}</p>
<p>.contact input {<br />
float: left;<br />
width: 180px;<br />
border: 1px solid #CCC;<br />
padding: 3px;<br />
margin-bottom: 10px;<br />
}<br />
.contact textarea {<br />
float: left;<br />
width: 250px;<br />
height: 100px;<br />
border: 1px solid #CCC;<br />
}<br />
.contact #node {<br />
float: left;<br />
width: 360px;<br />
display: none;<br />
background-color: #CC5553;<br />
padding: 5px;<br />
color: #FFF;<br />
border: 1px solid #9B413F;<br />
margin-bottom: 10px;<br />
}<br />
.contact #success {<br />
float: left;<br />
width: 360px;<br />
background-color: #8ACC39;<br />
color: #FFF;<br />
padding: 5px;<br />
border: 1px solid #6DA32C;<br />
display: none;<br />
margin-bottom: 10px;<br />
}<br />
.contact input[type=submit] {<br />
float: left;<br />
width: auto;<br />
padding: 5px 20px;<br />
background-color: #FFF;<br />
border: 1px solid #CCC;<br />
text-align: center;<br />
margin-top: 10px;<br />
cursor: pointer;<br />
clear: both;<br />
margin-left: 150px;<br />
}<br />

3. Adding the Javascript/Ajax Function

Now we will have to add some jQuery Code to your theme, to make the contact form work! You will need to add the following code to a new file (we name it contact.js).

<br />
jQuery(document).ready(function($) {<br />
       jQuery("#contact_me").submit(function() {<br />
	var str = jQuery(this).serialize();<br />
	jQuery.ajax({<br />
	    type: "POST",<br />
	    url: "/wp-admin/admin-ajax.php",<br />
	    data: 'action=contact_form&'+str,<br />
	    success: function(msg) {<br />
		jQuery("#node").ajaxComplete(function(event, request, settings){<br />
                if(msg == 'sent') {<br />
                    jQuery(".contact #node").hide();<br />
		    jQuery(".contact #success").fadeIn("slow");<br />
                }<br />
                else {<br />
                    result = msg;<br />
                    jQuery(".contact #node").html(result);<br />
		    jQuery(".contact #node").fadeIn("slow");<br />
		}<br />
		});<br />
	    }<br />
	});<br />
	return false;<br />
    });<br />
});<br />

Now that we have the new file “contact.js”, upload it to your theme directory.

4. Handling the Ajax Post-Values

Now that we have the javascript, we will need to handle the values which are sent by the form. Now it’s a little tricky because we are using Wordpress-built-in Ajax function. Open up your theme’s functions.php (if doesn’t exist add a new file) and paste the following code:

<br />
add_action('init', 'add_contact_script');<br />
function add_contact_script() {<br />
    wp_register_script('contact', get_bloginfo('template_directory') . '/contact.js', array('jquery'), '1.0' );<br />
    wp_enqueue_script('contact');<br />
}<br />
function ajax_contact() {<br />
    if(!empty($_POST)) {<br />
	$name = $_POST['name'];<br />
	$company = $_POST['company'];<br />
	$telephone = $_POST['telephone'];<br />
	$mail = $_POST['mail'];<br />
	$admin_mail = get_bloginfo('admin_email');<br />
	$msg = $_POST['message'];<br />
	$error = "";<br />
	if(!$name) {<br />
	    $error .= "Please tell us your name<br/>";<br />
	}<br />
	if(!$mail) {<br />
	    $error .= "Please tell us your E-Mail address<br/>";<br />
	}<br />
	if(!$msg) {<br />
	    $error .= "Please add a message";<br />
	}<br />
	if(empty($error)) {<br />
	    $subject = "New contact form received";<br />
	    $message = "You've received a new contact form. \n\n<br />
			Name: ".$name."\n<br />
			Company: ".$company."\n<br />
			Telephone: ".$telephone."\n<br />
			Mail: ".$mail."\n<br />
			Message: ".$msg."\n";<br />
	    $mail = mail($admin_mail, $subject, $message,<br />
	    "From: ".$name." <".$mail.">rn"<br />
	    ."Reply-To: ".$mail."rn"<br />
	    ."X-Mailer: PHP/" . phpversion());<br />
	    if($mail) {<br />
		echo "sent";<br />
	    }<br />
	    die();<br />
	} else {<br />
	    echo $error;<br />
	    die();<br />
	}<br />
    }<br />
}<br />
add_action('wp_ajax_nopriv_contact_form', 'ajax_contact');<br />

Make sure that your theme has already included the jQuery Framework, otherwise it won’t work!

Now that you have all the files uploaded and updated you can have a look at your new contact page and try to write a new contact request. Hope this tutorial was helpful for you! Build your own jquery ajax contact form in Wordpress in just 4 steps!

After our last wordpress Theme (myMag) we will soon be releasing another free premium Wordpress Theme.
This Wordpress will be more blog focused in comparison with our other wordpress themes.

Have a look at a first Screenshot:

I hope you like the design. Leave a comment and tell us how you like the whole layout. This theme will for sure offer a lot of JQuery effects, such as tab-menu, drop-down, Flying Objects and many more!
Of course we will add some nice Page templates with 2 JQuery Slideshows, no-sidebar template and many more!
I know you would like to download it yet, but we are still working on layout. We think in about one month it will be ready for download!
Have fun and enjoy our Wordpress Themes!

Your WP-Themix Team

1. Customize the navbar-graphic. (You can download the PSD for the graphic at the bottom of the post). Within the PSD you can go to the layer styles of the form and customize the gradient overlay. Export the graphic and save as nav_bg.jpg

2. Open header.php in your favourite Editor. After Line 15 before the closing php tag add the following:

if($colour == yourcolour) {
$style = “yourcolour.css”;
}

On Line 21 add to this line:

<?php if($colour == green || $colour == orange || $colour == red || $colour == yourcolour) { ?>

3. Copy f.e. orange.css and rename it to “yourcolour.css”. Edit it with your favourite editor and adjust the color, and background-color CSS styles. Go to line 21 and adjust the folder where the new “nav_bg.jpg” is located (f.e. images/yourcolour/navbar_bg.jpg). If you were allready working with Photoshop you should easily find the hexadecimal codes (like #FF00FF). If you don’t know how to find those codes go to http://www.somacon.com/p142.php

4. Open functions.php and go to line 115. Add another value to the array. This is how the code could look with your new colour scheme:

“options” => array(“blue”, “green”, “orange”, “yourcolour”),

5. Save all the data and load it back to the server. Now go to myMag Options page and select your new Colour Scheme in the “Styling Settings” and save.

6. Have fun with your new custom build colour scheme!

Downloads: 1845 and counting

myMag by default comes with a nice custom Logo which you can see here:

Now you want your own pretty Logo? We’ve uploaded the PSD (Photoshop Layout) for you! You can easily open the file with Photoshop and customize the Text and so so on to your own needs

Downloads: 2065 and counting

Now start downloading and ask questions at our new Wordpress Themes Support Forum!

Your WP-Themix.org Team