WordPress Web Design Guides

Why PSD to HTML Is Not Dead (Even in the WordPress Age)

 This is a guest post by Robert Hapiuc. He was the one responsible for designing the main CodeinWP website. 
“Come on, man, who needs PSD to HTML if I can just get a free WordPress theme and have a site launched in minutes?!” – is likely the response you’re going to get from anyone working with websites.

But would they be right? Is PSD to HTML really done?

Or maybe we’re missing something here… (more…)

What Most Web Designers Have Wrong About WordPress Theme Hierarchy

WordPress theme design can at first seem rather daunting; even for seasoned web designers. The simplest of themes seem to be made up of multiple files that are somehow interconnected.

But the good news is this: There is a logical system behind the confusion. If you’re willing to roll up your sleeves and learn a little PHP, you can turn your static HTML designs into dynamic WordPress websites.

You could of course use our services instead, but we like to give you a choice!

In this article I want to start by focusing on the key mistake that most would-be WordPress theme designers make when it comes to working with the WordPress theme template hierarchy, then go on to give you a broad overview of how WordPress themes should come together. (more…)

The 6 Step Process of Designing a WordPress Site From Top to Bottom Quickly (& In a Way That Your Client Will Love)

Some designers hate WordPress.

They say WordPress limits their creativity.

They say it’s not really as easy to use as some think it is, and that clients tend to be very confused when interacting with it.

They say it’s difficult to convert a modern design into a usable theme.

And, here’s the kicker, they are right.

At least partly.

WordPress is not perfect as a web development platform, especially when working with clients. That’s why we need to adapt a certain approach if we want to make them happy (read: so they will pay us). (more…)

Make Your WordPress Site into an Issues-Based Magazine

Many of us might remember when news and articles were dominantly available on paper sources such as newspapers or magazines. These bunches of paper were (and are) usually organized into issues and volumes. For example, the New York Times on November 23, 1963 was Issue No. 38,654 in Volume CXIII (113). The days of periodical publishing, when every certain period of time, a collection of articles would be released, seem to have passed.

Source: 3D Issue

Source: 3D Issue

Nowadays, online news sources use “firehose” publishing, which douses readers in jets of information. They publish article, after article, after article. For many readers, especially readers more used to the old-time periodical publishing system, this can be extremely overwhelming. It may be time for periodical publishing to take a place online, taking the massive jumble of news and information constantly being posted to the internet and organizing it into easier to read periodicals. (more…)

How to Create an Attractive Dropdown Blogroll with CSS

Dropdown menus are great ways to use navigation on your site without cluttering up the page. They can get annoying though, because they can be really hard to style. Most people would use JavaScript, but we’re going to use CSS for flexibility, speed, and compatibility. Unfortunately, this method will not work with IE6, but will still be more compatible than JavaScript. (If you’d like to see the final product of this tutorial check out this page.)

1-Create the Image

We won’t be using codes in our HTML, so it’s not going to look anything like a dropdown. The image you create can look however you want it. You’ll probably want to include an arrow to indicate that this is a dropdown menu. It can be whatever height you want, but it must be the width of your dropdown.

This is what is used in the example:

 

pbd-css-blogroll-rollover-img

 

2-Set Up the HTML

We’re going to be using simple HTML that you can later style however you want. We need an unordered list to store all the links. We will then precede that with a paragraph (or ‘h’ tag if you want) to title it, and finally, we’ll wrap the whole thing in a div.

The final markup should look like this:

<div class="blogroll">
<p>Blogroll</p>
<ul>
<li><a href="http://www.site.com/">Example Site</a></li>
<li><a href="http://www.site.com/">Example Site</a></li> 
<li><a href="http://www.site.com/">Example Site</a></li>
</ul>
</div>

You may want to use WordPress’s wp_list_bookmarks(); function to use the built in linkroll instead. You can do it either way.

3-Style the Menu

Now we’re going to just design the dropdown as it will be when it’s dropped down and forget about the functionality.

First we need to replace the paragraph text with the image we created earlier.

.blogroll p {
background:url(pbd-css-blogroll-rollover-img.png) 0 0 no-repeat;
width:274px;
height:21px;
text-indent:-9999px;
}

We apply the image as the background first. We then set the dimensions of the paragraph to be the same as those of the image and we use text-indent to hide blogroll1the “Blogroll” text from our HTML.

Next we have to style the list. Because our HTML is so simple, it should be easy styling this however you want. For example, you can add a background to the list or use other types of HTML.

All we’re doing is setting up a plain list of all the links and changing the background color of each link on rollover. The CSS is as follows:

.blogroll ul {
width:272px;
background:#214868;
border:1px solid #48758d;
border-width:0 1px 1px 1px;
padding:0;
list-style:none;
}

blogroll ul a:link, .blogroll ul a:visited {
display:block;
width:252px;
padding:2px 10px 2px 10px;
text-decoration:none;
color:#93b8d3;
font-weight:normal;
}

.blogroll ul a:hover, .blogroll ul a:active {background:#366386;}

Right now, we have a space between our image and our dropdown. We can remove this by amending the CSS with:

.blogroll p, .blogroll ul {margin:0;}

4-Create the Dropdown

Now to create the dropdown. We’re going to use the div to hide everything other than the image until the user’s mouse is over it.

To start with, let’s hide everything other than the image.

.blogroll {
width:274px;
height:21px;
overflow:hidden;
}

The we just use the :hover pseudo-class to allow the rest to be shown when the user scrolls over the image.

.blogroll:hover {overflow:visible;}

5-Fix the Pushing-Down-Content Issue

The rollover now works, but the menu pushes all the content beneath it down.

We’re going to fix that by using absolute positioning to put the dropdown menu above all the other content.

The first step is to amend the blogroll div to be positioned relatively, so that the dropdown’s absolute positioning can be anchored by the div:

.blogroll {position:relative;}

Now use CSS to position the menu right under the image:

.blogroll ul {
position:absolute;
left:0;
top:21px;
}

6-Issues with IE6

This menu won’t work with IE6 because it doesn’t support :hover on anything other than links.

There are some workarounds available using JavaScript. You could use conditional comments so that IE6 users use JavaScript to see the menu. Or you could try to teach IE6 to use :hover properly.

Since the whole idea of all this was to avoid extra scripts, it might just be best to simply hide the menu. Just use this code:

.blogroll {display:none;}
html>body .blogroll {display:block;}

(Info from: Pro Blog Design)

Add a “Reading Mode” to your Blog

You may have seen it around the web. It’s the function that takes all those cluttered pages of articles floating around the web, with their obtrusive ads and headers and footers, and simplifies it, so all you have to sort through is the attractively simple article in its most basic, text and picture form. This can be done with external services such as Readability, a Chrome extension, or, in certain cases, on news applications such as News360. That’s all well and good, but you’re a web developer/blogger. You want to do it yourself, make it part of your site, integrate it for ease of use. Let’s get started.
If you want to take the easy way out, you can download this function as a plugin from Github. (Direct download link) Just upload and activate.

How It’s Done

The method behind the function is actually pretty simple. We’re going to use Jack Moore’s Colorbox plugin to make the post pop out while the rest of the page fades out. All we need to do is set some options and insert our JavaScript-created (so the link doesn’t show up as part of the post’s content) link.

1. Download the Plugin

Download the files from here. The zip folder will look like this:

Each example folder contains a different style for you to use. Loading the index.html file in each folder will show you what they look like.

Now, copy the jquery.colorbox-min.js file from the ‘colorbox‘ folder into the /js/ in your theme. Then, choose an example and copy the colorbox.css into your theme’s directory. Also copy all of the /images/ files from the example folder into your theme’s images directory. You may prefer to just make a ‘colorbox’ folder in your theme’s folder and put all the files there.

2. Queue the Files

Now you need to load all the files into your page. Open up your theme’s functions.php file and paste the following before the closing ?> tag:

/**
 * Queue Reading Mode scripts and styles.
 */
function pbd_rm_scripts() {
	if(is_single() ) :
		wp_enqueue_script(
			'colorbox',
			get_bloginfo('template_directory') . '/js/jquery.colorbox-min.js',
			array('jquery'),
			'1.3.19',
			true
		);

		wp_enqueue_script(
			'pbd-reading-mode',
			get_bloginfo('template_directory') . '/js/pbd-reading-mode.js',
			array('jquery', 'colorbox'),
			'0.1',
			true
		);

		wp_enqueue_style(
			'colorbox',
			get_bloginfo('template_directory') . 'https://codeinwpblo-vertigostudio.netdna-ssl.com/colorbox.css',
			array(),
			'1.3.19'
		);
	endif;
}
add_action('wp_enqueue_scripts', 'pbd_rm_scripts');

This just tells your site about all of your files; the Colorbox files and the Javascript file we’re going to create next.

3. Wrap Your Post Content in a Div

You need to have your post contained in one element for Colorbox to reference. Some themes might already have this, but the class names vary from theme to theme. For simplicity, we’re just going to use a WordPress filter to add a div around the content.

Paste the following into functions.php:

/**
 * On single posts, it wraps the content in div.
 */
function pbd_rm_content_filter($content) {
	if(is_single() ) {
		$content = '<div>'. $content .'</div>';
	}

	return $content;
}
add_filter('the_content', 'pbd_rm_content_filter');

This filter runs every time your theme displays a post’s content. If the user is on a single post page, then our code will wrap a div with the class .rm-content around it.

4. Creating the Link

Now we can set up the “Reading Mode” link. In your theme’s /js/ directory, create a new file named ‘pbd-reading-mode.js’ and paste the following into it:

jQuery(document).ready(function($) {
	// Set this to the CSS selector of the element that wraps your post content.
	// e.g. .entry or .entry-content
	var selector = '.rm-content';

	// The HTML for your "View This in Reading Mode" link.
	var html = '

View this post in Reading Mode.

';

	$(selector)
		.prepend(html)
		.find('.reading-mode')
		.colorbox({
			innerHeight: "80%",
			innerWidth: 700,
			inline: true,
			href: selector
		});
});

You can set the selector for the element that wraps the post on line 4. (If you used the filter above, you don’t need to do anything with that.)

Line 10 adds the wrapped HTML to our content wrapping element.

Line 12 initiates Colorbox with options for its size, and specifies its content as the wrapping element.

5. Styling It

Now it should work. The “View in Reading Mode” links should show up at the top of your posts. Now we just need to add some CSS to make the popup as legible as possible. You can use the CSS below or play around with the styling:

/**
 * Reading Mode
 */
#cboxLoadedContent > div {
	text-align: left;
	padding: 20px;
	font: 16px/24px Georgia, serif;
	width: 90%;
}

#cboxLoadedContent > div .rm-button {
	display: none;
}

#cboxLoadedContent > div p {
	margin-bottom: 24px;
}

#cboxLoadedContent > div h2 {
	font-size: 22px;
	margin-bottom: 24px;
}

#cboxLoadedContent > div h3 {
	font-size: 18px;
	margin-bottom: 24px;
}

#cboxLoadedContent > div h4 {
	font-size: 16px;
	margin-bottom: 24px;
}

The #cboxLoadedContent > div is used to match content wrapping element. This should make it a little more flexible than specifying a CSS classname.

Line 11 stops the “Reading Mode” link from appearing in the popup.

If you want to use your theme’s post styles, you can skip the filter and instead specify an element like .entry-content in the JavaScript. The element itself is moved into the popup, so all of its styles will then apply to the popup as well.

(Info from: Pro Blog Design)

Four Tips for Keeping Your WordPress Site Safe from Hackers

You spend time and money developing the perfect site: hiring a graphic designer, hiring a coder, considering colors and specifics that will make your company glow to potential customers. The site goes live and, within weeks, gets hacked.

It’s an all too familiar story. Some estimates show about 30,000 WordPress sites get hacked each day!

Why Do Hackers Hack Websites?

The reasons behind this are plenty. Sites that store a customer’s credit card information offer an easy target for criminals interested in committing fraud. Those with extensive email lists stored offer hackers with a massive amount of people to contact for their own interests. They may install malicious hardware on your computer so they can take over your computer and use it as is if were their own, thereby attacking MORE computers from YOURS.

And some hackers do it just for fun.

Before you put yourself out there on the Internet, make sure you’ve taken the following steps to protect your website – and your potential readers – from harm.

Create secure log-in names and passwords

WordPress itself  states your highest risk of being hacked comes in choosing a poor user name and password. When you create the blog, your default user name will be admin. Change this to something else. Also, create a password that won’t be easily detected. Do this by:

  • Using a variety of letters and numbers
  • Using upper and lower case letters
  • Using symbols, such as # and $
  • Changing the password on a regular basis
  • Choosing a user name that has nothing to do with your blog (ie: your blog is for North Carolina Real Estate – don’t choose NCreal for the user name)

 

Keep your WordPress site updated

On a regular basis WordPress will make updates and post that these updates are available on the Dashboard of your site. Update your site whenever it is suggested. Keeping WordPress updated will ensure you have the latest security features and that you are overriding any bugs that may have been in the earlier versions. This article shows what can happen when you DON’T update your site.

 

update

 

Check Out Two-Step Authentication

This great plug in allows Google to send you a unique number on your phone when you log into your account. Upon log in each time you will need to enter the secret number, sent to you on the Google Authenticator App on your smartphone. Because this program generates a new number ever thirty seconds, the chance of a hacker guessing that number correctly is next to impossible. Read more about this program on WordPress’s site.

Download and run WP Security Scan

This plug in, developed by WordPress, will scan your WordPress website or blog, check for vulnerabilities in security, and suggest actions to fix those. This includes information about your passwords, file permissions, database security and more. You can find WP Security Scan here: http://wordpress.org/plugins/wp-security-scan/. To use, download the file. Go to your dashboard. Click on Plug Ins, and then choose Install New. Upload the entire folder and you will find it under your installed plug ins page.

plug-ins

 

 

Three Styling Changes You Can Make to Change Your Blog’s Appearance

 

If you want to make major changes to your website, you’ll likely need to hire a designer.

But what if you want to make minor changes?

Changing the background, the color or font of text for your headers and content, and styling the hyperlinks can be done in just a few small steps.

First, A Few Words About CSS

Cascading Style Sheets, or CSS, allows a person to change one element on the style sheet that will affect the remainder of the website. Each website has at least one style sheet; some have more. The main style sheet in WordPress is named style.css. In this style sheet is the code for the web site’s design elements. Making changes to this file will change the look of your site.

To Get Started

Locate the style.css sheet by:

  1. Logging into the dashboard
  2. Clicking on Appearance
  3. Clicking on Editor
  4. Locating the stylesheet.css file at the bottom of the right hand side.
  5. Clicking on stylesheet.css (though most of the time this is the one that appears in your editor when you land on this page)

editor

You will need to do this each time you want to make a change to your style sheet.

Before You Begin: A Word of Caution About CSS Changes

Those changes you make will become permanent once you make them and hit the Save button. One forgotten semi-colon can mess up your entire site. ALWAYS copy the existing code, paste it into a Word document or an editor (I like Programmer’s Notepad) and save it. If you make a mistake you can return to that version by copying it and pasting it back onto the site.

 

BODY

Today you want a blue background for your website, but tomorrow you want it red. Or maybe you find a great background image to tile. To make a change to the body of your website, locate the body code in the style sheet.

bodyimage

To use a solid background color, the code will be the number sign and the numerical code for the color you want. For a list of codes, visit the W3schools site.

Locate the code you want and place that after the number sign (#) on the style sheet.

For example, a white background would be #fffff while black would be #00000. The code would read background: #fffff;

To use an image, upload the image file to your control panel under the theme’s images folder. (themes/NAMEOFTHEME/IMAGE).

Then change the file name in the style sheet so it matches the name of your image.

Example: background: url(images/NAMEOFYOURIMAGE.PNGORJPG) repeat (or no-repeat). 

The repeat will tell the image to tile; the no-repeat will tell the image to show up only once on the site.

HEADINGS

To change the size, color or text of your headings locate the headings in your style sheet.

headings

To change the font, place the name of the font you want to use before the rest of the fonts listed. This way, if someone’s browser doesn’t support the text you like, it will choose the next font on the list; and then the next, if the browser doesn’t support the second font.

To change the color, locate the # tag and then add the numerical code you want.

To change the size, locate the font-size and change the number. The size will be listed as px or %; the larger the number, the larger the font.

 

HYPERLINKS

If you want to call attention to other areas of your site or to outside sites, you might do this by linking text to the pages you want to send the readers. If so, you want the hyperlinks to stand out. To change the hyperlinks, locate this in the style.css file.

body

In this example you will see a,a:visited, which changes the appearance of the links, and a:hover, which changes the appearance of links the user is hovering over.

Make color changes using the # symbol.

You can also underline links by stating text-decoration:underline (as seen in this example).

 

 

Using Color Theory in Web Design

In an earlier post, 5 Dos of Great Blog Design, we discussed the concept behind color theory in the way it pertains to white, or negative, space.

Color theory tells us that different colors work together – or don’t – for specific reasons. (For a more in-depth definition of color theory, check out this article from NYU.)

While you may not think about how color will affect those visiting your blog, during the web design process the designer considers this as a very critical component of creating the perfect web site.

How Color Makes Us Feel

Take a look at this color block:

yellow

How does it make you feel?

And how about this block:

blue

Did you feel differently when looking at example A than you did when you viewed example B?

If so, it’s no surprise.

Yellow is electric, energizing.

Light blue is calming.

Color matters. Even the shade used will make a difference. A softer shade of blue evokes calming feelings while stronger shades denote strength.

Three Categories of Color

color wheel photo: color-wheel color-wheel.jpg

The Color Wheel

Chances are you learned about color theory during elementary art class; chances are you have forgotten much of it by now unless you work in graphic design!

The color wheel contains three types of colors:

  1. Primary
  2. Secondary
  3. Tertiary

Primary colors cannot be created by mixing other colors together.

Secondary colors are formed by mixing two primary colors: blue and yellow make green, red and yellow make orange.

Tertiary colors are derived by combining primary and secondary colors: blue-green or red-orange.

Web designers use these types of colors to evoke feelings when designing a blog.

Create Your Blog’s Mood Through Color

Want to know what colors are associated with which types of feelings? Here’s a handy guide:

Red – Warm, electric, energizing. Great as an accent for creating movement.
Blue – Calming, strength, professional. Sites for travel or relaxation work well with this shade.
Yellow – Exciting and electric. Too much can cause distraction on a site, so use it for accents.
Orange – Electric; however, browsers display this shade differently so stick with it as an accent. Green – Cool, calming, professional; great for sites referring to nature, finances, business.
Black – Strength and power. While black has been used as a main color in web design, it can also be straining to a reader’s eyes.
Gray – Can be used for strength, calmness, power, authority. Great shade to incorporate with most other colors; gray is used a lot in web design today.
White – Though it may seem an unnecessary color in web design, don’t forget what we said about white, or negative, space. Your readers need some white areas so the rest of the site comes into focus. Without this white space, your likely to overwhelm your readers, and they will likely turn away.

A Few Examples of Color Theory in Use

To show you how color theory is used in web development, what better than to offer a few visuals?

Suntrust implements blue, which is considered a corporate color, with an electric yellow center box to evoke a call to action. What is it they want us to do? Sign up with them!

suntrust

YogaWorks, a very popular yoga company, uses shades of green and gray to evoke a calm feeling in viewers on their website.

 

yogaworks

 

This website, for an artist, depicts a variety of electrifying images that catch the reader’s attention.

auystn

 

5 Dos of Great Blog Design

If you’re venturing into the world of blogging, chances are you hope to:

  1. Gain readers
  2. Promote a product, and
  3. Make money

Of course, some blog for personal reasons- to tell a story, to keep family up to date with going ons – but those with a business who start a blog often want to monetize their words, thoughts and articles.

Good blog design is critical for catching – and keeping – readers.

Check Out These 5 ‘Dos’ for Creating a Blog That Works.

  1. White Space is good. Entire textbooks have been written about color theory for this simple reason: Colors can make us feel a certain way. (Imagine entering a bright orange room; now, a pale blue room. Chances are your heart beat a little more quickly on the first example!) At the same time, white space, or negative space, can do the same. (Check out these 21 examples of white space use on the web.) Too much color can overwhelm the reader, so make sure the elements you place on your site are important and let the rest go, allowing for some refreshing negative space.
  2. Go easy with the ads. Ads generate income, but if they are blinking all over your page your readers will go elsewhere. Most ads are best placed above the fold, or on the part of the page accessible without scrolling. This handy graphic shows a heat map designed by Google to show clients the best placement for advertising on their website.) Here’s a visual:

heatmap

 

Follow this three-rule equation for ads:

  • Rule number one: Don’t place ads in the middle of your content.
  • Rule number two: Avoid too much flashing and blinking.
  • Rule number three: Target each ad so you don’t have to put so many on the page
  1. Create a theme for the content – and stick to it. Many bloggers start with a great idea and then stray from the topic. Short attention spans and not a lot of time mean most readers lose interest in mere seconds (This report by Nielsen Norman Group shows you have just ten to twenty seconds to grab a reader’s attention!) Therefore, it’s imperative you keep your blog topics on point, so you don’t lose the reader who is most interested in what you have to say (but aren’t saying).
  2. Encourage interaction. It’s a social media frenzy we live in these days. Everyone wants to be heard. If you offer content that asks questions of the readers, and you offer follow up to those questions, chances are your readers will keep coming back for more. Turn on comments. Ask questions. Then return to answer them.
  3. 5 second test. If you aren’t sure whether or not your web site conveys the message you want, follow Scranton University’s Writing for the Web 5 second test: Ask someone to glance at your website for five seconds and then turn away. Then ask them this: What is my site about? If they aren’t sure, or if their answer doesn’t match up with your goals for the site, it’s time to restructure. (If this IS the case, consider your text: Is it to the point? Do key words stand out? Does advertising match the purpose?)