Let's Know about Web Designing

Happy-deepavali.jpg

This is a tutorial on creating a PHP website template starting with HTML and CSS. We will start with the basics and you can also download the final product. Please remember that I am using very basic CSS styling in this example just for you to get the idea, and not so much to make it look pretty. The download will contain both the styled example as well as a complete blank template that you can use for your own starting point for any project personal or commercial. The demo files are released under GPL V2.

This tutorial assumes you have basic understanding of html and css. At the end of this tutorial you should have a basic understanding of using php and converting an html site to php.You can also download the demo files here.

The actual template will be created in 10 easy steps. I will then take it a step further to show you how to add variables to your template.

Setting up the File structure and Folders

Step One

Let’s start by creating a new folder. I have named this folder php_site

Inside of this folder we are now going to create two new files. One is index.html and the other file is going to be named style.css

Step Two

Now we are going to create two more folders inside of our main folder. The first folder is going to be named includes, and the second folder will be named variables.

We should now have a setup that looks like the following:

Step Three

Now, using your favorite html editor open the index.html file. We are going to to create a basic html website document. This is the code I am using:

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02
03 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04
05 <head>
06
07 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
08
09 <meta name="description" content="" />
10
11 <meta name="keywords" content="" />
12
13 <meta name="author" content="" />
14
15 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
16
17 <title>1stWebDesigner PHP Template</title>
18
19 </head>
20
21 <body>
22
23 <div id="wrapper">
24
25 <div id="header">
26
27 </div> <!-- end #header -->
28
29 <div id="nav">
30
31 </div> <!-- end #nav -->
32
33 <div id="content">
34
35 </div> <!-- end #content -->
36
37 <div id="sidebar">
38
39 </div> <!-- end #sidebar -->
40
41 <div id="footer">
42
43 </div> <!-- end #footer -->
44
45 </div> <!-- End #wrapper -->
46
47 </body>
48
49 </html>

Step Four

Now I am going to open up the style.css file and add the divs we will be using. I have added very basic styling so you can see the site and get the idea of what we are doing. Remember that you can use your own styling when creating your website to suit your needs.

This is the CSS I am adding to the stylesheet:

01 body {
02 background-color:#f1f1f1;
03 font-family: georgia,sans-serif;
04 color:#333;
05 margin:0;
06 padding:0;
07 }
08
09 #wrapper {
10 width:960px;
11 background-color:#f8f8f8;
12 margin:0 auto;
13 border-left:1px solid #ccc;
14 border-right:1px solid #ccc;
15 }
16
17 #header {
18 width:960px;
19 height:135px;
20 margin:0 auto;
21 margin-bottom:25px;
22 border-bottom:1px solid #ccc;
23 border-top:1px solid #ccc;
24 }
25
26 #header h2 {
27 padding:10px;
28 }
29
30 #nav {
31 width:960px;
32 height:40px;
33 border-bottom:1px solid #ccc;
34 }
35
36 #nav a {
37 display:inline;
38 padding:10px;
39 text-decoration:none;
40 background-color:#f1f1f1;
41 }
42
43 #nav a:hover {
44 background-color:#bababa;
45 height:80px;
46 }
47
48 #content {
49 width:675px;
50 float:left;
51 padding:10px;
52 }
53
54 #sidebar {
55 width:200px;
56 float:right;
57 margin-bottom:25px;
58 }
59
60 #sidebar a {
61 text-decoration:none;
62 }
63
64 #sidebar li {
65 list-style:none;
66 }
67
68 #footer {
69 clear:both;
70 width:960px;
71 height:135px;
72 border-top:1px solid #ccc;
73 }
74
75 #footer p {
76 padding:10px;
77 }

Step Five

Next we will create some more files that we will be using when we start converting our template to php.

Open up the folder we created inside of our main folder called variables. Next, create a blank file called variables.php

Then go into the other folder we created called includes and create the following files:

header.php
nav.php
sidebar.php
footer.php

Step Six

Now we will need to add some content to our index.html file. I have filled in the header area with an H2 tag for the website header title. I will also be adding the links in the nav area, as well as some text in the content area, sidebar, and footer. The final index.html file now looks like this:

001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
002
003 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
004
005 <head>
006
007 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
008
009 <meta name="description" content="" />
010
011 <meta name="keywords" content="" />
012
013 <meta name="author" content="" />
014
015 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
016
017 <title>1stWebDesigner PHP Template</title>
018
019 </head>
020
021 <body>
022
023 <div id="wrapper">
024
025 <div id="header">
026
027 <h2>1stWebDesigner PHP Template</h2>
028
029 </div> <!-- end #header -->
030
031 <div id="nav">
032
033 <a href="#">Home</a>
034 <a href="#">About</a>
035 <a href="#">Portfolio</a>
036 <a href="#">Contact</a>
037
038 </div> <!-- end #nav -->
039
040 <div id="content">
041
042 <h1>Heading1</h1>
043 <h2>Heading2</h2>
044 <h3>Heading3</h3>
045 <h4>Heading4</h4>
046 <h5>Heading5</h5>
047
048 <h3>Paragraph Element</h3>
049
050 <p>
051
052 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
053
054 </p>
055
056 <p>
057
058 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
059
060 </p>
061
062 <h3>Another Heading Starting Point</h3>
063
064 <p>
065
066 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
067
068 </p>
069
070 <p>
071
072 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
073
074 </p>
075
076 </div> <!-- end #content -->
077
078 <div id="sidebar">
079
080 <h3>Navigation</h3>
081 <li><a href="#">Home</a></li>
082 <li><a href="#">About Us</a></li>
083 <li><a href="#">Links</a></li>
084 <li><a href="#">Portfolio</a></li>
085 <li><a href="#">Contact</a></li>
086
087 <h3>Box Two</h3>
088 <li><a href="#">Link Here</a></li>
089 <li><a href="#">Link Here</a></li>
090 <li><a href="#">Link Here</a></li>
091 <li><a href="#">Link Here</a></li>
092 <li><a href="#">Link Here</a></li>
093
094 <h3>Box Three</h3>
095 <li><a href="#">Link Here</a></li>
096 <li><a href="#">Link Here</a></li>
097 <li><a href="#">Link Here</a></li>
098 <li><a href="#">Link Here</a></li>
099 <li><a href="#">Link Here</a></li>
100
101 </div> <!-- end #sidebar -->
102
103 <div id="footer">
104 <p>Copyright &copy 2010 <a href="http://www.1stwebdesigner.com">1stWebDesigner.com PHP Template</a></p>
105 </div> <!-- end #footer -->
106
107 </div> <!-- End #wrapper -->
108
109 </body>
110
111 </html>

Step Seven

Now we will start converting our template to PHP. We will need to take a brief look at the html code we have and decide which areas will be sliced. We will be removing specific areas from the index.html file and placing them into the php files we have created inside the includes folder.

Let’s start with the top of the html document on the header. Copy the header div and cut it from the document. Then open your includes folder, and the header.php file we created and add the code to the header.php

header.php

1 <div id="header">
2
3 <h2>1stWebDesigner PHP Template</h2>
4
5 </div> <!-- end #header -->

Make sure this area has now been removed completely from the index.html file and placed into the header.php file. In place of this code, we will now add the following to the index.html file.

1 <?php include('includes/header.php'); ?>

Now our index.html should look like this: (Make a note that the header area has now been replaced with our php include function that is calling our external header.php file)

001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
002
003 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
004
005 <head>
006
007 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
008
009 <meta name="description" content="" />
010
011 <meta name="keywords" content="" />
012
013 <meta name="author" content="" />
014
015 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
016
017 <title>1stWebDesigner PHP Template</title>
018
019 </head>
020
021 <body>
022
023 <div id="wrapper">
024
025 <?php include('includes/header.php'); ?>
026
027 <div id="nav">
028
029 <a href="#">Home</a>
030 <a href="#">About</a>
031 <a href="#">Portfolio</a>
032 <a href="#">Contact</a>
033
034 </div> <!-- end #nav -->
035
036 <div id="content">
037
038 <h1>Heading1</h1>
039 <h2>Heading2</h2>
040 <h3>Heading3</h3>
041 <h4>Heading4</h4>
042 <h5>Heading5</h5>
043
044 <h3>Paragraph Element</h3>
045
046 <p>
047
048 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
049
050 </p>
051
052 <p>
053
054 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
055
056 </p>
057
058 <h3>Another Heading Starting Point</h3>
059
060 <p>
061
062 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
063
064 </p>
065
066 <p>
067
068 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
069
070 </p>
071
072 </div> <!-- end #content -->
073
074 <div id="sidebar">
075
076 <h3>Navigation</h3>
077 <li><a href="#">Home</a></li>
078 <li><a href="#">About Us</a></li>
079 <li><a href="#">Links</a></li>
080 <li><a href="#">Portfolio</a></li>
081 <li><a href="#">Contact</a></li>
082
083 <h3>Box Two</h3>
084 <li><a href="#">Link Here</a></li>
085 <li><a href="#">Link Here</a></li>
086 <li><a href="#">Link Here</a></li>
087 <li><a href="#">Link Here</a></li>
088 <li><a href="#">Link Here</a></li>
089
090 <h3>Box Three</h3>
091 <li><a href="#">Link Here</a></li>
092 <li><a href="#">Link Here</a></li>
093 <li><a href="#">Link Here</a></li>
094 <li><a href="#">Link Here</a></li>
095 <li><a href="#">Link Here</a></li>
096
097 </div> <!-- end #sidebar -->
098
099 <div id="footer">
100 <p>Copyright &copy 2010 <a href="#">Website Name</a></p>
101 </div> <!-- end #footer -->
102
103 </div> <!-- End #wrapper -->
104
105 </body>
106
107 </html>

Step Eight

Now we will continue to slice the html document and place the code in the proper php files we made.

Next let’s move to the nav div. The same as above, we are going to copy and cut that piece of code and place it into our nav.php file that is located inside of the includes folder.

This is what we are adding to the nav.php file:

1 <div id="nav">
2
3 <a href="#">Home</a>
4 <a href="#">About</a>
5 <a href="#">Portfolio</a>
6 <a href="#">Contact</a>
7
8 </div> <!-- end #nav -->

Again we will replace the code removed from the html document with the following:

1 <?php include(includes/nav.php); ?>

Now our index.html document will look like this: (Again note that both the header, and the nav area are now replaced with php includes)

001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
002
003 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
004
005 <head>
006
007 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
008
009 <meta name="description" content="" />
010
011 <meta name="keywords" content="" />
012
013 <meta name="author" content="" />
014
015 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
016
017 <title>1stWebDesigner PHP Template</title>
018
019 </head>
020
021 <body>
022
023 <div id="wrapper">
024
025 <?php include('includes/header.php'); ?>
026
027 <?php include('includes/nav.php'); ?>
028
029 <div id="content">
030
031 <h1>Heading1</h1>
032 <h2>Heading2</h2>
033 <h3>Heading3</h3>
034 <h4>Heading4</h4>
035 <h5>Heading5</h5>
036
037 <h3>Paragraph Element</h3>
038
039 <p>
040
041 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
042
043 </p>
044
045 <p>
046
047 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
048
049 </p>
050
051 <h3>Another Heading Starting Point</h3>
052
053 <p>
054
055 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
056
057 </p>
058
059 <p>
060
061 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
062
063 </p>
064
065 </div> <!-- end #content -->
066
067 <div id="sidebar">
068
069 <h3>Navigation</h3>
070 <li><a href="#">Home</a></li>
071 <li><a href="#">About Us</a></li>
072 <li><a href="#">Links</a></li>
073 <li><a href="#">Portfolio</a></li>
074 <li><a href="#">Contact</a></li>
075
076 <h3>Box Two</h3>
077 <li><a href="#">Link Here</a></li>
078 <li><a href="#">Link Here</a></li>
079 <li><a href="#">Link Here</a></li>
080 <li><a href="#">Link Here</a></li>
081 <li><a href="#">Link Here</a></li>
082
083 <h3>Box Three</h3>
084 <li><a href="#">Link Here</a></li>
085 <li><a href="#">Link Here</a></li>
086 <li><a href="#">Link Here</a></li>
087 <li><a href="#">Link Here</a></li>
088 <li><a href="#">Link Here</a></li>
089
090 </div> <!-- end #sidebar -->
091
092 <div id="footer">
093 <p>Copyright &copy 2010 <a href="#">Website Name</a></p>
094 </div> <!-- end #footer -->
095
096 </div> <!-- End #wrapper -->
097
098 </body>
099
100 </html>

Step Nine

Now it is time to do the sidebar. Copy and cut the sidebar div and place it into the sidebar.php file we created that is located inside the includes folder.

This is the code we are adding:

sidebar.php

01 <div id="sidebar">
02
03 <h3>Navigation</h3>
04 <li><a href="#">Home</a></li>
05 <li><a href="#">About Us</a></li>
06 <li><a href="#">Links</a></li>
07 <li><a href="#">Portfolio</a></li>
08 <li><a href="#">Contact</a></li>
09
10 <h3>Box Two</h3>
11 <li><a href="#">Link Here</a></li>
12 <li><a href="#">Link Here</a></li>
13 <li><a href="#">Link Here</a></li>
14 <li><a href="#">Link Here</a></li>
15 <li><a href="#">Link Here</a></li>
16
17 <h3>Box Three</h3>
18 <li><a href="#">Link Here</a></li>
19 <li><a href="#">Link Here</a></li>
20 <li><a href="#">Link Here</a></li>
21 <li><a href="#">Link Here</a></li>
22 <li><a href="#">Link Here</a></li>
23
24 </div> <!-- end #sidebar -->

We will again do the same thing for the footer area. Copy and cut the footer div and place it into the footer.php file we created in the same includes folder.

Here is the footer.php code:

1 <div id="footer">
2 <p>Copyright &copy 2010 <a href="#">Website Name</a></p>
3 </div> <!-- end #footer -->

Now with all of our elements taken from the index.html file and added to the different php files, the final index.html should look like this:

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02
03 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04
05 <head>
06
07 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
08
09 <meta name="description" content="" />
10
11 <meta name="keywords" content="" />
12
13 <meta name="author" content="" />
14
15 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
16
17 <title>1stWebDesigner PHP Template</title>
18
19 </head>
20
21 <body>
22
23 <div id="wrapper">
24
25 <?php include('includes/header.php'); ?>
26
27 <?php include('includes/nav.php'); ?>
28
29 <div id="content">
30
31 <h1>Heading1</h1>
32 <h2>Heading2</h2>
33 <h3>Heading3</h3>
34 <h4>Heading4</h4>
35 <h5>Heading5</h5>
36
37 <h3>Paragraph Element</h3>
38
39 <p>
40
41 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
42
43 </p>
44
45 <p>
46
47 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
48
49 </p>
50
51 <h3>Another Heading Starting Point</h3>
52
53 <p>
54
55 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
56
57 </p>
58
59 <p>
60
61 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
62
63 </p>
64
65 </div> <!-- end #content -->
66
67 <?php include('includes/sidebar.php'); ?>
68
69 <?php include('includes/footer.php'); ?>
70
71 </div> <!-- End #wrapper -->
72
73 </body>
74
75 </html>

Step Ten

Now that our index.html is properly sliced, we can rename the index.html file to index.php

Now that we have created this template, as long as the php includes are on any page we only have to modify the one single file to make it visible accross your entire website. This again is good for anyone with a lot of content and pages. Instead of having to edit the sidebar on every page of your site you can now just edit the sidebar.php file and it will reflect on all of your pages. This makes it a lot easier to keep up with large portions of website material.

Our folder should now look like this:

Creating PHP Variables for the template

Now we will make it a little more dynamic and even easier to be able to modify when needed. Lets take a look at the header.php file inside the includes folder.

1 <div id="header">
2
3 <h2>1stWebDesigner PHP Template</h2>
4
5 </div> <!-- end #header -->

We are going to modify this a little bit to change the H2 heading from a different file using a variable. Creating a variable is good for areas on your website that may change more than others. It may also be a good way to allow clients to edit a single file to change certain items on their website.

Now let’s replace the text within the H2 heading to this:

1 <h2><?php echo $heading ?></h2>

Now our header.php file will look like this: Notice we placed the echo php command within the H2 brackets. This will give our variable output the H2 heading we want.

1 <div id="header">
2
3 <h2><?php echo $heading ?></h2>
4
5 </div> <!-- end #header -->

Next we are going to open up the file inside of the variables folder that we created named variables.php

We will add the variable that we are going to echo on the website heading. I have named this variable heading.

variables.php

1 <?php
2
3 $heading='1stWebDesigner PHP Template';
4
5 ?>

Now, at any time we want to change what is titled on the heading of our template, we can simply open our variables.php file and modify what is between the quotes. This will always be the output on our header.php file where we placed the echo command.

One step Further

Now we will do the same thing to our footer.php file. Open the footer.php that we have in our includes folder and let’s take a look at it:

1 <div id="footer">
2 <p>Copyright &copy 2010 <a href="#">Website Name</a></p>
3 </div> <!-- end #footer -->

Let’s change this like we did the header file, and add a variable to use.

We will place our echo command within the paragraph brackets. You should now have the following in your footer.php:

1 <div id="footer">
2 <p><?php echo $footer ?></p>
3 </div> <!-- end #footer -->

And again we will visit our variables.php file located in the variables folder we made and we will now update it with our new variable. The final should now look like this:

variables.php

1 <?php
2
3 $heading='1stWebDesigner PHP Template';
4
5 $footer='Copyright &copy; 2010 1stWebDesigner PHP Template';
6
7 ?>

Make note of the above. When using PHP variables we cannot use a regular quote. They should be replaced as you see above directly after the a href=

This is to ensure the code is read properly by browsers. If you use a regular quote it will not work.

Making it all work

The last thing we need to do in order to make our variables work is to do one last php include within our template to call the variables file.

Let’s open up our header.php file and add the following:

1 <?php include('variables/variables.php'); ?>

This will tell our template to use the variables file we have created.

The header.php file should now look like this:

1 <?php include('variables/variables.php'); ?>
2
3 <div id="header">
4
5 <h2><?php echo $heading ?></h2>
6
7 </div> <!-- end #header -->

Next we will need to do the same to our footer.php file. Add the same include at the top. The footer.php should now look like this:

1 <?php include('variables/variables.php'); ?>
2
3 <div id="footer">
4 <p><?php echo $footer ?></p>
5 </div> <!-- end #footer -->

Now that these two files are calling the variables, you will see the reflected results in the final template. You can always create new variables, and create any type of php files you want. You can even change the folder directory in any way you wish as long as your php include function displays the correct path to the files.

Playing with the PHP template

To test it a bit further let’s duplicate the index.html file and make a second page that will also call the external php files. This way we will be able to see more exactly how this works.

Make a copy of your index.php file and rename the new file to about.php

Inside of this file you can change anything you want within the #content div inside of the website #wrapper

I have created the following for testing purposes:

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02
03 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04
05 <head>
06
07 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
08
09 <meta name="description" content="" />
10
11 <meta name="keywords" content="" />
12
13 <meta name="author" content="" />
14
15 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
16
17 <title>1stWebDesigner PHP Template About Page</title>
18
19 </head>
20
21 <body>
22
23 <div id="wrapper">
24
25 <?php include('includes/header.php'); ?>
26
27 <?php include('includes/nav.php'); ?>
28
29 <div id="content">
30
31 <h3>About Me Page</h3>
32
33 <p>
34
35 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
36
37 </p>
38
39 <p>
40
41 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
42
43 </p>
44
45 <h3>Another Heading Starting Point</h3>
46
47 <p>
48
49 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
50
51 </p>
52
53 <p>
54
55 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
56
57 </p>
58
59 <h3>Notice The Include Files</h3>
60
61 <p>
62
63 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
64
65 </p>
66
67 <h3>Another Heading Starting Point</h3>
68
69 <p>
70
71 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
72
73 </p>
74
75 <p>
76
77 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
78
79 </p>
80
81 </div> <!-- end #content -->
82
83 <?php include('includes/sidebar.php'); ?>
84
85 <?php include('includes/footer.php'); ?>
86
87 </div> <!-- End #wrapper -->
88
89 </body>
90
91 </html>

Now make sure that we go inside of our nav.php file as well as the sidebar.php file and link the new page we have just created. Again using your html editor of choice, first open up your nav.php file.

Updating the links should make your file now look like this example below:

nav.php

1 <div id="nav">
2
3 <a href="index.php">Home</a>
4 <a href="about.php">About</a>
5 <a href="#">Portfolio</a>
6 <a href="#">Contact</a>
7
8 </div> <!-- end #nav -->

Next we will need to do the same thing to our sidebar.php file to make sure the links now work.

sidebar.php

01 <div id="sidebar">
02
03 <h3>Navigation</h3>
04 <li><a href="index.php">Home</a></li>
05 <li><a href="about.php">About Us</a></li>
06 <li><a href="#">Links</a></li>
07 <li><a href="#">Portfolio</a></li>
08 <li><a href="#">Contact</a></li>
09
10 <h3>Box Two</h3>
11 <li><a href="#">Link Here</a></li>
12 <li><a href="#">Link Here</a></li>
13 <li><a href="#">Link Here</a></li>
14 <li><a href="#">Link Here</a></li>
15 <li><a href="#">Link Here</a></li>
16
17 <h3>Box Three</h3>
18 <li><a href="#">Link Here</a></li>
19 <li><a href="#">Link Here</a></li>
20 <li><a href="#">Link Here</a></li>
21 <li><a href="#">Link Here</a></li>
22 <li><a href="#">Link Here</a></li>
23
24 </div> <!-- end #sidebar -->

Now we are complete. We have created a two page PHP website template that we can expand on more to make a completed project. We have learned how to use basic php includes and variables to be able to edit content accross many different pages at one time. I really hope you have enjoyed this post and learned something from it as well.

Just to take a final look at the new file structure with the added page you can view the image below for reference:

This tutorial was created to give you some basic knowledge on php and creating a php website template.

If you have any questions I will do my best to answer them in the comments below.

Preview-icons-for-minimal-style-web-designsAll clever things are usually very simple. Sometimes you just want to stay with the old valuables and keep it subtle. These icons will look great with clean and minimal web designs and also notice since almost all of them are monochromatic you can put different colors, create your own letterpress and different effects without spending time to create your own actual icon.

I think minimal and letterpress effects currently are very popular in webdesigns and many designers will find this collection useful and worth bookmarking!

1. Free Minimal Icon Set

Editable PSD file with Illustrator vectors.

Free-set-icons-for-minimal-style-web-designs

2. Mini Icons

Free icon set from http://www.famfamfam.com/. 16×16 GIF.

Famfamfam-mini-icons-for-minimal-style-web-designs

3. Mono Icons

108 gray 32×32 PNG icons. You can customize the color. Also free for commercial use.

Mono-icons-for-minimal-style-web-designs

4. Iconic

Iconic is a minimal set of icons consisting of 114 marks in raster and vector formats. 5 different sizes up to 32×32, nice flexibility. Creative Commons 3.0 license.

Iconic-icons-for-minimal-style-web-designs

5. Pictodeck

Pictodeck is a set of over 700 pictograms in vector format designed specifically for Keynote. That means you can scale them to any size you desire without any loss in quality. All of the icons also support transparency. The set was created by Aaron Richard. All are licensed slightly differently under Creative Commons.

Pictodeck-icons-for-minimal-style-web-designs

6. Ecqlipse 2

100+ icons in various resolution up to 128×128. Also available as .ico.

Ecqlipse-2-icons-for-minimal-style-web-designs

7. Letter Pressed Icons

collection of over a 100 letter pressed icons, in various letter pressed styles. The icons include three PSD files which are full of icons which you can drag and drop into your designs. Creative Commons license.

Letter-pressed-icons-for-minimal-style-web-designs

8. Kostenlose Icons

9 GIF icon sets. Creative Commons license.

Kostenlose-icons-for-minimal-style-web-designs

9. Token

128 icons in light and dark versions. Available as 128×128 PNG or ICO up to 256×256.

Token-icons-for-minimal-style-web-designs

10. Eusmis

99 16×16 ICO files.

Eusmis-icons-for-minimal-style-web-designs

11. Pictoico

100 fully scalable pictograms/icons. Comes as a AI, SVG, XAR.

Pictoico-icons-for-minimal-style-web-designs

12. Social Media Icon Pack

22 500×500 PNGs. Free to use in commercial and personal works.

Social-icons-for-minimal-style-web-designs

13. Wireframe Mono

244 (8 cursors) icons optimized for 16×16, 32×32, 48×48. Available as PNG, ICO, GIF. Creative Commons Attribution-NonCommercial license is free.

Wireframe-mono-icons-for-minimal-style-web-designs

14. Picol

Massive set of about 500 icons. Available as 16×16, 32×32 PNG or SVG.

Picol-icons-for-minimal-style-web-designs

15. DOT Pictograms

68 free icons up to 256×256 PNG.

Dot-pictograms-icons-for-minimal-style-web-designs

16. Snow Icon Pack

102 royalty free website & GUI icons that can be used for both personal and commercial purposes. Royalty free license. TIFF, ICNS, ICO, ICON, PNG. 32×32

Snow-pack-icons-for-minimal-style-web-designs

17. UIDesign Icon Pack

51 free icons. PNG, ICO, ICNS. Designed by Alexey Egorov.

Ui-design-icons-for-minimal-style-web-designs

18. Pixeley

30 16×16 icons. PNG, ICO, ICNS. Created by el73.be

Pixeley-icons-for-minimal-style-web-designs

19. Mini Pixel Icons

320 icons available in various color themes. 14×14 GIF.

Mini-pixel-icons-for-minimal-style-web-designs

20. Pixelated

21 icon in light and dark version. Transparent GIFs.

Pixelated-icons-for-minimal-style-web-designs

21. 165 Lovely Free Vector Icons

AI, SVG, JPEG.

Lovely-free-vector-icons-for-minimal-style-web-designs

22. 135 Free Vector Icons

AI files.

Free-vector-icons-for-minimal-style-web-designs

23. Mini Icons

113 10×10 GIFs. Creative Commons Attribution-ShareAlike license.

Mini-icons-for-minimal-style-web-designs

24. Doctype Icons

42 16×16 GIFs

Doctypes-icons-for-minimal-style-web-designs

25. BWPX.ICNS

A free set of over 250 18×18 pixel icons. Each icon was carefully created one pixel at a time using only whole value hexadecimal shades of grey. Creative Commons license.

Bwpx-icns-icons-for-minimal-style-web-designs

26. Splashy Fish Icons

450+ 16×16 PNG icons.

Splashy-fish-icons-for-minimal-style-web-designs

27. Hand Pointer Icons

36 icons, 6 different types, 6 color variants.

Hand-pointer-icons-for-minimal-style-web-designs

28. Silk Companion

450+ 16×16 PNG icons.

Silk-compilation-icons-for-minimal-style-web-designs

29. Symbol Signs collection

Available in OpenType font format.

Symbol-signs-collection-icons-for-minimal-style-web-designs

30. Diagona Icons

200 PNG icons. 10×10, 16×16.

Diagona-icons-for-minimal-style-web-designs

31. 30 Free Vector Icons

Icons with apple touch. PSD file.

Free-vector-2-icons-for-minimal-style-web-designs

Do you know some more free minimal icon sets? Let us know!

Print design is everywhere around us. You can see it everyday on newspapers, advertisements, brochures, business cards, T-shirt designs, posters. But you need some skills to create good looking, catchy print design and usually it’s not an easy task.

In this article you’re going to find some useful tutorials working with print products on Photoshop, Illustrator, InDesign, Acrobat Reader – print designing will not cause any more pain for you!

1. Design a Ready to Print Brochure in Photoshop

In this tutorial you’re going to learn how to create a ready to print three-fold brochure from scratch using only Photoshop. This tutorial is ideal for beginners and for people who want to know more about print design.

Ready-brochure-in-photoshop-print-design-tutorials

2. Making a Print-Ready Business Card Using Only Photoshop

In this tutorial, we are going to design up a simple business card in Photoshop and get it ready for print with crop marks and bleed.

Making-ready-business-card-using-only-photoshop-print-design-tutorials

3. How to Design a Print-Ready Flier with Photoshop and Illustrator

In this tutorial we are going to create 3D text and integrate it in a natural environment. We will not use any 3D programs, so all you need is Adobe Illustrator and Photoshop to create this effect.

How-to-design-ready-flier-with-photoshop-illustrator-print-design-tutorials

4. Create a Fun Print-Ready Doodled Business Card Design

In this tutorial you’re going to create unique doodle and sketch business card design. You’ll be drawing our doodles directly in Illustrator, and using the application’s print abilities to set up your business card document with the correct margins and bleed to build a complete print-ready PDF document.

Create-fun-ready-doodled-business-card-print-design-tutorials

5. Business Card Design Project Walkthrough

You’re going to look look back at Chris process for creating the final concept of James Clarksons business card, resulting in the finished printed product.

Business-card-project-walkthrough-print-design-tutorials

6. Design a Print-Ready Beer Label in Adobe Illustrator

This tutorial takes you from setup to production of a really cool beer label, although this could be useful for any bottled concoction of your choosing.

Ready-beer-label-in-adobe-illustrator-print-design-tutorials

7. Design a Print-ready Ad in Adobe InDesign

Want to learn how to make an ad that could go into a magazine? This tutorial is perfect for you if you’re familiar with Adobe Illustrator and want to get started with a layout program suited toward publication design.

Ready-ad-in-adobe-indesign -print-design-tutorials

8. Create and Print a Brochure with Photoshop, Indesign and UPrinting.com

This is a 2 part complete walktrough teaching you complete process of designing a simple brochure, getting it ready for print and then actually uploading it to a commercial online printer, checking the proof and seeing the finished product.

Create-brochure-with-photoshop-indesign-uprinting-print-design-tutorials

9. Make a Print Ready Easter Greeting Card from Scratch

This ir really simple tutorial, which will help you create nice, simple greeting card for friends or family.

Make-ready-easter-greeting-card from  Scratch-print-design-tutorials

10. Design Slick Print Ready Business Card Using Photoshop

In this tutorial you’re going to see how to design your own double sided business card in Photoshop and get it ready for print.

Slick-ready-business-card-using-photoshop-print-design-tutorials

11. Create a Grunge Print-Ready Business Card

In this tutorial you’re going to be guided through the process of creating a grunge print-ready business card using Photoshop. You’re also going to find some information on how should a good business card look like.

Create-grunget-ready-business-card-print-design-tutorials

12. How To Create Old Grunge Style Print Ready Business Card

This tutorial will guide you and help you to create a cool old grunged business card in photoshop which is fully print ready with full bleed.

How-to-create-old-grunge-style-ready-business-card-print-design-tutorials

13. How to Make a Great Print Ready Business Card in Photoshop

In this tutorial you will learn how to get your business card print ready with crop marks and bleed.

How-to-make-great-ready-business-card-in-photoshop-print-design-tutorials

14. Creative Brochure Design Tutorial in Adobe Photoshop

Learn how to create simple 2 page brochure for technology and design company.

Creative-brochure-in-adobe-photoshop-print-design-tutorials

15. Create a Business Card in Illustrator and Print it with UPrinting

In this tutorial we’ll take the Rockable Press brand tutorials and apply it to create and print business cards with UPrinting.

Create-business-card-in-illustrator-it-with-uprinting  -print-design-tutorials

16. Design a Print Ready Business Card for Designers

Follow this walkthrough in Adobe Photoshop, Adobe Illustrator and Adobe InDesign to create your own double sided business card design, resulting in a print-ready file to send to your favoured print firm.

Ready-business-card-for-designers-print-design-tutorials

17. Create a Five-color Magazine Cover using a Spot Metallic

This as an advanced tutorial where first you’ll be exporting InDesgn template in Photoshop and then creating the print with CMYK and spot metalic color layer.

Create-five-color-magazine-cover-using-spot-metallic-print-design-tutorials

18. Create a Grid Based Resume/CV Layout in InDesign

Use the power of grid based designs to create a structured and professional page layout in InDesign, which can then be populated with a range of information to produce a polished CV or Resume.

Create-grid-based-resume-cv-layout-in-indesign-print-design-tutorials

19. How to Design an Abstract Business Card in Photoshop

In this tutorial you will see how to design an abstract business card using a combination of Adobe Illustrator and Photoshop. You will be using Photoshop as a base for our business card, all whilst using Illustrator to create some clean, abstract shapes to use in our abstract business cards.

How-to-abstract-business-card-in-photoshop-print-design-tutorials

20. Creating a Colorful Vibrant Business Card

Design a vibrant business card for designer. You have already been given a template with bleed lines.

Creating-colorful-vibrant-business-card-print-design-tutorials

21. How To Create Print Ready Standard Size Business Cards

In this tutorial you’re going to be creating a simple and easy, not hard to follow business card design. You’re also goig to find out what are bleeds and what to take in account designing a business card.

How-to-create-ready-standard-size-business-cards-print-design-tutorials

22. Designing for Print – Setting Up Crops and Bleed

Learn how to set up crops and bleeds for any kind of print works.

Designing-for-setting-up-crops-bleed-print-design-tutorials

23. What Makes a Good Business Card?

This isn’t a tutorial, but if you’re creating a business card with intension to really use it, you should consider reading this article by David Airey.

What-makes-good-business-card-print-design-tutorials

24. Create and Then Shatter a Grid, while Making a Typographic Poster

Break the grid to create a dynamic and exciting layout. So grab the usual tools of the trade, Photoshop and Illustrator, and follow tutorials steps into creating your own solution.

Create-then-shatter-grid-while-making-typographic-poster-print-design-tutorials

25. Design a 6 Panel CD Package Tutorial

In this tutorial the artist will talk you through his workflow and decision-making process rather than focus too much on specific graphical techniques and he’ll also explain how to use printers’ templates to make sure your design comes up to their specs.

6-six-panel-cd-package-print-design-tutorials

26. How To Design A Movie Poster – With An Example

This is very detailed tutorial teaching you how to research materials for your project, creating various outcomes and the message your poster should send.

How-to-movie-poster-with-examplel-print-design-tutorials

27. How to Create a Retro Boxing Poster in Photoshop

You’ll be drawing inspiration from Poster Design from the 1960s, particularly Boxing Posters from that era. You’ll learn some things to keep an eye out for when mimicking graphic design from any decades past.

How-to-create-retro-boxing-poster-in-photoshop-print-design-tutorials

28. Magazine Cover Design in InDesign

In this tutorial, we’ll not only take you through the process of creating a cover, but also reveal techniques that designers use to make their covers stand out.

Magazine-cover-in-indesign-print-design-tutorials

29. Create Numbered Tickets the Easy Way in InDesign

In this tutorial, we’ll explain how to do an easy setup in InDesign for automatically numbered tickets. We will look at the handy “Data Merge Tool,” which is a great time-saver.

Create-numbered-tickets-easy-way-in-indesign-print-design-tutorials

30. How to Create a Music Magazine Cover in InDesign

In this tutorial, we’ll look at how to create a magazine cover in InDesign. You’ll learn how to set up a page layout and add text. This is an introduction to InDesign and no previous knowledge is required.

How-to-create-music-magazine-cover-in-indesign-print-design-tutorials

31. Publishing a Multiple Paged PDF Document Using Illustrator

One of Illustrator’s lesser-known functions is it’s ability to produce and publish multiple paged documents in PDF format. This tutorial will explain how it’s done, while discussing some grid layout theory to produce an Annual Report.

Publishing-multiple-paged-pdf-document-using-illustrator  -print-design-tutorials

32. Getting Illustrator files Print Ready

Quick check list to do before getting file ready for printing.

Getting-illustrator-files-ready-print-design-tutorials

33. How to Create a Coupon in InDesign

In this tutorial, we’ll explain how to create a coupon, double-sided in InDesign. This is a beginner level tutorial and by no means meant for print. It gives you a small intro into tabs, style sheets and glyphs.

How-to-create-coupon-in-indesign-print-design-tutorials

34. Create an Adobe Illustrator Template for a Tri-Fold Brochure

This tutorial will help you understand how to set crops and bleed for tri-fold brochure. You can also download template.

Create-adobe-illustrator-template-for-tri-fold-brochure-print-design-tutorials

35. Design Artworks for Screen-Printing

In this tutorial you’ll learn how to colour up a four-colour design for screen-printing using Photoshop and Illustrator.

Artworks-for-screen-printing-print-design-tutorials

WordPress is one among the popular weblog publishing platforms available on the web. There are millions of blogs based on WordPress.

Search engines are the best way to promote, publicize and help people discover your content. Thus, it is very important to optimize your blog or web site so that search engines can discover your content and understand how relevant it is to specific search queries.

WordPress, in addition to providing you with the state-of-the-art publishing platform, also provides plethora of plugins for Search Engine Optimization(SEO). Some plugins are really effective whereas some are not. To help you find the right plugin for your web site, we have composed some of the best SEO plugins.

1. All in one SEO Pack

One among the most popular and widely discussed plugins for WordPress. This plugin is easy to use and is compatible with most WordPress plugins. It works as an overall SEO plugin – automatically generating META tags and optimizes your titles for search engines and helps you in avoiding duplicate content. This plugin also enables you to manually include META tags (title, description and keywords) for each page and post in your web site.

2. HeadSpace2

A powerful all-in-one plugin to manage meta-data and handle a wide range of SEO tasks. It allows you to tag your posts, create custom titles and descriptions, thereby improves your page ranking and relevance on search engines. You can also change the theme or load plugins on specific pages and much more. This plugin is available in multiple languages.
headspace-2-page-settings

3. Platinum SEO plugin

An all-in-one SEO plugin with a host of features like automatic 301 redirects for permalink changes, auto generation of META tags, avoid duplicate content, SEO optimized post and page titles and a whole lot of other features.
platinum-seo-options-page

4. TGFI.net SEO WordPress Plugin

This plugin is a fairly modified version of the all-in-one SEO Pack. The unique feature of this plugin is that, it’s directed at people who use WordPress as a CMS. It can auto generate titles, descriptions and keywords when overrides are not present and also avoids duplicate content.

5. Google XML Sitemaps

Generates an XML sitemap supported by Google, Bing, Yahoo and Ask. Sitemaps make it much easier for crawlers to see the complete structure of your web site and retrieve more efficiently. It also notifies all major search engines every time you create a new post. You can either choose to write a normal XML file or a zipped file. In case of any errors, you can rebuild the sitemap manually. As a remark, Pingomatic can be used to ping your blog to multiple search engines and other specialized services.
google-xml-sitemap-generator

6. Sitemap Generator

Creates a highly customizable sitemap for your WordPress powered web site. It enables you to choose what to show and what not to including – what order to list the items in. It supports multi-level categories, pages and permalinks.
dd-sitemap-generator

7. SEO Slugs

Slugs are long filenames assigned to your posts. Ex: http://yourblog.com/what-you-can-do-immediately-for-higher-rankings. This plugin removes common words like ‘a’, ‘the’,’in’,’what’,’you’ etc. from the automatically assigned post slug to make it more Search Engine friendly.

8. SEO Post Links

This plugin works similar to SEO slugs. It shortens the post slug and retains only the necessary keywords making it Search Engine friendly. It allows you to choose the longest number of characters in your post slug and also remove unnecessary words.
seo-post-link-options

9. Automatic SEO links

Just choose a word or a phrase for automatic linking and this plugin will replace all matches in the posts of your weblog. It allows you to set the title, target and rel. for each link. You can also set the anchor text and choose if it should be no-follow or not. If there are repeated words, only the first matched word in the post will be replaced.

automatic-seo-links-new-link

10. SEO Smart links

Automatically links keywords and phrases on your blog with corresponding posts, pages, categories or tags on your blog. It allows you to set up your own keywords and a list of matching URLs and also set the no-follow attribute. You can customize it according to your needs through the Administration Settings Panel.

seo-smart-links-options-page

11. WP Backlinks

This plugin helps in making the task of link exchange very simple. Once installed, it puts a small form on the sidebar of your blog that allows webmasters and other bloggers to quickly submit a link for link exchange. The plugin will spider the webmasters site for a reciprocal link and if everything is successful you will have made a successful link exchange. It also has the option of displaying different links on different pages.

12. SEO Title Tag

SEO Title Tag makes it easy to optimize the title tags across your WordPress powered blog. It allows you to override a page’s title tag with a custom one, mass editing of title tags, title tags for 404 error pages and much more.
seo-title-tag-options

13. 404 SEO plugin

Gives you a smart, customized ‘Page Not Found(404)’ error message and automatically displays links to relevant pages on your site, based on the words in the URL that was not found.

14. Redirection

This plugin helps you to manage 301 redirections, to keep track of 404 errors and also correct them. It also allows you to monitor your redirects by giving you full logs of all redirected URLs and also RSS feed for 404 errors. Automatically adds a redirection when a posts URL changes.
redirection-plugin

15. Simple Submit SEO/Social Bookmarking Plugin

This plugin adds submission links for Digg, Delicious, Buzz, and Stumble to pages and posts. It allows you to choose whether to display it on home page, post page, all pages etc.

16. AntiSocial

Adding this plugin on your blog allows readers to submit your posts to Digg, Reddit, Del.Icio.Us, StumbleUpon and other social bookmarking sites. It adds a row of buttons with links to the sites and also adds a nofollow to the links. It is actually a hacked version of the famous plugin Socialable.

17. AddToAny

Helps your readers share,save,email and also bookmark your posts and pages. It supports over hundred social bookmarking and sharing sites. It comes with a smart menu that places the services that visitors use a lot at the top of the menu based on their browsing and usage history.

add-to-any-screenshot

18. SEO Friendly Images

This plugin helps in making your images SEO friendly. It automatically updates all images with a proper ALT and TITLE. ALT acts as a description for your image and TITLE is the tooltip text displayed when the mouse is over the image. These attributes are one of the important part of SEO.
seo-friendly-images-plugin

19. Robots Meta

A very easy solution to add robot tags to your WordPress pages. It allows you to add meta tags to individual posts and pages, prevent indexing of your comments, login and admin pages.
robots-meta-configuration

20. Nofollow Case by Case

Allows you to selectively apply or remove nofollow attributes to comment links, comment author links, pingbacks and trackbacks and also open the comment links in a new window. If not configured it automatically strips nofollow attributes from all your comment links and comment author links.

This article is created for every Twitter addict, who enjoys to tweet, wants to be noticed – such beautiful Twitter icons are very eye-catchy, standing out from the crowd. No matter what you are blogger, web designer, graphic designer, you cannot ignore Twitter trend. I believe this is the most complete Twitter icon list for now, I tried to get all freebies and shares available and feature them here, so You can get everything in one place.

Official Twitter badges are boring, let’s put something fresh in your design!

Birdies: Cute Free Twitter Icons For Your Blog

birdies-cute-free-twitter-icons

Create a Twitter Style Bird Mascot

Using some basic shapes, effects, and gradients this tutorial will show you how to create a Twitter mascot for your blog or website.

vectortuts-twitter-mascot-tutorial-free

Follow me on Twitter badges / logos / buttons

follow-me-twitter-badges

30 Free Vector Twitter Buttons Download30-free-vector-twitter-buttons-download

Twitter Birds by InaliBlast

inaliblist-twitter-birds

Tweet Tweet Cute Tweet: Another Free Twitter Bird Icon

tweet-tweet-cute-twitter-bird

Free Twitter Bird Icon Setfree-twitter-bird-icon-set-productive

8 Free Cute & Simple Twitter Bird Vector Graphicsfree-cute-simple-twitter-icons

31 Twitter buttons and icons

Commercial Use is forbidden.

31-twitter-logo-buttons-free

6 Free New Social Icons – Digg, Twitter, Stumble, RSS, Delicious & Redditdesignreviver-free-twitter-social-icon

The Cutest Freebies: Twitter Bird Icons & Illustrationfree-twitter-bird-illustration-icons

10 Twitter Buttons for free 10-twitter-buttons-for-free

Free Twitter Graphicsfree-twitter-graphics-buttons-icons

Free Vector Icons Set + Twitter Birdy Iconfree-vector-icon-set-twitter-birdie

IconTexto WebDev Social Bookmark Iconicontexto-free-webdev-social-twitter

It’s Twitter Time! Free vector icon settwitter-free-icon-set

Twitter Icons with Attitudefree-twitter-icons-with-attitude

Follow Me…Twitter Iconfollow-me-twitter-icon-free

Free Twitter Icontwitter-free-350-px-png-icon

Practika: A Free Icon Setpractika-a-free-icon-set

Twitter bird vector icon setflickr-twitter-bird-icon-set

Free Fat Twitters icon pack janko-free-twitter-icons

(max)Icone Blog – Set #3max-icon-set-twitter-social

Twitter Iconbeautiful-twitter-bird-icon

2 Twitter Iconsmilomark-free-twitter-icons-png

Twitter Icons .PSD by JuliusXbeautiful-twitter-icons-psd

Tweeties: A free icon set

tweeties-free-icon-set

Web 2.0 0rigamiweb-2

Twitter Block Icons

twitter-block-icons-for-free

Kweet- A Free Twitter Bird Iconkweet-twitter-bird-icons

Free PSD’s Give Away: High Resolution Twitter Bird Icons

high-resolution-twitter-icons

Twitter Eggs

twitter-eggs-free-by-graphic-loversFree Twitter Caps

free-twitter-caps-graphic-lovers

Twitter bird icon

free-twitter-bird-icon

IconsPedia Search: Twitter

This website has listed and featured many lovely twitter icons, now there are 46 Twitter related icons.

iconspedia-twitter-search-free

FREE TWITTER BUTTONS (Includes Animated GIFs) ( nearly 30 buttons)free-twitter-buttons-animated

Lisa’s twitter bird

lisas-twitter-bird-free

40 Cute Free Twitter Graphics: Badges, Icons & Buttons…wefunction-twitter badges icons

Twignature

This webpage is Japanese creation that asks you to enter your Twitter account name and rapidly have personalized Twitter button with you name on it, several sizes and icons available there.

twignature-free-icons

TweetDeck Replacement Icons by tylersticka6-tweetdeck-replacement-icons

Cute Tweeters Icon Setcute-twitters-release

Free Twitter Icons – Happy Birdshappy-free-twitter-bird-icons

Twitter 4 by jasonh1234twitter-4-book

Freebies: 2 Awesome Twitter Iconsawesome-freebiestwitter icon set

TweeterIcon

Just enter your Twitter ID, copy the code and you can use linked twitter icon right away, wide variety of different Twitter icons.

tweetericon-twitter-icon-website

50 Free and Exclusive Twitter Icons

Huge giveaway from WebDesignerDepot.

50-free-exclusive-twitter-icons

Free Rockin’ Twitter Icon for Your Blogrocking-twitter-icon

Twitter Icon – Follow me

antonist-follow-me-twitter-icon

Alternate Icon For Twitter

alternate-twitter-icon

Flickr Twitter Bird Pool

This is also nice Flickr group trying to get featured many birdies!

As always feel free to add your links! Maybe there are something I didn’t listed here?


    • Mr WordPress: Hi, this is a comment.To delete a comment, just log in, and view the posts' comments, there you will have the option to edit or delete them.

    Categories