WPMU DEV's Blog - Everything WordPress » WordPress Tutorials - WPMU.org http://premium.wpmudev.org/blog The WPMU DEV WordPress blog provides tutorials, tips, resources and reviews to help out any WP user Wed, 26 Nov 2014 23:31:52 +0000 en-US hourly 1 http://wordpress.org/?v=4.0.1 From WordPress Beginner to Pro: 200+ Career-Boosting Resources http://premium.wpmudev.org/blog/wordpress-career-boosting-resources/ http://premium.wpmudev.org/blog/wordpress-career-boosting-resources/#comments Tue, 25 Nov 2014 13:00:55 +0000 http://premium.wpmudev.org/blog/?p=134463 Whether you’re just starting out with WordPress or you’ve been developing with it for some time, you’ll probably find that the resources out there to help you learn are pretty daunting. There are hundreds if not thousands of sites and blogs dedicated to sharing tips, tutorials, news and information about WordPress, and it’s not always easy to know which ones are the most reliable, up-to-date or relevant for you.

In this article I’ll share a huge list of resources which I’ve found useful or believe will be useful for others, from users creating their very first WordPress blog to developers digging further into WordPress to get more form it, and everyone in between.

So as you’re developing your WordPress skills and becoming more confident with the platform, you can keep coming back to this list to find helpful links which will support your development as you advance your WordPress career.

WordPress resources.
Handy WordPress resources.

In this post I’ll cover six main areas:

  • Getting started with WordPress: Creating your first site, using themes and plugins, adding and editing content and tweaking your site’s settings.
  • Becoming an advanced user: Taking WordPress beyond the blog, managing your site and working with themes and frameworks.
  • Coding your own: Developing themes and plugins and adding more CMS functionality to your site.
  • Advanced developer topics: Action and filter hooks, the database, queries, WordPress APIs, translation and libraries and third party tools.
  • Professional development for clients and users: Becoming a WordPress pro, managing client projects, selling WordPress to clients and customers, customizing the admin screens, development practices, Multisite and BuddyPress.
  • Contributing to WordPress and its community: Contributing to WordPress Core, creating free themes and plugins and helping others to learn.

Over time, more and more resources will become available. I’d love to have a crystal ball and predict what they are, but unfortunately I can’t! So in the very last section I’ll give details of some of the most useful sites which I think you should bookmark, follow or subscribe to for future resources and updates.

A caveat: Everyone has their favorite WordPress resources and sites, and obviously I haven’t been able to cover everything that’s available here. I’ve included links to the Codex in many cases, except where I think other resources are more helpful. I’ve included links to posts on the WPMU DEV blog as well as a variety of other links to websites and blogs. This probably only scrapes the surface of all the WordPress content out there, so don’t beat me up if I haven’t included your favorite site!

Getting Started With WordPress

Newcomers to WordPress will find it the hardest to track down the most reliable WordPress resources. If you’re setting up your first site or you’re working on a site someone else has created for you, these resources will help you get started.

Creating Your Site

The first step for many users is to create their first site. The guidance on the WordPress Codex can be difficult for new users to get to grips with, but there’s plenty more out there.

You’ll need to find a provider to host your WordPress site: these links will help you choose a good one:

The next step is to install WordPress:

If you’re moving from wordpress.com to wordpress.org you might find information about the key differences helpful:

Themes and Plugins

Once your site is set up you’ll need a theme. These resources will help you find one that works for you:

And if you want to add extra functionality or customization to your site, you’ll need some plugins too:

Adding and Working With Content

WordPress is designed to make it easy to add and edit content, but some guidance is useful when you first start:

Once you’ve created some content, you may need help adding it to the navigation menu:

And finally, these resources will help you add widgets to your theme’s widget areas:

Settings

To make your site work better for you, it pays to adjust your site settings, in particular permalinks:

Becoming an Advanced User

Once you’ve started creating your first WordPress site or blog, you’ll probably need to learn about more advanced WordPress management. The following resources are more advanced, but still for non-coding users.

Beyond the Blog

WordPress can power much more than blogs. For starters, there are plenty of plugins which will help you make your blog even better, or create just about any type of site you can imagine with WordPress:

If you want to use WordPress as a CMS rather than a blogging platform, you may well need to create custom content types, such as post types, taxonomies and custom fields. These resources will help you:

Site Management

Whenever I run workshops with WordPress users, the topic they want to know about the most is day-to-day site management. Here are some good practices:

You should make sure you keep your WordPress installation and your themes and plugins updated:

It’s likely you’ll also want to learn about SEO so you can drive more traffic to your site:

These resources will help you with keeping your site backed up:

If you want to avoid your site being attacked, you’ll need to learn about security:

And finally as your site gets more traffic, it helps to ensure it performs as well as possible:

Working with Themes and Frameworks

You’ll already be using a theme to power your first site, but as you start developing your skills or building more sites, you might decide you need to use a theme framework:

Alternatively, you might decide to dip your toe into theme customization, either using the Theme Customizer or by writing some code:

Coding Your Own

If you decide you want to build your own themes or plugins, either for client sites or your own, there is a huge range of resources out there to help you learn how to do it. Here’s a couple of useful general resources:

These guides and tutorials will help you create your very first WordPress theme:

Your theme will need to include template tags in order to work properly. These guides will help you get started:

Your theme files will also need to include the loop:

A useful theme will include widget areas so that you can add widgets to your site. These links will help you learn how to create them:

Your theme will also need to include navigation menus:

If you want to add custom template files to your theme, you’ll need to have an understanding of how the theme template hierarchy works:

As your theme development skills advance, you’ll start to add functions to your themes in the functions file. These guides will help you decide when you should do this and learn how:

If you’re planning on letting other people use your theme and want to give them some customization options, adding theme customizer support or creating options screens will do this:

For your themes to work well on mobile devices, you’ll need to learn how to make them responsive:

If you’re working with a framework or want to adapt an existing theme to meet your needs, creating a child theme is the best way to go. These guides will help you start:

Developing Plugins

Most WordPress developers start by building themes, then move on to plugins. These guides will help you create your first plugin:

Two common types of plugin are shortcodes and widgets. Advance your plugin development skills by learning how to create these:

Depending on the specifics of your plugins, you may need to create settings screens for them:

From Blog to CMS

In the section on advanced user skills above I included some resources to help you create custom content without writing code. It’s much better practice to code these instead. These links will help you learn how to create custom post types:

And custom taxonomies:

And finally, creating custom fields to store post metadata:

More Advanced Developer Topics

If you’re aiming to develop a career as a WordPress developer, you’ll need a more in-depth understanding of the WordPress ecosystem. Below I’ve identified resources covering a range of developer topics.

Functions and Hooks

You can’t really do anything interesting with WordPress without understanding functions and action & filter hooks:

The WordPress Database

The database is where all of your content is stored: it pays to have a good understanding of how the database is structured if you’re planning on writing content to it in your plugins or creating custom queries:

Queries

Before you start writing custom queries, make sure you’re aware of the options for doing this and which you should be using:

The WP_Query class is often the best option for creating custom queries. These links will help you use it:

And some alternatives to WP_Query:

WordPress APIs

WordPress comes with no fewer than 11 APIs. I’ve included links to some of them in relevant sections here, but this is where you’ll find a guide to all of them:

Translation

If you’re planning on releasing your code to the public, or you have clients or users working in languages other than your own, it’s important to prepare your code for translation:

Libraries and Third Party Tools

A growing number of WordPress developers use libraries and third party tools to support their WordPress development. Here are some guides to popular ones to get you started:

The topics I’ve covered here for advanced developers are just a small subset of what’s available, and what you need will depend on the specific requirements of your projects. To advance your development skills further, see the list of useful sites at the end of this post.

Professional Development for Clients and Users

So you want to make a living from WordPress? These resources will help you make the step to becoming a WordPress professional:

The first challenge will be to find clients for your services, but there are others who’ve been in the same position, and they’ve shared their tips:

Or you might not want to sell to clients, but instead sell themes, plugins or an online product or service:

Once you’ve found your first project, you’ll need to ensure you have the project management skills to make it a success. These resources will help you manage WordPress projects and use WordPress to help you with project management:

Customizing the WordPress Admin

If you can customize the WordPress admin, it will make your and your clients’ sites more professional and user-friendly. First, the dashboard:

You can also white label the admin screens and brand them to meet your clients’ needs or enhance your own brand identity:

You can also customize the admin menus:

Development Practices

If you adopt best practices in your WordPress development, it will improve the quality of your work and make you more efficient, which will help you make more money. These guides will help you adopt the Don’t Repeat Yourself (DRY) principle in WordPress development:

These developer tools will help you work more effectively:

And finally, some tips to help you manage your client sites after launch:

WordPress Multisite

Developing with Multisite gives you an opportunity to create networks of sites either to host the sites you develop or to sell sites to clients. These links will help you get started:

Running a network of sites is more complex than a single site. At WPUMU DEV we’ve provided plenty of guidance to help you:

If you’re going to use Multisite for profit, these guides will help you:

And finally, it’s useful to know which plugins are most useful with Multisite:

BuddyPress

If your clients need you to create community sites, or you’re setting up one of your own, the best tool for the job is BuddyPress. These guides will help you get started and run your BuddyPress community:

Developing themes or plugins for BuddyPress involves some additional considerations on top of those for a standard WordPress site. These resources will help:

And these BuddyPress themes and plugins will help you create and maintain your BuddyPress community:

Contributing to WordPress and its Community

WordPress is an open source project which relies on contributions from its community of users and developers to develop it and help others to use it. In this section I’ll provide some resources which can help you contribute to WordPress in a way that is in line with your skills and knowledge.

You don’t necessarily need to contribute code to WordPress itself to be able to make a contribution. These guides identify some of the options:

Contributing to Core 

If you have the skills to contribute to the core code or you want to help with testing, here’s how to go about it:

Creating Free Themes and Plugins

As well as contributing to WordPress itself, you could also contribute by developing free themes and plugins, or you could help test themes and plugins that have been submitted. These guides will help you understand what’s involved:

Helping Others to Learn

If you’re not able to contribute code, there are other ways to get involved, such as writing documentation, helping in the support forums or running a local meetup group or even a WordCamp:

And Finally..

As I mentioned at the very beginning of this post, the links I’ve provided are a snapshot of what’s available out there right now. There’s a very good chance that tomorrow someone will publish a killer tutorial or guide which should be in here but can’t be.

So I’d strongly advise that you bookmark some key sites which are updated frequently and will help you develop your WordPress skills and knowledge into the future:

For all WordPress Users and Developers:

For beginners and users:

For developers:

For news about WordPress:

Good luck with your development in WordPress and I hope you find these resources useful!

]]>
http://premium.wpmudev.org/blog/wordpress-career-boosting-resources/feed/ 3
The Secrets to Writing WordPress Posts That Convert http://premium.wpmudev.org/blog/secrets-writing-wordpress-posts-that-convert/ http://premium.wpmudev.org/blog/secrets-writing-wordpress-posts-that-convert/#comments Sun, 23 Nov 2014 13:00:06 +0000 http://premium.wpmudev.org/blog/?p=134193 If you run a business online, having a blog is essential. It’s a quick way to build an online presence for your brand. Regular blogging has the benefit of keeping your site populated with fresh content. And fresh content means an increased likelihood of fresh eyes on your posts. It also means greater opportunities for search engines to index your site’s pages. When that happens, say hello to increased organic traffic!

Building traffic is only one part of the equation. You also need to get your readers to do something once they land on your site. This is usually referred to as conversion. You want readers to complete an action because it will push them further down your sales funnel.

Now, that action will differ depending on what you’re specifically trying to accomplish. Do you want to increase newsletter signups? Or maybe you want to increase sales of a product you’re trying to sell? Regardless, everything you do on your site—or at least on that specific page—should be to encourage visitors to complete this action.

Before we dive into the specifics of how to write blog posts with the direct intent of conversion in mind, let’s take a look at the general conversion process for a moment.

Secrets to writing posts that convert
Our tips for writing posts that convert.

The Sales Funnel

Also known as the conversion funnel, the sales funnel is a set of steps that a prospect takes before they become a paying customer. According to CrazyEgg, this follows a pretty specific pattern.

First, you create your website and all of its content. This includes your social media, ads, press releases, and any other materials that effectively “tell your story” as a brand. These efforts are designed to bring in new prospects to your site. These are the people that click on a link to your site from organic search results, from a link posted on social media or in an ad, or visit your site directly via word of mouth referral.

Once you have “eyeballs” on your site and your content, you can work on getting these people to complete a specific action. Often, a choice method is to set up a “Wall” wherein a prospect must input their email address for access to exclusive content. If your content is compelling (and convincing enough) you should pull in a significant number of people here. People that complete this step are called leads.

From here, you have to convince these leads to actually become customers. This tends to be the hardest part because you have to demonstrate how and why your product or service will benefit them. If you succeed here, you’ll gain a first-time customer, get the chance at creating a repeat customer, and build income. Score!

Obviously, I’ve made some broad generalizations here. But hopefully these general definitions give you a sense of how the conversion process plays into the process of building an online presence for service-oriented businesses, mom and pop shops, e-commerce sites, and everything in between.

Now that you have an understanding of what conversions are and how they fit into the sales funnel, we can move onto some ways you can ensure your blog posts are optimized for conversion.

The following tips apply to writing landing page copy and other forms of copy as well but bloggers can make direct use of them to write and promote posts that motivate readers into action.

Read High-Converting Copy

There’s nothing like learning from the best, right? That’s why it’s so important to spend some time reading examples of copy that has proven itself in the past. There are collections of high-converting copy all over the web but I’ve gathered up a few that I think are particularly helpful to get you started:

Use Keywords Proven to Convert

Have you ever noticed that a lot of the copy out there uses similar phrasing? Or that it tends to feature a similar voice? While creativity has a defined place in copywriting—those Old Spice ads were pretty great, after all—there is an element here that’s decidedly formulaic. I’ll talk about the specifics of that more in a bit. What you should know right now is that some of the best copy out there tends to gravitate to the same keywords.

Why?

Because they work. Plain and simple. There are 5 words that have been found to be the most persuasive in the English language. They include:

  • Free
  • You
  • Because
  • New
  • Instantly

These words are most effective in headlines because they pack a real punch in encouraging your readers to take action. Of course, there are many other words you should think about using, too. For instance, David Ogilvy, copywriter extraordinaire, favors influential words like “quick,” “easy,” “revolutionary,” and “now.”

Using high-converting keywords can mean the difference between writing blog posts that are only so-so and those that truly standout.

Craft a Killer Headline

pen lying on paper
The headlines is your first shot at capturing attention / Source: Jonathan Reyes

You can use some of those great keywords you learned above to craft kick-ass headlines for your blog posts. Headlines have long been a mainstay of advertising. Think of any print ad you’ve ever seen and that bold copy that draws your eye is usually what would be considered the “headline.”

Notice how I said headline copy “draws your eye”? That’s because that is precisely what headline copy is supposed to do. It’s supposed to attract attention. And that’s really important because people don’t read the fine print. Hell, they don’t even read the regular print.

Bite-sized chunks of information are infinitely more digestible that lengthy diatribes. So save your soliloquies for creative writing class and get to the point when writing headlines.

This is even more true online, where attention spans are shorter and people make a regular habit of skimming content. Skimmers will see your headline first and foremost. If that captures their attention, they’ll move onto subheadings, then pictures, then your call-to-action. If you’re lucky, they might take in your bulleted lists, too.

See now why a great headline is so important? It may very well be your one shot at capturing a lead. So don’t blow it! Make it punchy. Make it stand out. But don’t confuse these tips with taking this opportunity to be super creative. Yes, good copywriting and headline writing requires creativity but the best headlines, the ones that have gotten the most consistent conversions, are those that follow a few specific formulas.

CopyBlogger offers a list of 10 headline formulas that have been proven to work time and time again that you might want to check out. A few personal favorites include, “Here is a Method That is Helping [blank] to [blank]” and “[Do something] like [world-class example]”. So, if you filled in the blanks here you might get headlines like, “Here is a Method That is Helping Bloggers to Get More Traffic” and “Blog Like a Famous Advertising Agency.”

It’s About the Benefits, Not the Features

A significant rule of copywriting is to always emphasize how a product or service will benefit a potential customer. Rather than offering a lengthy features list that may or may not have any impact on a site visitor’s impression of you and what you’re offering, strive to answer the question, “So, what does it do for me?”

While this method wasn’t always the most desirable approach, it’s what’s working best in the modern world, especially online where customers already know what features they want. So talk about what your product or service can actually do for your target customer and you’ll make a lot more headway than if you focused on features alone.

Remember AIDA

If you want to follow a tried and true formula to make sure your blog posts and site copy are their most effective, you can use AIDA. The acronym stands for Attention, Interest, Desire, Action and it’s effective because it helps you to focus your writing efforts to appeal directly to your target demographic.

Maybe you run a craft shop on Etsy and support it with a blog on your own domain that features information about your products, your process, etc. Your target market is women in their mid-30s-50s with some disposable income who also like to create handcrafted items. In every post you write, you should strive to capture the readers “Attention.” You can do this by appealing directly to their sensibilities.

Pro-tip: Headlines are the perfect place to accomplish this. Maybe you can focus on the satisfaction of decorating one’s home with handmade items?

From there, you need to maintain “Interest” in the topic at hand. You can do this by offering new information that the reader hasn’t thought of before. Often, using storytelling techniques can work really well. Tell a story about how one woman used handcrafted centerpieces to create the perfect atmosphere for her family’s first Thanksgiving together in years.

Interest naturally leads into “Desire,” which is where you can throw all of the benefits we discussed in the previous section into play. What are the direct and indirect benefits of decorating your home with handmade items? If you have a few previous customers’ testimonials on hand, this is where you make use of them.

Finally, we’ve come to the “Action” portion of AIDA, which is where you lay out your offer (custom-made holiday centerpiece for 50% off) while simultaneously disputing any objections a potential customer might have (I can’t afford this; it’s not a necessity) and introducing scarcity (this offer is only good for X amount of time). As it’s name would suggest, you should close out this section of AIDA with a call-to-action. Tell your blog readers what step(s) you want them to take next. No ifs, ands, or buts!

Now Is Not the Time to be Complicated

You’ve heard of the K.I.S.S. method, right? You know, “Keep It Simple Stupid”? Well that definitely applies to writing conversion-worthy blog posts. Now is not the time to bust out the thesaurus and use every complex vocabulary word you’ve ever learned. A major component of writing copy that converts is to appeal to your target demographic by using the language they use.

Speaking above people’s heads—whether intentionally or unintentionally—can make your prospects feel alienated from your products or services at best. At worst, highfalutin language can feel condescending. And that’s definitely not an impression you want to make.

Instead of loading up on those $10 words, think about how you can convey your ideas in the simplest way possible. How can you phrase something to be direct and to-the-point? How can you educate and inform your audience without resorting to verbal acrobatics?

Load Up Your Posts with Facts and Stats

Whenever you write blog posts, it’s important to make them a combination of informative and entertaining. Obviously, a list of statistics isn’t going to be all that entertaining, but if you can present hard facts and numbers in an engaging way, you’ll be totally golden.

Just make sure that the information you include is actually relevant to the subject at hand. If it’s not, you stand to bore your readers and possibly even confuse them. Which, as you can imagine, are not good things!

Use Previous Clients’ or Customers’ Words

Testimonials can make or break your copy. Seriously. The best blog posts and the best copy often feature words that come directly from previous customers’ mouths. These quotes add weight to your claims.

testimonials by WooThemes

I mean, think about it. What sounds better to you? A blog post from a company owner’s perspective about why they think their products are great? Or a blog post interview that features direct quotes from a previous customer on the same topic? The second one, right? And that’s precisely the point. The words of your customers carry infinitely more weight than any fluffy sales copy you could muster.

If you’re running your site on WordPress, you might want to check out plugins like Testimonials Showcase, Testimonials by WooThemes, and Viavi WP Testimonials to really make your customers’ words stand out.

Ask for the Conversion with a Call-to-Action

If you want a high-converting blog, you need to make sure your posts actually ask for the conversion. I know it can seem awkward to ask people who’ve taken time out of their day to read your content to do something further but you can’t expect them to read your mind either. The greatest copy in the world is going to be largely ineffective if you don’t include a compelling call-to-action!

I think Unbounce describes the good ol’ CTA the best:

Your call-to-action represents the tipping point between bounce and conversion. When you ask someone to do something online, they have to go through your call-to-action in order to do it – regardless of whether you’re asking them to download a PDF, fill out a form, buy a product, or even just click through to another page.

I like this “tipping point” image because it so accurately conveys just how pivotal a moment the CTA presents. Your copy could be flowing, engaging, and all-around awesome. But once the reader hits the tipping point, the call-to-action, she’s faced with a decision. Even changing just one word in your CTA can make the difference between converting and not. Talk about pressure!

The real key is to convey a combination of value and relevance in your CTAs. According to Unbounce, a button that said “Get Instant Access Now,” wasn’t as effective as one that said “Read Full Essay Now,” for an essay writing services website because while it did convey value it wasn’t specific enough. Basically, don’t leave any room for guessing here.

This actually leads right into our next section…

Test, Test, Test

Always A/B test your copy. You’ll want to create variations for all aspects of any given post that is designed to convert. I realize that not every single blog post you write is going to be designed with conversion in mind. And that’s fine. In fact, if every post were conversion optimized, it would get a bit tedious and likely appear formulaic.

WordPress Calls to Action

But for those posts you do wish to use for conversion, it’s vital that you conduct thorough testing to ensure each component is working in your favor. To do this, you’ll need to create multiple versions of your post(s) that include slight variations. You can do this using a WordPress A/B testing plugin like Convert Experiments by Yoast or WordPress Calls to Action.

A few areas you should pay particular attention to include the headline, images, captions, and call-to-action. You might also wish to play around with the color scheme, button positioning, and overall text formatting to see what gets the most engagement.

Once you find a version that works for you, don’t assume that your work is done, however. Testing in this manner should be an ongoing thing. When you find a version that works, run with it then come up with another version to test alongside it. Conversion optimization is a task that’s never completed.

Don’t Forget SEO

Writing conversion-oriented blog posts is quite a bit different than writing standard web content. But that doesn’t mean you can ignore SEO. Since your blog posts are to appear on the web, SEO is just as important as ever. No, that doesn’t mean you need to worry about keyword density anymore, but it does mean that you need to:

  • Do some keyword research before you start writing.
  • Use longtail keywords to add relevancy to your content.
  • Share your content on social media sites.
  • Make it a point to write lengthy content with real value.

You might want to use an SEO plugin to keep tabs on some of the finer details like title tags, meta descriptions, and other important on-page elements. I really like Infinite SEO and WordPress SEO by Yoast but All-in-One SEO Pack is a great choice, too.

And Don’t Forget You’re Writing for the Web!

Just like you need to remember the importance of SEO, you also need to remember the conventions of writing for the Internet. That is, don’t let the fact that you’re writing copy designed to convert distract you from standard web content conventions. It’s pretty basic stuff but bears repeating:

  • Keep paragraphs short
  • Use bulleted lists
  • Use sub headers to break up relevant sections of text.
  • Use short sentences and avoid complex vocabulary—keep it simple!
  • Link to other pages and posts on your site.
  • Link to relevant external sources

Wrapping Up

Sometimes writing blog posts is about more than just stringing together a few sentences. Rather, it’s about bringing your readers on a journey with you and before they’re tempted to leave your site and pursue other interests, convincing them to take action.

Writing conversion-worthy blog posts isn’t easy but I hope you at least now have a better sense of how to accomplish this feat. Hint: it’s going to take some practice and that’s totally okay.

Do you make conversion a goal of your blog posts? If so, how do you do it? What elements have you found to be the most effective? I’d love to hear your feedback!

Image source: 401(K) 2012, icon made by Icons8 from www.flaticon.com is licensed under CC BY 3.0.

]]>
http://premium.wpmudev.org/blog/secrets-writing-wordpress-posts-that-convert/feed/ 3
Make Your Images POP With Super Easy and Sexy CSS Styling http://premium.wpmudev.org/blog/make-your-images-pop-with-super-easy-and-sexy-css-styling/ http://premium.wpmudev.org/blog/make-your-images-pop-with-super-easy-and-sexy-css-styling/#comments Sat, 22 Nov 2014 13:00:40 +0000 http://premium.wpmudev.org/blog/?p=134067 I’m sure you already have an idea of how important images are to the success of your website.

But when it comes to boosting engagement (and ultimately your bottom line), it’s not just about including images on your site, it’s about what images you include and how you present them.

In this post I want to tackle one important piece of that puzzle: the presentation.

WordPress comes pre-packaged with simple means of styling images with CSS. You have the power to create different effects for the various CSS classes that WordPress automatically assigns to images on your site. (If it seems like I’ve started talking in a foreign language, don’t worry, I’ll explain everything in detail later in the article.)

In today’s post, I’m going to start by delving into the reasons why images are so important to your site, then move on to cover the default CSS classes that WordPress applies to images, and finally demonstrate how you can use CSS to apply custom styles to your images.

Why Images Are So Important for Websites

What better way to explain how beneficial images are to blogs than by proving it with an image?

Images Infographic
Courtesy of MDG Advertising

Things get even more interesting when you get down to the biology of how we process information. Consider for example that 90 percent of information transmitted to the brain is visual, and 40% of people respond better to visual information that plain text (source: Zabisco).

But let’s be honest: I don’t need to throw statistics at you to make my point. You know from your own habits that visually appealing websites and blogs are far more likely to grab your attention than a mass of text. Images add color, appeal and intrigue. They fire off a bunch of reactions in our brain before we’ve even had a chance to start reading.

Put simply, if you’re not including compelling, relevant imagery within your blog posts, you are nowhere near close to making the most of your content. Going the extra mile when it comes to including images in your blog posts and presenting them well can make all the difference to engagement, traffic and sales.

A WordPress CSS Crash Course

The WordPress core developers are only too aware of the importance of images for websites, which is why they afford theme developers (and theme tweakers) a great deal of power and flexibility in determining how images are presented.

That power and flexibility is offered in the form of a number of CSS classes. But before we go any further, let’s take a moment to give you an understanding of what CSS is and how you can use it.

CSS stands for Cascading Style Sheets: a markup language that is used to determine how web pages look. CSS is combined with HTML (Hyper Text Markup Language), which is the markup language used to define the semantic structure of a website. If this doesn’t make much sense to you, don’t sweat it – it’s more supplementary information than necessary.

CSS is a simple language, once you get your head around it. In terms of being able to alter the appearance and placement of images, you’ll be able to pick up and work with the code I include in this article with relative ease.

Here’s an example of a CSS code snippet pertaining to the appearance of a particular image type in WordPress:

.alignright {
	border: 1px solid #c5c5c5;
	float: right;
	margin: 0 0 10px 10px;
	padding: 3px;
}

The .alignright text is a CSS class (identifiable as a class by the period that precedes its name). In this case, .alignright is a class that WordPress assigns to any image which is selected within the WordPress backend to be aligned to the right of the content:

Image Alignment

Various declarations (such as border and padding) can be applied to a CSS class, which are ultimately applied to any HTML element that the class in question has been assigned to.

In the example above, any image in WordPress that has been aligned to the right (via the text editor) will have the .alignright class assigned to it, and thus will inherit the styling applied to that class. The image will ‘float’ to the right, have a little margin to stop text from running into it, a gray border around it, and a little padding to separate the border from the image edge.

That’ll all make a lot more sense with a visual representation:

Image aligned right

There are plenty more declarations that can be added to a CSS class; we’ll have some fun with them shortly.

How to Add Custom CSS to WordPress

WordPress themes come with their own CSS ‘stylesheets’, which are files filled with CSS markup like in the example above. While there are many ways to add your own custom CSS to your website, editing an existing theme’s CSS stylesheet is not the way to go. Your hard work could be overwritten the next time the theme is updated.

The cleanest and most future-proof method is to create your own simple WordPress “child theme” with its own CSS stylesheet. The CSS stylesheet within your child theme’s directory will override any matching styles within the “parent” theme’s stylesheet.

Creating a child theme may sound like a somewhat daunting exercise, but is easy enough if you’re familiar with FTP. If you want to go down this road, check out the tutorial on the WordPress Codex.

If you’re looking for something more straightforward, I have two plugin suggestions:

  1. The Custom CSS module within Jetpack: Ideal if you already use Jetpack on your site.
  2. Simple Custom CSS: If you don’t already use Jetpack (and have no need for its varied functionality), this is a more lightweight option.

Whichever option you take, adding custom CSS to WordPress will be as simple as editing the custom CSS file that has been generated (by you or one of the plugins).

The WordPress Default CSS Image Classes

With all of that out of the way, let’s get down to the juicy stuff: WordPress’ default image CSS classes.

There are four default classes you can use to change the appearance of images in WordPress:

  • .aligncenter
  • .alignleft
  • .alignright
  • .alignnone

I’m sure you can figure out what types of images these classes are assigned to.

Every single image that you add to your website via the TinyMCE text editor on the post/page screens will have one of these classes assigned to it, which means that you have the power to style all of these images as you see fit.

To style a particular image type, all you need to do is follow the format you’ve already seen in the example above:

.class-name {
	property: value;
	property: value;
	property: value;
}

Important: When an image has a caption, WordPress assigns one of the above classes to a div that surrounds the image, rather than the image itself. Tackling this particular issue is outside the scope of this post, but is something to bear in mind as you experiment. I recommend that you test your chosen effects with captioned images to see how things look.

With that said, let’s move onto the fun part: styling your images!

Simple Image Styling With WordPress

When it comes to adding simple stylistic effects to your images in WordPress, there are five common CSS properties:

  1. background
  2. border
  3. float
  4. margin
  5. padding

To gain a complete understanding of how these properties affect the appearance of an image (or more accurately, the appearance of the ‘frame’ in which the image is placed), we need to consider the CSS ‘box model':

Courtesy of W3.org
Courtesy of W3.org

When it comes to styling images, the image itself is the “content.” That image is then surrounded by padding, borders and margins; all of which you can define. Images can also be ‘floated’, which for the purposes of this tutorial simply means aligned. Your ‘float’ options are left, right and none. (Centering an image is a little more complicated; we’ll get onto that shortly.)

Let’s consider a simple example to demonstrate how these properties can be used. First, here’s an image with the .alignright class assigned to it, without any CSS markup:

Image in WordPress (No CSS)

Now let’s add some simple CSS markup:

.alignright {
	background: gray;
	border: 3px solid black;
	float: right;
	margin: 10px;
	padding: 3px;
}

Here’s the end effect:

Image With CSS

You can probably decipher what we have done here. The image has now been “floated” (i.e. aligned) to the right, so that the text wraps around it. We added a little bit of padding, which has been given a gray background. We applied a thick black border which appears around the padding. Finally, A 10px margin creates some room between the image and text.

There’s a lot that you can do with the five selectors above alone. If you want to explore them further, here’s a comprehensive resource for each one:

I promised a solution for centering images too. For reasons that are beyond the scope of this tutorial, CSS does not simply allow you to use float: center; (i.e. the value does not exist). Instead, you have to define the image as a block element, apply margin: 0 auto; and define a width for the image. You can read more about this technique here. (I’ll also provide an example of the markup used to create a centered image below.)

More Examples of What You Can Do With Image CSS in WordPress

Now you have a better understanding of the most common CSS properties you can use, here are a few examples to give you some inspiration.

Let’s start with some padding and a gray background to give our images a frame:

.alignleft {
	background: #dbdbdb;
	float: left;
	margin: 0 10px 5px 0;
	padding: 5px;
}

That markup results in this:

CSS align left

Let’s explore what’s happened here:

  • I used an HTML hex color for the background. These color codes give you practically limitless flexibility in picking colors for your website.
  • Because the image I used is a transparent PNG, the background color has filled up all the available space not used within the image file.
  • I’ve used four values within the margin property to set different margins for each side of the image.

Let’s try something else. Instead of giving our images a background color, let’s set them in a simple border to delineate them from the content. Here’s the markup:

.alignright {
	border: 1px solid #000099;
	float: right;
	margin: 0 0 10px 10px;
	padding: 3px;
}

As you can see, we’ve played around with the margin property values to account for the image alignment, reduced the padding and added a 1px solid border. Here’s the end result:

CSS align right

Finally, let’s created a centered image and give it a thick gray border. Here’s the markup:

.aligncenter {
	border: 5px solid #dbdbdb;
	display: block;
	margin: 0 auto;
	width: 300px;
}

And the end result:

CSS align center

As you can see, it is possible to completely change the placement and appearance of an image in WordPress using CSS alone.

In reality we’ve only scratched the surface here; there is much more that you can do. (If you’re interested in discovering more, I’ve supplied some useful resources for further learning below.)

What About Existing Styles?

If you’re using a WordPress theme of any real quality, the developer will have already added styles to each of the default WordPress image classes. At the very least she will have aligned each image class appropriately.

Beyond that, her choices will have been entirely subjective, and you now have the power to override their styling effects. Any CSS markup you enter – either on your child theme’s stylesheet or via a plugin – will take precedence over the theme’s default CSS. You’re in control.

The Sky’s the Limit

In reading this article, I also hope that you are inspired to experiment with your own custom CSS stylings. I didn’t want to delve too deep into more advanced selectors in this tutorial, but there is a lot more you can do with CSS than I’ve covered here.

If you’re keen to explore more advanced effects (such as shadows, rounding and rotation), there are a huge number of free online resources that can teach you more about CSS. My personal recommendations are:

  • Mozilla Developer Network: Loved amongst the web developer community.
  • W3 Schools: Hated by many “serious” web developers, but there’s no refuting its depth and breadth of information. Just bear in mind that it may not always be 100% correct and/or up-to-date.
  • WordPress Codex: Learn more about how WordPress and CSS come together.

If you have any questions, please don’t hesitate to fire away in the comments section below!

Photo Credit: Simon Pow, PicJumbo.

]]>
http://premium.wpmudev.org/blog/make-your-images-pop-with-super-easy-and-sexy-css-styling/feed/ 0
Make Your WordPress Site BuddyPress-Ready http://premium.wpmudev.org/blog/make-your-wordpress-site-buddypress-ready/ http://premium.wpmudev.org/blog/make-your-wordpress-site-buddypress-ready/#comments Fri, 21 Nov 2014 13:00:49 +0000 http://premium.wpmudev.org/blog/?p=134322 BuddyPress is a great tool for adding social networking to your WordPress site, but what if your site’s theme wasn’t built with BuddyPress in mind? Even worse, what if you have a regular WordPress theme that doesn’t play well with BuddyPress at all?

Missing menus, pages that aren’t displaying properly, perhaps even a sidebar or two that just look completely wrong… I’ll pause here to let you gasp. If this has been the case for any sites you’ve built, don’t panic! Read on.

Up until last year, you had to use BuddyPress-specific themes, which meant you could only use BuddyPress with just any old theme. BuddyPress 1.7 changed all that so you could add the plugin to any theme. Well, almost any theme.

In today’s post we’re going to work with the BuddyPress default templates, as well as create a child theme to help you get your site looking and working exactly how you want it, while also allowing BuddyPress to function perfectly.

Keep in mind that every theme is unique and is usually different in one or many ways. Ultimately, it will be up to you to pick and choose the appropriate parts of your original theme to use with the new files you’ll be creating.

BuddyPress
Make your WordPress Site BuddyPress-ready.

Before You Get Started

First thing’s first – back up your site.

It’s always a good idea to be on the safe side and make a backup of your site in case something bad happens.

Now is a good time to use your favorite backup tool or plugin. If you don’t have a favorite, why not use our Snapshot plugin? The great thing about Snapshot is that it’s not only easy to use but you can restore your entire site if anything happens. Not only does it back up posts and pages, it also makes backups of media files and every table of your database for every plugin and theme. Plus, you can create as many backups of your site as I want and schedule regular backups.

With your site safely backed up, let’s get on with making your site BuddyPress-ready.

1. Create a Child Theme

We’ve looked at how to create a WordPress child theme before, but in this instance we’ll need to do things a little different.

Creating a child theme for BuddyPress will protect any changes you make to your original theme in the event that your theme, or WordPress itself, is updated. If you update, your changes will be wiped, and you’ll have to go back and redo everything. Creating a child theme will prevent that from happening, and will simultaneously preserve your original theme.

Firstly, head over to the BuddyPress.org website download the latest version of BuddyPress.

Next, open up your WordPress install, either through your file manager or through your favorite FTP client. Go to your current theme’s folder and navigate to wp-content > Themes.

Head over to the copy of the BuddyPress plugin you just downloaded and extract the files to your computer. In the extracted files, navigate to bp-templates > bp-legacy, and find the “buddypress” file.

"bp-legacy" folder in the BuddyPress Plugin
The “buddypress” folder in the BuddyPress plugin version 2.1.1 is located under “bp-templates”, then “bp-legacy”.

Upload it into your theme’s folder. Before you do this, take a second to scan the pre-existing folders and make sure there isn’t already a folder there with the same name. It’s not very likely that one like this already exists, but it’s better to be on the safe side before continuing to the next step.

The BuddyPress plugin will search for PHP, and CSS files from the folder you created first, before searching your regular theme’s files, so long as you name it either “buddypress”, or “community”. Keeping your updated files in your new folder will ensure your style changes are adhered to, and quickly.

Once uploaded, you will have successfully created a BuddyPress child theme from your current one.

2. Copy, Paste and Print

Open up the folder for the BuddyPress plugin you downloaded earlier, and in the same location as the “buddypress” folder (bb-templates > bp-legacy), you will see a “css” folder and a “js” folder, as well as a “buddypress-functions.php” file. Among these are the default code files you need to run BuddyPress in your current theme.

From here, open each of the files and compare them with your current theme’s style sheet and page files. You will need to edit the files in the BuddyPress folder you created to include the necessary code in order to make your site work with BuddyPress.

Any remaining files that you don’t need to edit can be safely deleted from the folder you created. Just for good measure, make sure you keep all the original files in case something goes wrong in the future.

You will need to pay special attention to your theme’s style sheet to make sure you are able to achieve the look you want. You’ll also need to look over the files in the “buddypress” folder you uploaded earlier.

The BuddyPress css file located under bp-templates > bp-legacy > css
The “buddypress.css” file is the one you want to compare to your current theme’s “style.css” file. Don’t be confused by the different file names.

You may or may not need to change some or all of your files. It all depends on what your current theme is lacking.

Special hint: In addition to the style sheet, if you want your BuddyPress pages to be structured like the pages you already have in place, you’ll need to edit the following files to get them as close to your vision as possible:

  • buddypress > activity > single > home.php
  • buddypress > activity > index.php
  • buddypress > blogs > index.php
  • buddypress > forums > index.php
  • buddypress > groups > index.php
  • buddypress > members > index.php
  • buddypress > members > activate.php
  • buddypress > members > register.php

This is the trickiest step, but when you compare the files and begin to understand the structure and what’s missing in your new buddypress files, you’ll know that half your work is done.

For example, let’s say you have a page template in your theme that allows for a sidebar on the right. You would need to open the template file which allows for the sidebar, and then find the content area as in the snippet example below:

This is a snippet from the appropriate file in the theme I am using, so your code may not necessarily look the same.

I know this is where I want my BuddyPress content to be, so all I need to do is copy all the code from one of the BuddyPress index pages and paste is where I have indicated in the snippet above.

Finally, I’ll save it the file as the BuddyPress index page I want to replace, in the folder I created for the child theme. Now all that’s left to do is to change all the index files in the “buddypress” folder where I want the sidebar on the right to appear, and save them. After that, my files will be BuddyPress-ready, and just the way I want them.

Final Thoughts

If you haven’t already noticed, you will need a bit of experience in PHP and CSS to really make this work, but you only need to know a little to get by just fine. The information I’ve given you here will be enough to set a solid foundation for getting your theme just right.

It might be easier for you to just change your theme to one that is BuddyPress-compatible, but if you’re in love with your current theme and you don’t want to change it, and you want it to work well with BuddyPress, then these steps will help you get there.

What do you think would suit you best in this kind of situation? Sticking with the theme you love and editing it for BuddyPress, or picking a new BuddyPress-compatible theme? Let us know your thoughts in the comments below.

]]>
http://premium.wpmudev.org/blog/make-your-wordpress-site-buddypress-ready/feed/ 0
How To Build WordPress Widgets Like A Pro http://premium.wpmudev.org/blog/how-to-build-wordpress-widgets-like-a-pro/ http://premium.wpmudev.org/blog/how-to-build-wordpress-widgets-like-a-pro/#comments Thu, 20 Nov 2014 13:00:23 +0000 http://premium.wpmudev.org/blog/?p=134156 WordPress widgets seem to be shortcode’s poor cousins. Perhaps it’s because they are a little more “black box”, a little trickier to code or thought of simply as a sidebar component.

However the prevalence of drag-and-drop builders is freeing widgets from the confines of the sidebar and turning them into an increasingly crucial tool in the WordPress site building process.

Learning how to build your own WordPress widgets is going to enable you to create sites that are quick to build and easy to manage.

Post featured image
Building custom widgets is well within the grasp of even beginner WordPress coders

The WordPress Codex widget page starts with the following line:

WordPress Widgets add content and features to your Sidebars.

Still perfectly true but that tends to sell widgets a little short as they can and do act as the primary building block for many site design tools such as Site Origin’s Page Builder, Beaver Builder and the Ultimatum framework.

Whilst the array of widgets is huge, they can’t possibly cover every requirement and so learning to build your widgets is going to be an enormous help when building professional websites that are easy to use for both you and your clients.

In this post, we’ll take a 3-step process from building the world’s simplest widget to a fairly complicated widget that integrates with the media library with a few hints and tips thrown in along the way for good measure.

Some familiarity with PHP will be useful, as will some front-end coding skills but certainly you don’t have to be an expert developer.

Okay, let’s start with the Hello World widget.

Say Hello To The World’s Simplest Widget

Since WordPress 2.8, building widgets has been a matter of extending WordPress’ own widget class, WP_Widget, resulting in your custom widget only having to focus on 4 main functions:

  1. Initialisation (__construct) – handles actions to take when the widget is first created such as enqueueing specific javascript or stylesheets in the output
  2. Front-end display (widget) – handles the generation of the widget’s HTML output
  3. Back-end form (form) – handles the generation of the form controls that make up the widgets edit interface in the Admin interface
  4. Update (update) – handles the form submission from the back-end form, updating stored data as necessary

To add your custom widget to WordPress is a simple matter of wrapping your custom widget class in a standard plugin file along with a call to register it.

Let’s have a look at an example:

As you can see, the file uses the standard plugin header and includes just the custom widget class (My_Widget) and a call to the register_widget function that has been hooked to the widgets_init action.

The result is something like this:

The back-end form and the front-end output for our simple widget
Say “Hello” to the world’s simplest widget

The back-end interface is achieved by outputting a single textbox form control in the form function. Notice how the control’s id and name attributes are generated using the get_field_id and get_field_name functions provided by the base widget class.

Existing values for controls are held in the $instance argument.

When the form is submitted, by clicking Save, the update function is used to pre-process the data before it is saved.

All pretty simple and, let’s be honest, pretty useless, so let’s take a look at a slightly more complicated and more useful example.

Now For Something Useful

Working with custom post types inevitably creates a need for a custom widget.

In this scenario, we are going to build a widget that displays the thumbnail, title and excerpt for a story custom post type. The widget will provide a dropdown list of published stories to select from as well as providing a setting to automatically choose the most recently published.

The back-end form and the front-end display look something like this:

The back-end form and the front-end display of a widget to list the featured image, title and excerpt of a custom post type
Outputting details of a custom post type is a typical custom widget scenario

The widget back-end form still looks pretty simple and indeed all we’ve done is replaced the title textbox control with a select control. The built-in WordPress function get_posts is used to build a list of story post type titles.

You’ll notice in the form function that a Most Recent option is hardcoded with a value of 0 – this will kick-off slightly different processing in the front-end display, widget, function.

If Most Recent has been selected then the widget function will grab the most recently published story post type (again using get_posts) otherwise it will pull in the post selected from the widget select control.

If a story has been found then a custom-sized thumbnail, title, excerpt and read more link are output.

A simple but useful example as displaying the content of custom post types is a common use case for a custom widget.

But now, let’s ramp it up and get a little more sophisticated with a widget with multiple controls that interacts with the media library to allow image and video selection.

Ramping It Up

I recently wrote an article about building engaging stories with WordPress.

The approach I describe is based on the Page Builder plugin from Site Origin, a tool that uses widgets to place content on a page. In this use case, if you want to make it easier and quicker for authors to add sophisticated content to a story then a custom widget is the way to go.

We’re going to look at how to build a widget that allows an author to create the title page from that article (a title image over a background video with a text title and static image background as fall-back).

Screenshot of a post being edited via Page Builder with the Title Page Widget details
Widgets are often the building blocks for drag-and-drop page and theme builders

Now even if this widget is of no interest to you (perhaps your eyes involuntarily start rolling at the mention of long-form) stick with me because I’m going show you some useful techniques such as:

  • integrating with the media library to allow selection of a specific media type (i.e. image only, video only)
  • abstracting the front-end output to a template file so it can be overridden by a theme
  • adding styling for the back-end form

Okay, back to the widget. Here’s the back-end form:

Screenshot of the widget interface overlayed with an image and a video selection dialog
A more sophisticated interface with image and video selection

This is a little more sophisticated than our previous single control back-end forms. (By the way, these screenshots are taken from the larger display generated when using the widget with the Page Builder plugin.)

There are 4 controls in the form, the first is for specifying a text title, the other 3 are for specifying a title image, a background video and a background image.

All the controls are textboxes, so a url can be directly entered for the images and videos but each also has a button that is hooked up to open the media library and allow the selection of a previously loaded media item, or the uploading of a new item.

Let’s step through the four main widget functions, __construct, widget, form and update and see how this more complex widget works.

__construct : Setting Up

This widget requires the media library (client-side) files as well as its own javascript to provide the image and video selection. To ensure that these files are included when generating the widget interface a hook is added to the sidebar_admin_setup action.

The hook’s function adds the WordPress media library files via the wp_enqueue_media function, then registers the custom script, ensuring that jQuery and the media files are loaded first.

Finally, the hook function adds a custom CSS file which contains styling for the widget back-end form.

widget : Generating The Front-End Display

The first thing you’ll notice here is that there’s no HTML. That’s because it’s been abstracted out to the tpw_template.php file, an approach I came across whilst checking out the beautifully coded Image Widget plugin.

Whilst this makes the widget code easier to read and maintain, the major advantage of this approach, and the reason why you should consider it for any plugin that generates front-end HTML, is that it offers the flexibility to override the template.

And providing that flexibility couldn’t be simpler. All that’s required is using the locate_template function with the template name to check for an override in the active theme’s directory and then include the template.

The template itself is simply there to output the required HTML. I’ve tried to make it bit more useful so that if a background video is specified it will add a source for each format that it finds in the specified directory. This saves having to specify the alternative sources in the widget interface.

form : Handling the Back-End Form

This is predominantly about outputting the HTML for the form. Just like in the simple and useful widgets, get_field_id and get_field_name are used when creating the 4 textbox controls.

Interacting With The Media Library Dialog

When you want to allow a user to specify a media item it’s obviously much better to allow them to use the media library dialog to select an existing item or upload a new one rather than have them cut and paste a url into the textbox.

Each of the media input controls has a button attached that, on clicking, calls a custom javascript function to open the dialog using the following parameters:

  • dialog_title – overrides the title at the top of the dialog
  • button_text – overrides the text on the “save” button
  • library_type – which media are allowed to be selected (image or video or blank for any media)
  • preview_id – each media control has an associated div to allow the previewing of the selected media item
  • control_id – the control that is to be updated with the url of the selected media item

The javascript function has 2 major components: one to open the media dialog and one to handle the selection of a media item. The open is a just a call to wp.media with the dialog_title, button_text, and library_type settings. For this implementation it is always assumed that only 1 file can be selected (multiple is therefore always false).

The select function grabs the url of the selected item and assigns it as a value of the relevant control. It also generates the HTML for the preview (img or video element) which is then appended to the preview element so that the author can immediately see their choice.

The Joys Of Custom Widgets

Whether you are using widgets in a sidebar or as a building block in a drag and drop builder, it’s almost inevitable that at some point in a site build you are going to find that you need, and cannot find, a widget that performs a certain task.

Building custom widgets to meet that need, and allow flexibility such as template overriding, is easier than you might think and certainly within reach of even the most inexperienced code tinkerer.

No excuses, then, for not creating your own library of custom widgets to help you create WordPress sites that are quick to build and easy to manage.

Download the complete title page widget code.

]]>
http://premium.wpmudev.org/blog/how-to-build-wordpress-widgets-like-a-pro/feed/ 2
How To Create An Awesome Newsletter Signup Popup For Your WordPress Site http://premium.wpmudev.org/blog/how-to-create-an-awesome-newsletter-signup-popup-for-your-wordpress-site/ http://premium.wpmudev.org/blog/how-to-create-an-awesome-newsletter-signup-popup-for-your-wordpress-site/#comments Wed, 19 Nov 2014 16:30:22 +0000 http://premium.wpmudev.org/blog/?p=134485 When it comes to newsletter signups, simply putting a form in a sidebar widget doesn’t cut it. You need to get on the front foot and get your signup form in the face of your visitors.

You need a popup. And not just any old popup. You need an awesome popup that is bold, eye-catching with the kind of entrance that makes everyone in a room stop talking and pay attention.

Here’s how.

Screenshot of the Elegant Themes popup
Elegant Themes newsletter subscription popup is just so…elegant

We’re not too proud on this blog to point out when a competitor does something well: Elegant Themes, we love your newsletter signup popup. From the images to the fonts to the ta-da inspired entry, it grabs your attention without being ultra-annoying.

Chances are that it also converts (like to confirm, ET?) which, when we stop obsessing about the visual niceties, is the bottom line, isn’t it?

So, let’s walkthrough how you can add an ET-style popup to your site, complete with an ajaxy Mailchimp subscription form and a room-stopping entrance.

Building An Awesome Newsletter Signup Popup

This solution is based on a couple of WPMU Dev plugins: PopUp Pro and Mailchimp Integration. If you are WPMU Dev member then download and install them either from their Project pages or via the WPMU Dev dashboard in your WordPress admin interface.

Most of the effort is in creating a custom style for the popup. The Mailchimp Integration plugin simply provides a shortcode that can be added to the body of the popup via a TinyMCE button but we’ll cover all this later.

The first step, after installing the plugins is to configure the Mailchimp Integration plugin.

Configure Mailchimp Integration

You’ll need a Mailchimp API key, so jump into your Mailchimp account and go to Account > Extras > API Keys. If you don’t already have a key listed then click on Create A Key.

When you have a key listed, copy the API Key and then head back to your WordPress site and in the admin interface go to Settings > Mailchimp.

Screenshot of the settings page of the Mailchimp Integration plugin
Insert your Mailchimp API key and select a mailing list

Paste your Mailchimp API Key into the form and click Save Changes which will validate your API Key. Once validated select your mailing list and whether you want members of your site automatically added to that list.

With Mailchimp set up, now we need to create the popup.

Create The Signup Popup

Activating the PopUp Pro plugin adds a new top-level item, Popup to your WordPress admin menu: click on it and then on Add New.

In the edit form, add a PopUp Name and in PopUp Contents add a Heading and Subheading. We are going to embed the Mailchimp signup form in the popup via a handy button in the visual editor’s toolbar which will help us build a shortcode.

Click on the Mailchimp logo (the monkey in a hat) in the Main PopUp Content toolbar and you’ll see this dialog:

Screenshot of the Mailchimp form dialog
Adding the Mailchimp subscribe form to the popup is easy with this dialog

Don’t worry about a Form Title but do add text for:

  1. Text displayed when a user subscribes
  2. Text displayed in the submit button

For this popup we are not worried about First and Last Name (we’ll actually be hiding them later) so don’t check those boxes.

Click on OK and you should find the shortcode has been added to the Main PopUp Content. Complete the content entry by adding an image for the PopUp Feature Image (doesn’t matter whether it is left or right aligned).

Your PopUp Contents should look something like this:

Screenshot of the Popup Contents pane
The completed contents of our popup

Click on Save.

Whilst you can preview the popup in the admin interface, I think it’s better to test it out for real on a test page on the site itself.

Go to Pages > Add New, create a new page called Popup Test and add some default text. Click on Publish.

Back to PopUps, edit the Elegant Newsletter Signup and scroll down to Displaying Conditions. Switch on On specific url and then enter the full url of your test page.

Screenshot of the display conditions with on specific url set and the url of the test page specified.
Setting up a test page allows us to test our popup in the wild

Change the popup status to active and click on Save. Before we take a first look at the popup, there’s one important step to complete.

IMPORTANT! Choosing The Correct Load Method

PopUp Pro’s default method for loading a popup is via AJAX. For the majority of cases this is fine but for some, including this scenario, the AJAX nature of the embedded form conflicts with PopUp Pro’s own handling of forms.

Fortunately, solving the problem is just a case of changing the load method.

Click on the PopUp > Settings and in PopUp Loading Method change Load PopUp using to Page Footer. Click on Save All Changes.

Whenever you have problems with a shortcode in a popup not working as you would expect it’s worth changing the load method: Page Footer is usually the best bet.

The Settings page also contains a handy matrix of popular shortcodes and their compatibility with the various load methods, so be sure to check this out also.

OK, time to test, so navigate to your popup test page. Likely you’ll see something like this:

Screenshot of a popup using the minimal style
Well, the style is called minimal…

A bit underwhelming and nothing like the Elegant Themes popup. We need a popup makeover.

Applying A Popup Makeover With A Custom Style

The best way to give a popup a makeover is to create a custom popup style. Not only does this give far more flexibility but it also makes the style available for other popups as well.

You can create your custom style in the styles folder of the popup plugin but doing so runs the risk that it will be deleted when the plugin is updated. A safer, and better, approach is to put the custom popup style in your active theme and then use a custom filter to add it to the list of popup styles.

Download the custom styles files to your active directory and click on the zip to expand it. Your folder directory should be /wp-content/themes/[your active theme/popup-custom-styles-master/.

Next, go to your functions.php and add the following code:

You should now find a new option, Elegant, has been added to the select list of styles in the Appearance pane on the edit popup screen.

Select it, click on Save and go back and refresh your test page.

Screenshot of the popup using the custom style
Now, that’s an elegant popup. And trust me, it makes a grand entrance.

Making Some Structural Changes

In the popup/elegant folder in your active theme you’ll find three files:

  1. style.css – holds all the CSS for your custom style
  2. style.php – this file is not actually required and can be deleted
  3. template.php – this builds the HTML output for the popup

To make the styling a little easier, the template.php file has been modified slightly to move the output of the PopUp Feature Image out of the content section of the popup

There’s also a small piece of javascript that has been added to the bottom of the HTML output. This just adds a placeholder attribute to the email input box on the Mailchimp form so that we can remove the label.

It’s All About Style

The real work is done, though, in the style.css. I found it easier to remove all the existing style clauses that contain #messagebox and start from scratch and you’ll likely find the same.

It’s worth noting that this style gets injected into the HTML as text – that is the file is not linked. This is because the #messagebox text is actually replaced with a random ID that is assigned to the popover at generation time to enable multiple popovers to coexist.

Rather than stepping through the entire CSS, let’s just look at some of the more interesting bits.

  1. 2 @import statements add the Goudy Bookletter Google Font and animate.css which provides the entrance animation
  2. The .wdpu-msg has a padding of 50px to allow the image to hang outside the body of the popup
  3. The X to close the popup is added to the link using the :after pseudo-selector and the HTML entity value
  4. The name input controls on the Mailchimp form are hidden using the nth-of-type pseudo-selector as the containing divs don’t have unique ids

Making A Grand Entrance

Popups by default are something of a surprise to the visitor, after all they are not the result of a user action, they just appear.

Having some sort of animation can make the appearance of a popup seem more natural and less abrupt. Perhaps even slightly amusing, although that might be pushing it.

The Animate.css library provides a plethora of animations many of which can be easily applied to our popup. I’ve put the animate.css file in the theme root folder to make it easier to import (it becomes theme independent).

IMPORTANT! If using animate.css via an @import statement be sure to remove or move the comments at the top of the file, otherwise it won’t work.

With the all the animate.css animations now available it’s a case of assigning the required animation to the popup when it’s activated.

Whilst there’s no actual class that’s toggled inline with the popup’s status, the body element does have the has-popup class added and removed in line with the popup being opened and closed, so we can use that to target our popup and add an entrance animation.

This CSS clause causes the popup to drop down from the top of the screen and bounce on its final position:

It’s worth going through the available animations on Animate.css to see which you like: it’s then a simple case of changing the animation name in the CSS.

Extending The Solution

We’ve got a very usable custom style now, that not only gives us a great looking popup but also some great animation on initialization with the option to chose dozens more.

That said it’s a solution that could be improved and the first port of call would be to build a custom plugin that:

  1. adds the custom style (so remove from functions)
  2. enqueues the animate.css file (no need to move the comments)

Of course, once you get the hang of this you’ll likely also want to start creating your own styles and play with the entrance animations.

In the meantime, though, you’ll have a great looking popup that visitors to your site won’t be able to ignore.

]]>
http://premium.wpmudev.org/blog/how-to-create-an-awesome-newsletter-signup-popup-for-your-wordpress-site/feed/ 5
Are You Avoiding These Common WordPress Code Issues? http://premium.wpmudev.org/blog/common-wordpress-code-issues/ http://premium.wpmudev.org/blog/common-wordpress-code-issues/#comments Wed, 19 Nov 2014 13:00:13 +0000 http://premium.wpmudev.org/blog/?p=134024 There are many articles out there about fixing WordPress code errors and many more on mistakes to avoid as WordPress users.

In today’s article, I thought it would be helpful to take a look at some coding issues which work, but would be considered inefficient, bad code or bad practice.

I’ll focus on some of the most common problems I’ve seen around and some errors which I’m ashamed to say I’ve committed in the past myself.

A cleaner sign
Let’s take our mistakes to the cleaners!

1. Not Enqueueing Google Fonts

Google fonts are added to a theme or plugin either by hardcoding them, or by allowing users to choose them. If you allow users to choose the fonts, the code behind it can get a bit complex and you may forget that adding a link in the header is not the way forward. Enqueueing them is just as easy as any other stylesheet:

Note that the fonts should only be included on pages they are actually used on. See the next section for more information.

2. Enqueueing Resources Where They Are Not Needed

Another common practice is to use the enqueues like the example above, but without regard to when they are actually needed.

On the front-end you will probably want to use your fonts on all pages, but on the admin side you may only be using them on your plugin’s setting page.

Let’s take a look at some ways to target enqueued assets better:

Front-End Targeting

On the user-facing side of your website, template tags are your friend. The Twenty Fourteen default WordPress theme gives us a great example when enqueueing the comment reply script, which gives us the inline comment form:

This script is loaded only when three conditions are met at once: We must be on a single post, comments must be open, and the thread_comments must not be empty. This makes sure that the script is only used when it is truly needed.

Another example I like to mention as often as possible is how you can enqueue scripts and styles for shortcodes. If you have assets which are only needed when the shortcode is actually displayed you can register the assets as usual, but only enqueue them in the shortcode. Here’s a quick example:

Admin Targeting

Admin assets can be targeted in two ways. Functions hooked into admin_enqueue_script receive the file name of the current screen you are viewing.

Hook is an extremely confusing name for this parameter, but I have left it in since the WordPress Codex uses this convention.

This is a good way to go about things if you want to target a specific page, but what if you want to target the edit page for a single page (and not a post)? Both instances would be edit.php with our example above. In these cases you can use the get_current_screen() function.

This gives you a lot more info about where you are so you can target pages more effectively. To target only edit pages for the page post type, you could use the following:

3. Using The init Hooks For Everything

init and admin_init is the first hook available after WordPress has loaded but headers haven’t been sent. As such, they are the go-to solution for all our pre-header needs. From legitimate uses of adding post types and text domains, to unnecessary upgrade routines and functionality specific things like enqueuing and adding menus, developers use them for everything.

One great way to determine what hook you should use is to look at the codex. If the codex creates admin menus by hooking into admin_init (it doesn’t), then go for it. Since it’s apparent that admin menus use a dedicated admin_menu, that is what should be used.

Often your features will work no matter which pre-header hook you choose. This doesn’t mean you are writing good code. If a developer wants to modify your code or you come back a year later you will have no idea why, your remove_action() call isn’t working.

4. Too Many Options

If you are creating a plugin and you end up adding a great number of entires into the options table, you are doing something wrong. The solution here is to save all your options as an array. Remember, you don’t have to worry about saving your data as a string, WordPress takes care of all that behind the scenes.

The only time you should use multiple options is if you have sets of options which really aren’t needed all the time. If you only need some options on an admin options panel, you could create a separate options field for that and specifying that it should not be auto-loaded.

5. Reinventing The Wheel

If something seems like there should be a function for it, more often than not, there is. I’ve seen people shy away from using WP_Query because it pulls so much data – they just need IDs. So they end up writing something like this:

This has the drawback of being completely un-modifiable by hooks as well as doing something WordPress can do on its own:

This can be applied to many, many use cases. From pagination to uploading files and obfuscating email address, WordPress has functions for tons of things.

Part of the reason people try to reinvent the wheel is not knowing a function is there. This is fine, after a few Google searches these problems are solved. The other reason is optimization. The urge to “return only IDs instead of post data” drives people to try and write more efficient code.

What people forget is that in 99 percent of cases convention should win over configuration. WordPress is by no means perfect, but it is well-optimized. The speed gain from most of these ventures is negligible compared to the loss of code clarity and standardization.

6. Database Clutter

This has to do with making sure that your plugin cleans up after itself. If your plugin is deleted it should leave no trace of its existence in the file system or in the database. Make sure to remove all options and other data  you’ve created.

There are two ways to go: The uninstall hook or the inclusion of uninstall.php. Since uninstall.php is recommended, I will not go into detail about the hook itself. To read more about this, take a look at Plugin Developers – Use Uninstall.php Please at WP Tavern.

7. Not Using Child Themes

This is one of my pet peeves as it has caused me a lot of headaches with users before. Even if you are changing a single line of CSS or you are just increasing the excerpt size of a downloaded theme, use a child theme.

Child themes provide the only way of being able to update a theme after you’ve modified it (without loosing your changes). Child themes will always use the files of their parent theme, unless that file is specified inside the child theme.

One notable exception is the functions.php file, which is loaded before the parent’s functions file to ensure it can overwrite it.

Child themes are so easy to create. If you want to modify Twenty Fourteen, just create a directory in your themes folder, name it anything you want and add a stylesheet with the following content:

Create a functions.php and use enqueuing to pull the stylesheet of the parent:

8. Not Supporting Child Themes

On the flip side of the coin are themes which have poor child theme support. There are roughly two things you need to do here: Make sure to use get_stylesheet_directory_url() instead of get_template_directory_url() where appropriate, and wrap overwritable functions in “if” statements.

The above 2-in-1 example shows how you can make sure child themes can re-define your functions and how the usage of get_stylesheet_directory_url() is helpful. Otherwise WordPress would always look for the image in the parent directory.

9. Incorrect/Missing Language Support

In this day and age of our interconnected society, there’s just not reason not to make your work multilingual. It’s so easy to do, all you need is to use the language functions and make sure WordPress uses the language files if they exist.

To make a string translatable simply wrap it in the __() function or the _e() function if you’re echoing it, and make sure to add your text domain:

For more information on how translation works and how you can generate the language files, take a look at the l18n for WordPress Developers article in the Codex.

The List Goes On?

There are a lot of little tidbits WordPress users – including myself – do wrong. If you have any pet peeves of your own, or you know of something major I’ve left out please do let us know in the comments.

Image Credit: Pete Zarria from Flickr.

]]>
http://premium.wpmudev.org/blog/common-wordpress-code-issues/feed/ 3
Five for the Future: How to Help Out in the WordPress Support Forums http://premium.wpmudev.org/blog/help-wordpress-support-forums/ http://premium.wpmudev.org/blog/help-wordpress-support-forums/#comments Tue, 18 Nov 2014 13:00:51 +0000 http://premium.wpmudev.org/blog/?p=134419 You probably remember the hullabaloo a few months ago around Matt Mullenweg’s rally to the greater WordPress community to create a more sustainable vision for the future of the open source project.

Automattic’s founder suggested that businesses revolving around WordPress (either webhosts, developers, designers, etc.) contribute 5 percent of their workforce to helping WordPress core. While some in the WordPress community criticized his sentiments, others embraced the call to action, including us to the point we’re currently trialling and training seven new support staff members, two of whom will be assigned to work full-time in the WordPress Support Forums.

For freelancers – engineers, designers, webmasters, and copywriters whose careers rely on the advancement of WordPress – there’s no better way to sharpen your skills and get to know the WordPress community than to get into the thick of it. If a regular 40-hour work week is assumed, that’s two hours a week you can spend helping others out of technical jams, learning new skills and networking, all while supporting the open source project.

So today we’re inviting you to join us in our Five for the Future. I’m going to share with you how you can spend your 5 percent – your two hours a week – hanging out in the support forums to make the software that makes your living possible even better.

WordPress Support Forums.
WordPress Support Forums.

Just in case you’ve never had reason to visit, the support forums at WordPress.org get thousands of posts every day on a vast variety of subjects. Users have a range of understanding, too, from complete beginner to developer-level. Sometimes they just need a quick CSS fix. Sometimes their site’s been compromised or they’re dealing with a critical error. The support team is all volunteer, and hop on to any question they can help with, as quickly as they can.

Getting started as a support volunteer is as simple as logging in with your WordPress.org username and password, finding a thread you can answer, and offering your genuine assistance. But before you dive in, here are some helpful tips and useful resources you’ll want in your WordPress toolbox.

When in Doubt, Consult the Handbook

The Documentation team have put together a great Support Handbook that covers the nitty gritty of being a support volunteer. In addition to having a basic familiarity with WordPress, support volunteers are expected to treat community members with respect and compassion. Forum members offering support, after all, become representative of the greater WordPress community for the users they’re helping.

No replies.
Support queries in the WordPress forums that haven’t received replies.

Searching for support requests in need of a response is as simple as making use of the forum filtering options. For quick reference, posts with no responses are found here and unresolved posts can be found here.

Spend some time on the forums, and you’ll soon start to notice that it’s the quick and easy fixes that are typically resolved first, so when you find yourself with a few extra minutes to spare, pick your favorite forum and look through the older posts to see if someone has been waiting for help with a more complex issue. It may take more brainpower and eat up more of your time to assist with these more complicated problems, but again it’s a good way to make a big impact with your volunteer contribution. If you come across a problem you think you can help with, by all means, add your two cents.

Be Thoughtful About Your Communications

Many people posting problems on the support forums are frustrated and confused at best, under deadline and losing money at worst. They may be writing in a panicked tone (or as panicked a tone as can convey across a text format), but that doesn’t mean you need to respond in-kind. In fact, you should respond with kindness instead. Show some understanding and compassion. Not only will you be putting your best foot forward on behalf of the WordPress community, you may actually help diffuse another person’s anxiety. Begin by acknowledging the problem and expressing some empathy. It’s as simple as, “Hi there! I’m sorry you’re having a hard time with this slider. Have you tried…”

When You Offer Assistance, Show and Tell

If you show a user how to resolve their problem and take the time to explain WHY this fix works, you’ll not only help in the moment, but you’re expanding the knowledge base of the original poster and anyone else who searches the forums with the same issue.

If you offer code snippets, make sure you cite any sources you used and explain why this is would work. If you find additional tutorials, tricks, or hacks the poster should know about, make sure you include those links. Reference the Codex or the Developer Resource hub if possible.

Follow Up and Make Sure the Issue is Resolved

After you’ve offered your input, don’t just vanish from the thread. Circle around on your posts to make sure everything worked out alright. This may seem like a small gesture, but it goes a long way in establishing rapport, and just because you’re offering free support, doesn’t mean it should or has to be quick and dirty or cold and impersonal. Make sure you check the option for update notification on posts you reply to or check your profile to see new activity on threads you’ve posted in.

support1
Creating a new comment in a thread.

Be Open to the Experience and Be Willing to Jump in and Try

If you’ve never worked in technical or customer support, the notion that you are even capable of pitching in may be foreign. Or perhaps you’re intimidated by more advanced users on the forums. This is a common experience. Tim Bowers, head of support here at WPMU DEV, explains:

“I remember the feeling I had on the first ticket I went to handle. I’d done this a thousand times before at WPMU DEV; in fact, more than a thousand. I’d also worked for many years on other systems and given support there, too, but yet I still felt nervous. I worried I wouldn’t be good enough. There are some pretty big names in the WordPress community and to work in their shadow can be scary regardless of your origins. But that insecurity may be exactly what keeps many bright and budding developers and enthusiasts from getting involved in the community.”

While some people may relate to Tim’s early experiences, he advises our support team tackling the WordPress forums that, “You’re going to get things wrong, but that’s important. The people you’re helping in the forums are not the only ones there to learn and grow – you are ,too.”

Other Ways to Help on the Forums

In addition to offering per case support for WordPress questions, you could spend some time perusing posts about third-party commercial themes and plugins, and kindly directing the user to the appropriate support channels.

For example, if you notice someone in the WordPress.org forums asking about a WPMU DEV plugin, you might respond that commercial plugins aren’t supported here, but they can find all the help they need by contacting our support team instead.

Flagging posts #modlook that are blatantly spammy, hostile, or otherwise inappropriate for the mods is another way you can contribute. You don’t need to respond to a post to tag it, and it helps forum moderators do their job with greater efficiency.

I’m Not a Developer. Can I Still be Helpful?

Yes, absolutely. If there is a particular plugin, theme, or topic you’re especially knowledgeable about, you can search for that tag in the forums. CSS ninjas this way and HTML 5 to the left. Do you happen to know a lot about SEO? Your skills could be useful here.

The Support Handbook also offers canned responses to common issues, as well as Break/Fix lessons that volunteers can go through in order to learn how certain common problems present and how to fix them, step by step. These in of themselves are a great learning tool for rookie developers and dabblers. If you’re relatively new to the WordPress world, there’s no better way to familiarize yourself with the product than to take it apart and put it back together.

And if helping in the forums is not at all your cup of tea, there are a ton of other ways you can get involved, including helping out with documentation and tutorials.

What NOT to Do On the Forums

Don’t be snarky. Don’t be sarcastic. Don’t be mean or belittle other users. Don’t use it as a forum for self-promotion. At all. Any of that stuff will likely get your post flagged, and the mods do a top-notch job of keeping the culture of the forums as positive as possible.

Join Us – Help Out in the WordPress Support Forums

Is is worth helping out in the forums? For the experience alone, for building WordPress community and furthering the open source agenda, my humble opinion is that yes, it is.

In terms of learning and expanding your WordPress skillset, helping on the forums will give you the experience of looking at other sites and debugging their problems.

If you can spare 5 percent of your time, your contribution should both strengthen your knowledge and advance the overarching WordPress community.

By the way, if you have a WPMU DEV membership, our support stars are happy to answer any of your questions in our forums as well, whether it’s about our plugins or themes or some other.

Are you on the WordPress Support Forums? Do you have any tips for helping out?

]]>
http://premium.wpmudev.org/blog/help-wordpress-support-forums/feed/ 1
The Easy Way To Create Content Grids in WordPress http://premium.wpmudev.org/blog/create-content-grids-wordpress/ http://premium.wpmudev.org/blog/create-content-grids-wordpress/#comments Sat, 15 Nov 2014 13:00:00 +0000 http://premium.wpmudev.org/blog/?p=133962 CSS grids in design are very popular these days. While some people will argue semantics when it comes to grids, there’s no denying the ease-of-use they bring to the table. Even more so when you give this power to end users.

By using a grid shortcode, users can create arbitrary layouts in WordPress – a freedom that would have been much-envied 5-6 years ago. There are many column plugins in the WordPress Plugin Repository, which will allow you to take advantage of this functionality right now.

In this Weekend WordPress Project, we’ll build our own shortcode grid to cement our understanding, and to get a grasp of how it all works.

Grid
Create a shortcode so you can easily add CSS grids to your website.

Shortcodes 101

Shortcodes in general are pretty easy to create. All we need to do is register a function that outputs the intended content using the add_shortcode() function. Let’s a look at a basic example:

When the code above is placed into a theme’s functions.php file or a plugin, it will enable users to add preformatted code to their content like this:

The shortcode looks for occurrences of the shortcode and then replaces its content with what we specify. In this case we are simply wrapping some HTML tags around it.

The final output will look like the following snippet. Bonus points for figuring out what’s in the array!

By adding parameters to our shortcode, we can let users modify the behavior. In this case we may want to allow users to specify the code type so we can format the section accordingly:

This more-or-less complete example shows that the shortcode function receives the shortcode attributes as the first argument and the content as the second. By using the shortcode_atts() function to merge the given and the default values we can create some powerful stuff.

The user can now specify a language – it will be added as a class to the outermost tag.


Our Base Grid

Writing the CSS for a grid is not really our problem – we will be focusing on creating the shortcode only. Due to this, we will be using the popular Foundation framework’s grid. To get started we need to know the HTML of a grid:

Notice that each row of columns is wrapped in a div with the class of row. Next, there are four classes used: small-n, medium-n, large-n and columns. The columns class is used on all columns, while the others depend on what you are doing.

Foundation is mobile-first, so small-n is the only required class. If no other size classes are given the small class defines all sizes. If a medium size is given as well then small screens will use the size defined by the small class, medium and up will use the medium class. The default column count for a Foundation grid is 12. This means that the column count within a row should add up to 12.

One complication of creating a grid is that we need to know where it starts and ends. The easiest way to do this is to create two shortcodes. We will create the columns as a column shortcode and we will create a dedicated row shortcode which will serve to wrap them all up.

Technically, we could detect the columns using some advanced regular expressions, but this would not be a WordPress-standard way of doing things and it would be much more prone to error.

The Shortcode Plan

When dealing with shortcodes it’s best to write out the final text you would use in the editor as if the shortcode were already in place. This will help guide us in adding the attributes and coding the functionality. Based on our example above:

There are two things to note here: I haven’t specified the small version because this will usually be 12 in any case. While it isn’t obvious here, I also want to make sure that you only have to specify the bare minimum.

If you have a column which is 12 width on small devices and 6 on medium and large, you should only need to specify the medium size. The small size will default to 12 and the large size will default to the medium size.

The Row Shortcode

This one is pretty simple. The row shortcode will simply wrap the content within it in a div which has the row class.

The only unfamiliar thing here should be do_shortcode(). We need to add this to make sure that shortcodes in the content are converted. If we don’t add this function our column shortcodes wouldn’t be run through our function, they would show up as-is, square brackets and all.

The Column Shortcode

This one is a bit more difficult, mainly due to the the fallback structure. In a nutshell: each screen size falls back on the previous one and small defaults to 12.

I’ve also added the do_shortcode() function here. Users may want to add galleries, or other plugin functionality to their columns so it makes sense to allow for it.

Column example

The Line Break Issue

I cheated a bit in the previous screenshot. If you followed along until now, your shortcode will not work as advertised. If you copy-pasted everything, chances are that your columns will be all under one another.

The reason is that that we have placed a line break between shortcodes which WordPress outputs as a literal line break. If you take a look at the HTML there is nothing wrong with what we did, WordPress just pokes it’s nose into it.

The easiest solution is to put start and end column tags on the same line. While this works it can hardly be called elegant or user friendly.

The only way around this is to use a regular expression. This is usually frowned upon by the WordPress community but in some cases the ends justify the means. Also, if we’ve careful we can make sure nothing else is affected, only our own shortcode.

There are two things we need to know before we write some regular expressions. If there is one line break between our shortcodes WordPress will place a line break at the end of the line. If there are two or more line break, WordPress will place an opening paragraph tag at the beginning of the line and a closing paragraph tag at the end. Let’s modify the row shortcode to take care of this issue.

Testing Our Grid

Our grid shortcode now works perfectly but there’s no CSS to back it up, so let’s change that. Head on over to the Foundation download page and deselect all components except the grid.

Download the resulting package and unzip it. Go into the CSS folder within Foundation and copy foundation.min.css to your website’s theme’s folder. Note that if you are working with a third party theme you should use a child theme instead.

Once your file is in place you should enqueue it from within your theme’s or child theme’s functions file:

This is great for testing, but in production we could make this a bit leaner. First of all, if your theme uses Foundation anyway, there is really no need for this step. If your theme does not use Foundation you are only using the grid when a user creates columns. So why enqueue it on every page?

The solution is to register it in the functions file but enqueue it in shortcode call.

What Else?

Shortcodes are pretty easy to create and allow for some neat shortcuts and functionality. Our shortcode could be improved by adding support for centered columns, offset columns and even block grids.

If you have a better way of creating columns in WordPress we’d love to hear about it, let us know in the comments!

Image credit: Ed Dunens.

]]>
http://premium.wpmudev.org/blog/create-content-grids-wordpress/feed/ 3
Stop Printing Ugly WordPress Pages With This Easy Fix http://premium.wpmudev.org/blog/stop-printing-ugly-wordpress-pages-heres-how-to-fix-it/ http://premium.wpmudev.org/blog/stop-printing-ugly-wordpress-pages-heres-how-to-fix-it/#comments Fri, 14 Nov 2014 13:00:00 +0000 http://premium.wpmudev.org/blog/?p=133774 As a WordPress designer, you fret and worry about how your pages and your posts look – on the screen. That’s what it’s all about, right? You look at that new travel-story website you just finished, and it looks great in all the current web browsers. It’s fabulous. The client loves you.

A week later, you’re sitting at your computer when the client calls and says, “Hey, our customers are trying to print stuff off that new website you made for us, and everything is a mess – you have to fix that – now!!!” The client continues her rant – throwing in a few expletives about WordPress – while you (in a total panic) click over to the client’s site, and don’t see anything wrong. The site looks great.

Then you (for the first time ever) choose your browser’s print command, your printer starts whirring and clacking, and by the time you slide over to your printer it’s already printed out three sheets of paper when it should have just been one sheet. You open another page, and this one prints eight sheets of paper. What?!?

Page prints too many pages.
This web page should have printed in just one page, but it turned into three pages with lots of extraneous junk.

Your client is right (aren’t they always?). The carefully arranged menu doesn’t even look like a menu, a photo is encroaching onto some of the text, the links have ugly underlines, page elements are out of order – there’s stuff that shouldn’t even be there – it’s the ugliest WordPress page you’ve ever seen.

Your head spins as you try to figure out what’s wrong and what to do, as the enraged client continues yelling into the phone – her voice getting higher and louder. “My customers don’t want all that junk on the print-out. They just want to read the story!” Suddenly, her voice morphs into a loud buzzing sound, and you realize it’s your alarm clock. You slowly open your eyes, blink a few times, and turn off the alarm. The phone call was just a nightmare – everything is OK – it’s time to start your day.

But now you’re worried, so as soon as you get to the office, you head over to the WPMU DEV blog. Surely someone there can help with this printing problem before it happens in real life – and yes, sure enough – you’ve stumbled onto this article about ugly WordPress print-outs and what to do about them.

Do People Actually Print Web Pages?

Web pages are ethereal. They live on a web server. We go to a URL, look at the page, and when we close the page, it’s gone. There’s no hard copy. It’s all just a bunch of computer code that disappears from the screen as soon as the page is closed. That’s the way it is for most web pages, including the vast majority of WordPress pages. That’s the intended end use for most web pages. The screen.

But sometimes, more often than you might think, people want to print a web page. Maybe it’s a long story, and they want to read it later, while relaxing on the couch. Or it might be a step-by-step instruction sheet they want to have sitting on their desk while looking at something else on the screen. Or they just want a tangible copy of a page for whatever reason. Even though many of us do 90 percent of our reading on a screen, lots of people still prefer toner (or ink) on paper.

Why WordPress Can’t Print

Don’t worry. There’s nothing wrong with WordPress. Most web pages, no matter how they were created, look bad when printed. And, typically, the more advanced the page-building process, the worse the print-outs look. In the early days, when most pages were just simple HTML, print-outs were bad, but not necessarily horrible. But when CSS came along, and designers got the ability to position page elements in new and exciting ways on the screen, the quality of print-outs got even worse, because printers can’t always understand CSS code. Printers don’t think in terms like float, and they don’t necessarily know what 15px means.

Although print software tries hard, in many cases it just gives up, and tells the printer to just print everything without regard to positioning or style. This is where things get ugly.

To make matters even worse, there are lots of things on web pages that readers don’t want or need to see: When reading a page on paper, who needs a menu at the top of the page? Who needs a menu at the side of the page? Who needs underlined links? And lots of that other stuff in the sidebar and/or the footer – who needs it?

Not only is much of that content useless on a printed page, it’s a huge waste of paper, ink, or toner. It’s bad for the environment, and just doesn’t make sense anyway to have all that junk print out.

Fix It With WordPress Print Styles

Even if you’re not much of a coder, I’m going to assume that you have some familiarity with the concept of Cascading Style Sheets (CSS). You know that designers control the look and the positioning of their content by assigning CSS rules to all the elements on their pages. And you know that there are rules (styles) that specify the size of the type, the color of the type, the position of a sidebar, etc.

These rules are written in a file called a stylesheet, and web browsers read and interpret these rules in order to display the page on the screen. Many websites, including WordPress sites, use more than one stylesheet to control a single page. And it’s not uncommon for stylesheets to include thousands of lines of code. The result, when everything is working correctly, is a great-looking page.

Everybody Knows That

Yes, but did you know that you can create special rules that only apply when it’s time to print the page? These special rules are known as print styles, and designers can insert these print styles into a separate stylesheet or just add them to the main stylesheet of the page – resulting in great-looking print-outs that should make any client happy.

What I’m going to show you here won’t be complicated, so even if you’re not into coding, don’t panic. I’m not saying this is easy, but it’s not difficult either. As long as you follow these instructions carefully, you can create your own print styles, and learn a bit about CSS, all without ruining your website. As with most things, there is more than one way to do this, but the method I’ll show you is fairly basic, and involves simple edits to just two files in your WordPress theme. Here we go:

Initial Preparation

The Print Preview view.
If you would rather not print all those pages, an option is to choose the Print command in your browser to see how many pages will print and what they will look like.
Page looks good on screen.
The page looks good on screen, but not so good in print.

Open a page on your website, print the page, and see how it looks. If it looks great, then don’t worry. This probably means that the developer of your theme has already added some print styles, so you can quit reading right now. Nothing more for you to do. But if you don’t like the way the page looks, follow along and find out how to make the page look better.

Depending on your anxiety level, you might want have a current backup of your WordPress website. This is something you should always have anyway, so if you don’t have one, go get one.

Using an FTP program, as shown below, check your active theme folder on the web server to be sure there’s not already a file named print.css (or similar file name). If this file is present, the developer of your theme has already created a separate stylesheet file for print styles, but maybe it wasn’t enough to make the page look the way you wanted. In most cases, you won’t find a separate print stylesheet, so let’s continue.

View of theme directory.
As expected, in this view of the theme directory, there’s no print style sheet, but you can see the header.php file and the style.css file you’ll be working on.

Telling WordPress To Look for Print Styles

Creating print styles isn’t going to work unless we first let WordPress know about those print styles, which means we have to make a minor edit to our theme’s header.php file. With your FTP program, find and download the header.php file to your computer. Copy a backup of the file to a safe place in case something goes wrong and you need to get an un-altered version of this file.

Now you should have two copies of the header.php file on your computer – so open one of the header.php files in a text editor. This doesn’t mean a text program like Word – this means a real text editor that won’t add extraneous codes to your header.php file while you’re editing. Notepad++ is a popular text editor for Windows users, and I prefer TextWrangler on my Macintosh. Both are easy to find on the Internet, and are free of charge.

Head section of header.php file.
Near the top of the header.php file is where you’ll find the head section.

The part of the code you want to edit is usually found in the head section near the top of the header.php file, as shown in the graphic above. So locate that area of the file.

The code for the media styles
The code for the media styles.

Scroll down several lines, and find the media=”screen” code, as shown above.

After adding the code for the print stylesheet.
After adding the code for the print stylesheet.

The media=”screen” code refers to styles that apply to the screen view, so now you’re going to add a small bit of code that tells the web browser to look for the print styles when it’s time to print the page: Enter these few characters , print into the code, so the code looks like the example in the image above.

Save the header.php file, and upload it to replace the existing header.php file on the web server. Don’t change the name of the file.

If you’re paranoid as I am, you can refresh the web page you’re currently looking at, and see if it looks OK – and check a few more pages just to be sure before continuing.

Take an X-Ray of the Page

Now it’s time to identify the page elements you want to hide while printing the page. Likely candidates are the menu(s), sidebar content, footer, comments, and comment form. Fortunately, the structure of most WordPress themes makes these elements fairly easy to identify in the CSS code.

The best way I’ve found to identify these items and figure out where they are in the CSS code is by using the built-in file-analysis features of web browsers or by using browser plugins.

For example, if you’re using the Chrome web browser, control-click (Macintosh) or right-click (Windows) on one of the elements you want to hide during printing, and choose Inspect Element. If you’re using a different browser, you might have to use a browser add-on, such as my personal favorite, Firebug.

Whichever method you use, a window will open that lets you see your page in normal view, along with a detailed code view that lets you determine the CSS ID for the element in question.

The Firebug browser plugin shows us that the area we chose to inspect has the #sidebar ID.
The Firebug browser plugin shows us that the area we chose to inspect has the #sidebar ID.

As you can see in the graphic above, when we chose to have Firebug inspect the sidebar area (which we want to hide in a print-out), Firebug showed us that the ID for the sidebar is #sidebar. If we had inspected the footer area of the page, Firebug probably would have shown us the ID #footer. Go through your page, and make a list of the IDs for all the items you want to hide during printing. A typical list of IDs you would look for might be something like #header, #content, #comments, #sidebar, #footer, and #commentForm.

Creating the New Print Styles

Now it’s time to alter the CSS file. Just as you did with the header.php file, download the style.css file to your computer, make a backup of the file, and open another version of the file so you can add the new print styles.

View of the print styles.
At this point, the new print styles should look something like this. Be sure to insert this at the bottom of the style sheet.

Scroll to the bottom of the file, enter a couple of returns, and then write a comment to denote the beginning of your new code section. Your comment should look something like this: /*////// PrintStylesAddedx102414 ///////////*/ .

The number of slash marks isn’t important – that’s just so we can easily find this new section if we want to alter the file again later. The important part of this is the /* at the opening of the comment, and the */ at the close of the comment. This comment will only be visible when you’re working in the style.css file, and helps you remember later what you added and when you added it – the web browser will ignore it.

Directly under the comment, start adding your new CSS code, starting with #media print } . This refers to the change you made in the header.php file so the browser knows to use these new print styles for printing.

Next, you might want to be sure you have a white background and black type for printing, and no big margins – so the next line of code would be body { background:white; color:black; margin:0 ) .

Now, here’s the fun part where you get to hide all the parts you don’t want to see on the printed page: Refer to your list of items, and choose to either show them or hide them by writing rules like these: #header { display:none } #content { display:block } #comments { display:none } #sidebar { display:none } #footer { display: none } #comment form { display:none }

As you might guess, display:none means that entire element will be hidden at print time, and display:block means OK to print.

When you’re finished, save the style.css file, and upload it to the web server, replacing the existing file.

At this point, you should test your work. Refresh the web page you’re currently looking at, and see if it looks OK, then check another page. Everything should look just as it looked before, because the changes you’ve made to the two files should only affect things at print time.

Assuming everything is OK, try printing a page, and see if your new print styles are working as expected. If things have gone OK, your print-out should only include the things you wanted to see at print time. The annoying and unnecessary sections of the page should be absent.

All the new print styles are here now.
All the new print styles are here now, denoting which areas of the page to show and to hide, and also some treatments for the text and page background.

If everything is OK so far, you might decide to tweak a few more things to get the print-out looking even better. To do this, add a few more lines of code just below the code you just added.

For example, you might add a body tag with new rules to improve the look of the text. You might want to change the font size from pixels to points, since printers are more likely to understand points than pixels. Another good thing might be to change the font family to a serif font, such as Times or Georgia, since these fonts will probably be easier to read than the original sans-serif fonts when reading on paper. And you might want to change the color of the type to black. Take a look at the graphic above to see an example.

Some designers, especially those who are more into CSS, get really creative, and add code to substitute higher-resolution image files for the print-out, change positioning of elements, etc. But for most of us, basic changes as I’ve just shown you are enough to do the job.

The print preview shows that only one page will print.
After uploading the stylesheet with the new print styles, the print preview shows that only one page will print, which is just what you want.

Save the style.css file, upload it to the web server, and see how everything looks. Then run a print test. If you’ve done everything right, you should see major improvements in the look (and usefulness) of your print-outs. All the useless stuff, such as the menu, the sidebar, the footer, comments, etc. should be gone.

Keep in mind that you don’t have to waste tons of paper, ink, or toner while testing and tweaking your print styles. Just check the print preview screen, as shown above, until you have everything the way you want – and then print to paper.

All that shows on the page now is the headline, the photo, and the main text of the page – and that’s exactly what the client wanted. With just a little bit of study and a little work, you now have everything under control.

If you don't mind not having backups, you can edit the files in the WordPress Editor window.
If you don’t mind not having backups, you can edit the files in the WordPress Editor window.

If you don’t like the idea of downloading files from the web server, keeping backup files, etc., you can always try editing these two files from inside the dashboard of your WordPress site.

Go to Dashboard > Appearance > Editor, identify the correct files, and start editing. Caution: This method may look and seem easier, but I don’t like to work this way because I know how easy it is to make a mistake that could result in crashing my WordPress site – and having backup files on my computer makes me feel a lot safer when playing with code.

What Have You Learned?

Now you’ve seen how to keep the screen version of your website looking exactly as you intended while adding some simple code to get great-looking print-outs that everyone will find useful.

Use the method that seems best for you, and be careful. Follow these instructions, and printing ugly WordPress pages should be a thing of the past – with no more nightmares – because the client’s site will now print like a dream.

What does your website look like when it’s printed out? Have you thought about using print styles? Let us know in the comments below.

]]>
http://premium.wpmudev.org/blog/stop-printing-ugly-wordpress-pages-heres-how-to-fix-it/feed/ 2