How To Create A Perfect Designer’s Portfolio Website Using WordPress

Every designer should have a portfolio website. A good portfolio website is one that showcases your talents and is capable of appealing to the masses. One of the many challenging components of web design in today’s industry is trying to find the best tool to use for the job; from deciding which programming language to use, to whether or not you should use a framework or CMS. In this blogpost, you are going to build a single-page portfolio website using the popular CMS WordPress. WordPress is a free and open source Content Management System (CMS) that accounts for almost 20% of all websites.

There will be a lot of ground covered in this tutorial. First, you will learn how to find a PSD and modify some of it’s contents using Photoshop. Next, you will walk step-by-step through the entire process of building a custom WordPress theme from the PSD. You will also learn about core WordPress concepts and functions. For the sake of brevity and to keep things focused on WordPress, you are not going to use any other libraries or frameworks. Although, as you become more experienced, you may choose to use tools such as: Twitter Bootstrap’s grid system, SASS, LESS, or other front end development tools that would make your web development process much smoother. This tutorial will not be explaining the HTML and CSS measures of the code, so feel free to copy and paste those parts as you see fit. However, it will walk you through the PHP side of it, considering WordPress has plenty of built in PHP functions that you will be exploiting to build our theme.

Things you will need:

1. Basic knowledge of HTML/CSS and PHP
2. Local web server (I use MAMP)
3. PSD (We will provide one on Github)
4. Text Editor
5. Adobe Photoshop

Now that you have an understanding of what you need and what you are going to build, let’s get started creating your very first custom theme using WordPress. You can find all the files for this project on Github at http://ift.tt/29BVB08. Click on the green Clone or download button. The photoshop files reside inside the PHOTOSHOP folder. And our custom theme files live inside /wp-content/themes/designerportfolio.

Quick Overview of Photoshop

One of the first things you should do before you start developing your website is: find the design that works best for you. This means that you are going to need a PSD! What is a PSD you might ask? A PSD is a Photoshop document. That’s it! Themeforest has an abundance of PSDs that you can purchase. You can also find plenty of free PSDs at cssauthor.com or freebiesbug.com. The PSD used in this tutorial was found on cssauthor.com. Once you download the PSD, you are going to make some simple text changes to it. Before you can do that, you need Photoshop. Head over to Adobe’s website and purchase Creative Cloud. Their most basic plan is $9.99/month and is an essential for all web developers. Creative Cloud will give you access to some of their apps or their entire suite. But, what you should care about in this tutorial is the Photoshop App that it provides. Don’t worry! This tutorial does not assume prior Photoshop experience. Although, I believe that every web designer needs to have some basic Photoshop skills.

Go ahead and open up the PSD in Photoshop. One of the first things you will see is Photoshop’s “some fonts are missing popup message”. If Photoshop is not able to find the fonts that the PSD developer used then it will offer some other suggestions. Change all the fonts to “Myriad Pro Regular” then click “Resolve Fonts”.

Next, you will see that the PSD looks very small. Let’s zoom in. Click the View tab on the top of screen and select 100%.

That’s better! Now that you have your Photoshop environment ready, I want to walk you through a few concepts and tools that I used to write the CSS and HTML for this theme. Since this is not an HTML and CSS tutorial, you can either copy and paste the HTML and CSS I provide for you, or use Photoshop to self determine the appropriate CSS styles to write. This is not a full-blown Photoshop tutorial, but rather a few tips that will help you in this aspect.

Layer – A layer is simply one image that has been stacked on top of another one. This image can have text, actual images, a background color, and much more.

• Move Tool – You will be using this tool by pressing the Alt or Option key while right-clicking the layer you want to select. This will select the layer and allow you to find out more information about that specific layer (as you will see below).

• Rectangular Marquee Tool – You will be using this tool to measure the width and height of images, margins, padding, and more. When using this tool, click and drag from one part of the PSD to another to get a measurement in pixels. If this tool is not giving you the resulting measurement in pixels but rather in inches, points, or some other Unit of Measurement, then head over to Photoshop -> Preferences -> Units & Rulers and change the Rulers Unit to Pixels.

• Horizontal Type Tool – You will be using this tool to change some of the text on the PSD.

• Set Background Color Panel – Clicking on this panel conveniently pulls up the infamous Eyedropper Tool. This tool allows you to click anywhere on the PSD showing you the hex color code for that layer.

• Character Panel – This panel, when used with the move tool, will show you plenty of details regarding text. Use the move tool to select some text. Then click on the Character Panel to show details of the text. You will be able to see details, such as the font-family, color, font-size, etc.

I also want to show you how to extract the images from your PSD and save them to your desktop, that way you can use them in your project. You don’t have to know how to do that for this project since I provided all the images on the Github repository, but it is still a good skill to know.

1. Click on the move tool
2. Press the Option key while right-clicking the image you want to select  
3. The image will now be highlighted in the layers panel on the bottom right of the screen.
4. Right-click the highlighted layer and choose Quick Export as PNG

And voila! That’s how you extract images from your PSD to use in your project.

Now that you have learned some of the basic tools and concepts that you will be using in Photoshop, you will now change some of the content on the PSD. Select the Horizontal Type Tool, then use the cursor to highlight the text on the PSD you would like to change. A Photoshop popup message might appear that says “The following fonts are missing for text layer… Font substitution will occur. Continue?” Select continue, then you will be able to edit the text. Feel free to change the text to whatever you would like.

Fantastic! Now that you have your PSD all ready, you can turn it into a WordPress theme!

Building Your WordPress Theme

Head over to WordPress.org and download the latest WordPress version. Unzip the file inside the Document Root of your local server. The document root for MAMP is htdocs. Rename the unzipped WordPress folder to designer_portfolio.

Now, go ahead and start your local web server. Once your server has started, open phpmyadmin and create a new database. Let’s call the database designer_portfolio. Now navigate to your new site from within your browser. You should see a page like this:

Select Continue and follow the WordPress setup. You will need to enter in the database name that you just created from the previous step along with your database creds. Once the installation is complete, you will be asked to enter in a username and password to login to the WordPress administrative dashboard. When you are done with the setup and installation, go ahead and login.

Open the designer_portfolio folder inside your favorite text editor. Welcome to the WordPress file structure.

designer_portfolio/
├── wp-admin/ 
├── wp-content/
│   ├── plugins/
│   ├── themes/
├── wp-include/
├── wp-config.php

One of the finest qualities of WordPress is that developers are able to decouple their code from the WordPress core files. The only folder you will ever make changes in is inside the wp-content/. This is where you will add all of your code. If you create a plugin, it will go inside the plugins directory. If you create a theme, then it will go inside the themes folder. Open up the themes/ directory and create a new folder called designerportfolio. This is where all the code for your custom theme will live. The absolute minimum amount of files a WordPress theme needs is an index.php file and a style.css file. Go ahead and create these inside your new designerportfolio folder. In order for WordPress to recognize your theme and load it into the WordPress admin dashboard, the first few lines of the style.css needs to have what WordPress calls the stylesheet header.   

Add the below stylesheet header to the top of your style.css file. Feel free to change the Author and Author URI:

/*
Theme Name: Designer Portfolio
Theme URI:
Author: Josh Crawmer
Author URI: http://ift.tt/29BVDW1
Description: Basic single page designer portfolio theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://ift.tt/fSabl7
Tags: white, light, responsive-layout, featured-images
Text Domain:
*/

Now, go back to Photoshop and take a screenshot of our PSD. For mac users:

1. Press Command-Shift-4
2. Move the crosshair pointer to where you want to start
3. Drag to select an area
4. Release mouse

The screenshot will be saved to your desktop. Rename the screenshot to screenshot.png then drag it into your designerportfolio theme folder. This should be what your theme directory now looks like.

Now, login to your WordPress admin dashboard by going to your site URL with wp-admin added to the end. For example, mine is http://localhost/designer_portfolio/wp-admin. Once logged in, you will see a bunch of options on the sidebar on the left side. Go to appearance -> themes; from here you will be able to see your brand new theme that you created, along with the screenshot you took as the theme image. Hover over it and choose Activate.

Hover over the site title on the top left of the dashboard and click on Visit Site. You should see a completely blank page. This is what is expected because we have not added any HTML or content yet. Now, you will create some new files and folders inside our designerportfolio theme folder. Create a CSS folder with a styles.css file inside. Create a js folder with a custom.js file inside. And also create an images folder. Also create a footer.php, header.php, functions.php, and template-home.php. Below should be your new file structure, inside your designerportfolio folder.

designerportfolio/
├── css/
│ ├── styles.css 
├── images/
├── js/
│ ├── custom.js 
├── footer.php 
├── functions.php 
├── header.php 
├── index.php 
├── screenshot.png
├── style.css 
├── template-home.php

It is WordPress convention to leave the style.css file empty except for the stylesheet header. You will actually put all of your CSS for this theme inside css/styles.css. This will allow for greater flexibility and better code organization.
Add this code to your header.php file:

<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html <?php language_attributes(); ?>> <!--<![endif]-->

<head>
 <meta charset="<?php bloginfo('charset'); ?>">
 <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
 <meta name="description" content="<?php bloginfo('description'); ?>">
 <meta name="author" content="Mission 85 Music">
 <meta name="format-detection" content="telephone=no">

 <!-- Mobile Specific Meta -->
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 <!-- Stylesheets -->
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>

 <!--[if lt IE 9]>
 <script src="http://ift.tt/yaI000"></script>
 <![endif]-->


 <?php wp_head(); ?>


</head>
<body <?php body_class(); ?>>

Now add this to your footer.php file:

<?php wp_footer(); ?>

</body>
</html>

Add this code to your template-home.php file

<?php

/*
* Template Name: Homepage
*/
get_header();
?>

<p>This Is My First Theme!</p>

<?php get_footer(); ?>

Add this code to your functions.php file

<?php

/*
* define some constants
*/
define('THEMEROOT', get_stylesheet_directory_uri());
define('IMAGES', THEMEROOT.'/images');


function my_styles_and_scripts()
{
 wp_enqueue_style('main_css', get_stylesheet_directory_uri().'/css/styles.css');
 wp_enqueue_script('custom.js', get_stylesheet_directory_uri().'/js/custom.js', array('jquery'));
}

 add_action('wp_enqueue_scripts', 'my_styles_and_scripts');

Add this code to your css/styles.css file

p {
 color: #21759b;
}

These files have a few built-in WordPress functions and concepts that I want to go over:

Header.php – This file is responsible for displaying any HTML between the opening HTML tag and Doctype and your opening body tag. Some developers will add the header of the website here. Such as their: navbar, slider, etc.

• bloginfo() – displays information about the site, mostly gathered from the information you supply in your User Profile and General Settings WordPress Administration Screens. Accepts a single optional string parameter.
• language_attributes() – Displays the language attributes for the <html> tag. Accepts a single optional string parameter.
• wp_title() – Display or retrieve page title for all areas of blog.
• wp_head() – Essential WordPress hook. Allows you to add content to the head of your HTML document. Check out this article for more information on WordPress hooks, actions, and filters. Basically, when your PHP script is running and comes across a hook, WordPress searches your functions.php file for any functions that are linked to that hook, and then calls that function. This is how you would assign a function to the wp_head() hook.

<?php
// functions.php 

add_action('wp_head', 'your_function');

function your_function() {
/*
This function only gets called when the wp_head() hook gets called inside your header.php file
*/
}

• body_class() – Display the classes for the body element.

Footer.php – This file is responsible for displaying the closing body and HTML tags. Some developers will add their actual HTML footer here. The PSD you are building into a theme does not have a footer so your footer.php file will not have one either!

• wp_footer() – Another essential WordPress hook. Allows you to add content right before the closing body tag of your HTML document. This hook is also responsible for  displaying the WordPress toolbar at the top of the screen.

Template-home.php – This file will be your actual template file. You will be adding all of your HTML that goes between the opening and closing body tags here. The first thing you must do is: use PHP annotations to provide a Template Name for this file. I chose to call mine Homepage. Soon, you will see how WordPress uses this to assign a page on the admin dashboard to this specific template file. Next, you will use two of WordPress’s built in functions: get_header() and get_footer(). These two functions, more or less, include your header.php and footer.php files into the template-home.php file. Why not just use PHP’s built-in require_once or include_once functions? That’s a topic for a different day. But, basically WordPress provides a multitude of benefits to using their API. Feel free to go to their website and read up more on the subject.

Functions.php – This file allows you to change the default behavior of WordPress. You define functions here that hook into the WordPress core, including your CSS, JavaScript, and much more. Here are just a few fun details about this file taken directly from the WordPress docs:

• Requires no unique Header text.
• Is stored with each Theme in the Theme’s subdirectory in wp-content/themes.
• Executes only when in the currently activated theme’s directory.
• Applies only to that theme. If the Theme is changed, the functionality is lost.
• Can have numerous blocks of code used for many different purposes.

All you are doing right now in your functions.php file is defining some constants that you will be able to use in your template-home.php file and loading your CSS and JavaScript files. The get_stylesheet_directory_uri() function is a built-in WordPress function that references the theme directory. Which, in your case, is designerportfolio. You probably noticed the array(‘jquery’) parameter inside the wp_enqueue_script() function. This tells WordPress to make sure jQuery is loaded prior to loading the custom.js file. A quick note: WordPress comes pre-packaged with a copy of jQuery, which you should use with your code. This means, you can’t use the dollar sign as your normally would, you need to use jQuery instead. Take a look at the code below to see what I mean:

When using jQuery with WordPress you cannot:

$('.menu-icon').click(function () {});

Instead you must:

jQuery('.menu-icon').click(function () {});

As you can see, it’s quite simple. Just substitute jQuery for $.

css/styles.css – This file does not need much introduction. This is where you are going to define your CSS. I added one CSS property, that way you could demonstrate that your functions.php file was loading your CSS file properly.

images/ – Copy the contents of the /wp-content/themes/designerportfolio/images/
folder on Github into this folder. You will be statically displaying the images from this folder onto your website.

js/custom.js – This file does not need much introduction either. This is where you are going to define your JavaScript.

You are almost ready to test out your new theme in your browser. Head over to Pages -> Add New and give the page a title of Homepage. (Page title is not important. Feel free to name it whatever you wish). Also set the Template Page Attribute to Homepage. Remember, Homepage was the Template Name you assigned to template-home.php at the top of the file! Then, click Publish.

Now, head over to Settings -> Reading and change Front page displays from Your latest posts to A static page. Then, set Front page: to Homepage. This will make sure that WordPress sets the page you just created in the previous step as your landing page.

Now, revisit your site in the browser!

Congratulations on creating your first theme!

Now, give your theme some HTML, CSS, and a little bit of JavaScript.

Change template-home.php to this:

<?php
/*
* Template Name: Homepage
*/

get_header();

?>


<header class="header center">

 <nav class="navigation container center">
 <img width="100" height="67" class="menu-icon" src="<?php echo IMAGES; ?>/hamburger.png" alt="click to expand">
 <ul class="header-color">
 <li><img class="line-image" src="<?php echo IMAGES; ?>/line.png"></li>
 <li><a href="#">ABOUT ME</a></li>
 <li><a href="#">WHAT I DO</a></li>
 <li><a href="#">MY WORKS</a></li>
 <li><a href="#">TALK WITH ME</a></li>
 <li><img class="line-image" src="<?php echo IMAGES; ?>/line.png"></li>
 </ul>
 </nav>

 <article>
 <h2 class="site-title">When was the last time you did something for the first time?</h2>
 <h3 class="header-color">HIRE ME.</h3>
 <p><img class="line-image" src="<?php echo IMAGES; ?>/line.png"></p>
 <a class="header-color" href="#">MY WORKS</a>
 </article>

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


<section class="about">
 <div class="container center">
 <div class="your-photo">
 <img src="<?php echo IMAGES; ?>/image_placeholder.png">
 <p>Your photo</p>
 </div>
 <div class="bio">
 <h2>Josh Crawmer</h2>
 <p>Software Developer, Blogger, and Nature Enthusiast</p>
 </div>
 <div class="location">
 <img width="18" height="22" src="<?php echo IMAGES; ?>/located_icon.png">
 <p>In Minneapolis, MN</p>
 </div>
 </div>
</section>
<!-- end about section -->


<section class="main-content center">

 <div class="container">
 <article class="what-i-do">
 <h2>What I do</h2>
 <p>There are many variations of passages of Lorem Ipsum available, but the majori believable.</p>
 </article>
 <article class="my-work flex-container">
 <div class="flex-item">
 <img src="<?php echo IMAGES; ?>/icon_one.png">
 <h3>Design.</h3>
 <img src="<?php echo IMAGES; ?>/line_black.png">
 <p>There are many variations of passages of Lorem Ipsum available, but the majori believable.</p>
 </div>
 <div class="flex-item">
 <img src="<?php echo IMAGES; ?>/icon_two.png">
 <h3>Branding.</h3>
 <img src="<?php echo IMAGES; ?>/line_black.png">
 <p>There are many variations of passages of Lorem Ipsum available, but the majori believable.</p>
 </div>
 <div class="flex-item">
 <img src="<?php echo IMAGES; ?>/icon_three.png">
 <h3>Development.</h3>
 <img src="<?php echo IMAGES; ?>/line_black.png">
 <p>There are many variations of passages of Lorem Ipsum available, but the majori believable.</p>
 </div>
 </article>
 </div>

</section>
<!-- end main content -->


<?php get_footer(); ?>

Change css/styles.css to this:

/**
 * Table of Contents
 *
 * 1.0 - Reset
 * 2.0 - Elements
 * 3.0 - Header
 * 4.0 - About
 * 5.0 - Main Content
 * 6.0 - Media Queries
 */

/**
 * 1.0 - Reset
 *
 * Resetting and rebuilding styles have been helped along thanks to the fine
 * work of Eric Meyer, Nicolas Gallagher, Jonathan Neal, and Blueprint.
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 border: 0;
 font-family: inherit;
 font-size: 100%;
 font-style: inherit;
 font-weight: inherit;
 margin: 0;
 outline: 0;
 padding: 0;
 vertical-align: baseline;
}

html {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 font-size: 62.5%;
 overflow-y: scroll;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
 -webkit-box-sizing: inherit;
 -moz-box-sizing: inherit;
 box-sizing: inherit;
}

body {
 background: #f1f1f1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
 display: block;
}

ol,
ul {
 list-style: none;
}

table {
 border-collapse: separate;
 border-spacing: 0;
}

caption,
th,
td {
 font-weight: normal;
 text-align: left;
}

fieldset {
 min-width: inherit;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
 content: "";
}

blockquote,
q {
 -webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 hyphens: none;
 quotes: none;
}

a:focus {
 outline: 2px solid #c1c1c1;
 outline: 2px solid rgba(51, 51, 51, 0.3);
}

a:hover,
a:active {
 outline: 0;
}

a img {
 border: 0;
}

/**
 * 2.0 - Elements
 */

.container {
 max-width: 930px;
 margin: 0 auto;
}

.center {
 text-align: center;
}

body {
 font-size: 14px;
 color: #535353;
 font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h2 {
 font-size: 30px;
 color: #26c0a5;
}

h3 {
 font-size: 20px;
}

p {
 font-size: 16px;
}

/**
 * 3.0 - Header
 */

.header {
 background: url('../images/header.png');
 background-size: cover;
 background-position: top center;
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 height: 720px;
 position: relative;
 width: 100%;
 overflow: auto;
}

.menu-icon {
 position: absolute;
 z-index: 100;
 cursor: pointer;
 right: 0;
 top: 0;
 display:none;
}

.header article {
 margin-top: 225px;
}

.header article h3 {
 margin-top: 20px;
}

.header article p {
 margin-top: 30px;
}

.header article a {
 display: inline-block;
 margin-top: 55px;
 border-width: 2px;
 border-color: rgb(255, 255, 255);
 border-style: solid;
 border-radius: 3px;
 text-decoration: none;
 padding: 20px 30px 20px 30px;
}

.header article a:hover {
 background-color: #26c0a5;
}

.header-color {
 color: #ffffff;
}

.navigation {
 margin-top: 85px;
}

.navigation ul li {
 display: inline-block;
 width: 12%;
 margin: 0;
 padding: 0;
 line-height: 14px;
 height: 14px;
}

.navigation ul li a {
 text-decoration: none;
 color: #ffffff;
}

.navigation ul li a:hover {
 color: #26c0a5;
}

.line-image {
 vertical-align: middle;
}

.site-title {
 font-family: "Open Sans", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: lighter;
}

/**
 * 4.0 - About
 */

.about {
 padding: 70px 0 70px 0;
}

.about .your-photo {
 position: relative;
}

.about .your-photo p {
 position: absolute;
 height: 14px;
 width: 100px;
 top: 50%;
 margin-top: -7px;
 left: 50%;
 margin-left: -50px;
}

.about .bio {
 margin-top: 50px;
}

.about .bio p {
 margin-top: 20px;
}

.about .location {
 margin-top: 60px;
}

.about .location p {
 margin-top: 20px;
}

/*
* 5.0 Main Content
*/

.main-content {
 background: #ffffff;
 padding: 75px 0 75px 0;
}

.main-content .what-i-do p {
 margin-top: 30px;
}

.main-content .my-work {
 margin-top: 115px;
}

.flex-container {
 display: -webkit-flex;
 display: flex;
}

.flex-item h3 {
 margin-top: 40px;
 margin-bottom: 20px;
}

.flex-item p {
 margin-top: 40px;
}

/*
* 6.0 Media Queries
*/

@media (max-width: 767px) {

 .flex-container {
 display: block;
 }

 .flex-item {
 margin-bottom: 50px;
 }

 .navigation {
 margin-top: 0;
 }

 .navigation ul {
 display: none;
 width: 100%;
 position: relative;
 background-color: #26c0a5;

 }

 .navigation ul li:first-child, .navigation ul li:last-child {
 display: none;
 }

 .navigation ul li {
 display: list-item;
 width: auto;
 height: auto;
 line-height: normal;
 padding: 10px;
 }

 .navigation ul li a {
 margin: 0 auto;
 width: 30%;
 display: block;
 }

 .menu-icon {
 display: block;
 }

}

Now add a little bit of code to js/custom.js:

jQuery(function () {
 $nav = jQuery('.navigation ul');

 jQuery('.menu-icon').click(function () {
 $nav.slideToggle();

 });

 jQuery(window).resize(function () {
 if (jQuery(window).width() < 767) {
 $nav.hide();
 }
 else {
 $nav.show();
 }
 });

});

There is not much new here. This is just a bunch of HTML, CSS, and a little bit of JavaScript. However, there are a couple things I want to point out; make sure you copy all the images from the images folder on Github into the images folder in your project. Also, you probably noticed the <?php echo IMAGES; ?>. This is referring to the IMAGES constant we defined in functions.php. Now, head over to your browser and refresh the page.

Whoa! That’s a big difference! As you can see, we now have a fully functional website built upon the WordPress platform. I hope this introduction has been insightful and has sparked an interest in the wonderful world of WordPress.

The post How To Create A Perfect Designer’s Portfolio Website Using WordPress appeared first on Line25.

Source: http://ift.tt/29ImJ2G