Webdevtuts » part 3 http://www.webdevtuts.net Making tutorials fun and easy! Mon, 23 Jan 2012 11:36:02 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Part 3: Create a beautiful contact form from scratch using Photoshop, HTML, CSS, and PHP http://www.webdevtuts.net/coding/part-3-create-a-beautiful-contact-form-from-scratch-using-photoshop-html-css-and-php/ http://www.webdevtuts.net/coding/part-3-create-a-beautiful-contact-form-from-scratch-using-photoshop-html-css-and-php/#comments Fri, 07 Jan 2011 06:03:40 +0000 Marcell Purham http://www.webdevtuts.net/?p=2212 Continue reading →]]> Welcome to part 3 of create a beautiful contact form from scratch series. In this series we’ve covered how to design a contact form in photoshop then convert our design to HTML and CSS. In part 3 of this tutorial we will be making our contact form work using PHP. So if you’ve followed part one of then tutorial and part 2 then you’re ready for part 3. Lets begin.

Adding to the HTML

So since we’ve already have our HTML completed from the last tutorial all we have to do in this tutorial is add some code.

Change the default html code from:

<form class="form">

to this. The code below tells the form that it is a post(Upload text) which means it can receive the message using text then the html file looks for the send.php file.

<form class="form" method="POST" action="send.php">

Adding The PHP

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {

$to = "youremail@yourdomain.com";
$subject = "Contact";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$website_field = $_POST['website'];
$message = $_POST['message'];

$body = "From: $name_field\n E-Mail: $email_field\n Website: $website_field\n  Message:\n $message";

echo "Your Message Has Been Sent!";
mail($to, $subject, $body);

} else {

echo "Something went wrong";

}
?>

Explaining the PHP

So if you’re wondering what the heck I did with the php or what it does then I will explain. So in the php file the first line says “if php request method is post ” then to output the information that we want to output such as the variables. I also defined the variables in the html file and finally echoed out the form data. Hope you learned something from this 3 part tutorial.

]]> http://www.webdevtuts.net/coding/part-3-create-a-beautiful-contact-form-from-scratch-using-photoshop-html-css-and-php/feed/ 12 PSD to WordPress Series Part 3: Final Tutorial http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-3-final-tutorial/ http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-3-final-tutorial/#comments Mon, 30 Nov 2009 22:19:57 +0000 Marcell Purham http://www.webdevtuts.net/?p=635 Continue reading →]]> I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress.(part3)

Download

Ok Were finally on the last step on how to transform a photoshop mockup into a working wordpress theme. For this tutorial you will need

1.Stalker Naked WordPress theme!-By Elliot Jay Stocks
2. Local Server to run wordpress xxamp
3. The html file fromPSD to wordpress part 2

Ok so now we will begin the final part to PSD to WordPress series. You should now have the stalkers wordpress downloaded and ready to use. Also before we begin make sure you have xxamp or a local server up and running so you can see changes we make to our wordpress theme.

Open up your primary code editor. I will used dreamweaver for this tutorial. If you do not have dreamweaver then you can download the free trial or use a free code editor like
notepad++ for windows and for Komondo for mac

Now inside the stalker folder you should have 15 PHP files but we will only use 7 of them. The reason we will only use 7 because most of the steps we will cover today can be used on other pages. So after this tutorial you should have and idea or clear vision on what to do for the other wordpress pages.

Note: You do not have to delete the ones we do not use

The files we will use/need for this tutorial are

  • archive.php
  • footer.php
  • header.php
  • index.php
  • page.php
  • sidebar.php
  • single.php

archive.php – The page that shows after you’ve click on a category name
header.php – for all JavaScript or Stylesheet imports
index.php Main/Home page
page.php Single page
sidebar.php sidebar
single.php after you click on a post its takes you to the single.php page

Since we’ve already coded the theme into xhtml/css we will just be copying and pasting a lot of things and changing some of our HTML markup into php functions.

Step 1

First thing is first. copy your entire style.css to your wordpress style.css

Note: Copy everything after Code start. Everything above that is the css reset and has to go into another style sheet
copy style

Step 2

Now lets place the css reset code into the right file. Click on the Style>>Css>>Reset.
delete reset wordpress

Delete everything in the reset file.
reset before

Now copy everything above code starts and place it into the wordpress reset file then save it.
reset after

You should have something like this so far
preview

Step 3

Now that our css and reset files is taken care of its time to get the ball rolling and get our wordpress theme looking good. Open up your index.html file (From part2 psd wordpress series) and header.php file. Copy the highlighted code into your header.php file.

copy code

<div id="header">

<div id="main_nav">
<ul>
<li><a href="http://www.webdevtuts.net">Home</a></li>
<?php wp_list_categories('title_li='); ?>
</ul>
</div><!--end main_nav-->

<div class="clear"></div>

<div id="logo"></div><!--end logo-->

</div><!--end header-->

<div class="clear"></div>

<div id="Container">

Step 4

Now open your index.php file.

First thing you should do is add

right below the header tag then close it right above the sidebar tag.
add wrap

This code below is our post section. We will substitute some XHTML markup into wordpress php functions

Below is the entire section for the post area (Just the normal HTML)
normal html

Below is the wordpress markup that we will be using
Wordpress html

Copy the code below into your index.php

<div class="post_break">
<div id="post_thumb"><img src="<?php echo get_post_meta($post->ID, 'Thumbnail',true) ?>" alt="Post Image" id="postbreakimg" /></div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div id="post_info"><p>Posted in <?php the_category(', ') ?> <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?></p></div>
<div id="post_text"><?php the_excerpt('Read the rest of this entry &raquo;'); ?></div>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="post_more">Read More</a>
</div><!--end post break-->

<div class="clear"></div>

Note: Below is information to help you better understand what I did and what changes I made.

So I will start off with the div class=”Post_break”. I used div class because there are multiple post, and when you have multiple things using the same styling then it is good to use class instead of id, plus it will keep your code valid.

For the image I kept the div id=”post_thumb but I changed the inside to

<img src="<?php echo get_post_meta($post->ID, 'Thumbnail',true) ?>" alt="Post Image" id="postbreakimg" />

The code above tells wordpress to grab the thumbnail image. Whenever you would create a new post you would insert the word Thumbnail into your custom fields and link to the direct image and there is where your image will appear.

For the second level heading(H2) I change the inside of the h2 tags to

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

For the post info section I changed the inside of the div to

<p>Posted in <?php the_category(', ') ?> <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?></p>

The code above basically tells wordpress to find out what category the post was written for then the date of publish and finally the author name that has written that post.

For div id=”post_text” I’ve added

<?php the_excerpt('Read the rest of this entry &raquo;'); ?>

which tells wordpress to get the short description of the post instead of the entire post

For the read more link I’ve added

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="post_more">Read More</a>

which tells wordpress that you would like to read more and it will take you to the single page.

Finally I ended the post section then cleared the floats.

The index.php page is finally completed in here is what your page should like.
preview 2

Step 5

Now that our header.php, index.php are completed we will now work on our sidebar.php page. Open your sidebar.php page.

Note: remember that most of the divs and markup codes are codes/tags I grab are from the original index.html file

Scroll down the index.html page until you see the sidebar tag. Copy div id=”sidebar” into your sidebar.php file. Add the code right below the php header tag
sidebar example

Now lets add our advertisement 125×125 into our wordpress layout.
sidebar layout

Copy the code below

<h2>Sponsors</h2>
<ul id="adverts">
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
</ul><!--adverts-->

<a class="side_more" href="">Advertise here</a>

<div class="clear"></div>

Note: Below is information to help you better understand what I did and what changes I made.

In the normal HTML I just linked the images to the image folder but with wordpress you have to use a custom php function which calls the images.

Now lets add the Flickr images to our theme. Copy the code below

<h2>Flickr</h2>
<ul id="flickr">
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
</ul><!--end flickr-->

The code above does the same thing as the ads. WordPress calls for the images. If you wanted to turn these images into live working images from your flickr account then the best thing to do is use a wordpress plugin.

You should now have something like this
preview3

Step 6

Now that are header.php, index.php, and sidebar.php are completed it is time to complete our single.php page. The single.php is very simple to complete.

All we have to do is add the main col tag after the header tag(Very first tag at the top) then delete this tag

<?php previous_post_link('&laquo; %link') ?> | <?php next_post_link('%link &raquo;') ?>

Code explanation

Finally lets add this code after the end tag of main col
bottom code

<?php get_sidebar(); ?>

Your single page should now look like this
preview 4

Step 7

Open your archive.php. For our archive page we will just be adding the main col tags and using the post code from index.php. Hope that made sense!
Below is the archive page untouched!
archive

Add the div id=”main_col” to the top of your archive.php page and place it right under the get header function. Then replace the post area code
with the post area code from your index.php file. Do not forget to close the main col div.
Archive Top

Here is an example of what your archive.php should actually look like.
archive example

step 8

Now we will work on the footer page Open your footer.php and copy the footer tag from the index.html into your footer.
footer tag

CONGRATULATION! You are now finish and should have your first wordpress theme completed. I did not go over some of the pages because what you’ve learn from this tutorial can be applied to other pages in wordpress. If you would like for me to create a screencast for part 3 please leave a comment letting me know and will create a screen cast for part 3. Hard work was put into this series and I truly hope it helped you beginners out there understand wordpress better. I did not go over the comment.php page but you can check this article from Darren Hoyt and it will teach you all about the comment.php page. Thanks for following this tutorial, if you have any question leave a comment and I will respond asap.

]]> http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-3-final-tutorial/feed/ 14