Category: WordPress Web Design Guides

How to Optimize Your ThemeForest Landing Page (Item Page) – Elite Authors Chip In

When first jumping on the Envato train as a theme author, no one really knows where the rails are heading. There are no manuals or steps to follow that would guarantee the success of your ThemeForest themes. What’s even worse, the word goes that for those too late to the Envato party, the train has long left the station. (more…)

12 Things We Need to See From WordPress Page Builders in 2017 + Who Already Gets It Right

 This is a guest post by Ann Taylor. 

A question “Do you like WordPress page builders?” is somewhat similar to what if Dumbledore asked “Do you love Harry Potter?” If you are Hermione, you answer is yes. If you are the Dark Lord… Well, you get the idea. It’s the same with so renowned WordPress drag-and-drop page builders – whether you like them or not generally depends on who you are. (more…)

Why Your WordPress Site Should Have Sticky UI Elements, and How to Create Them

 This contribution on sticky UI elements in WordPress is by Lexie Lu. 
There are some mixed feelings when it comes to sticky UI elements. Some say that they — which can include everything from social media sharing options to company information — make for a bad user experience. However, even the detractors concede that these can be highly effective design choices when done right. (more…)

Accelerated Mobile Pages for WordPress: What You Need to Know

Ever since the latter half of 2015, the concept of Accelerated Mobile Pages for WordPress as well as other website technologies has been in discussion. Web developers, WordPress people, SEO experts, and everyone else associated with content creation or management has been talking about the AMP Project.

But what exactly is the AMP Project? We know that “Accelerated Mobile Pages” refers to something that can, well, accelerate your pages on the mobile. Ideally, a website using AMP should load faster and provide a better UX overall as compared to one that doesn’t use AMP, all other things being constant. (more…)

Beginner’s Guide to Learning JavaScript as a WordPress Developer

 This is a contribution by Sufyan bin Uzayr. 
If you have been following the happenings in the WordPress community for the past couple of months, you might already be aware of the rising importance of JavaScript.

First up, the WordPress.com desktop app, Calypso, departed from the standard PHP route and has been coded using JavaScript (something CodeinWP talked about recently). And if that was not enough, in his annual “State of the Word” address in December 2015, Matt Mullenweg kept it straight and simple: (more…)

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)