How to Use Divi Leads to Measure Your Portfolio Site’s Effectiveness

Welcome to post 5 of 5 in our miniseries How to Create a Simple and Effective Portfolio Website with Divi. In this series we’ll cover everything you need to do in order to create your own portfolio website from scratch. We’ll also go over how to use our A/B testing system Divi Leads to make sure your site is effective at attracting new clients.


In this post we’ll be taking the minimal portfolio website that we build over the last four days and setting up some tests to help maximize it’s effectiveness. To do this we’ll be using Divi’s built-in A/B testing system Divi Leads.

Let’s get started!

Creating a Thank You Page

There are two things we need to do before jumping into the tests. The first of them is create a thank you page. A while back I showed the community how to track the effectiveness of an entire sales funnel using Divi Leads’ off-page goal tracking shortcode. We’ll be doing some tests like that in this post as well and they require a thank you page.

It doesn’t matter what your thank you page looks like, just so long as it gets the message across and is it’s own unique page.

thank-you-page

Once you’ve created your own thank you page, go into your contact form modules on your about/contact page and open up the general settings tab.

contact-form-redirect

Make sure to set the link for your new thank you page as the redirect link people are sent to after they submit a message. Do this for both design variants of your about/contact page.

Saving All Our Designs to the Divi Library

The second thing that needs to be done before we begin testing is to save all of our layouts and sections to the Divi Library. This will prevent us from accidentally deleting a design we like when ending a split test. It will also help us simplify our pages, keeping only the content we want visible on the page.

Saving the Full Homepage Layout and It’s Sections

If you followed along with our first two posts, “How to Create a Minimal Portfolio Homepage with Divi” and “Using Filters, Hero Sections, and CTA’s to Expand a Minimal Portfolio Homepage” then you will have a “master” homepage layout that looks like the image below (when viewed on the backend).

homepage-master-builder-layout

Saving the Full Page “Master” Layout:

Click the “Save to Library” button in the top left-hand corner of the Divi Builder. Label the layout “Minimal Portfolio Master Homepage Layout” and click the blue save button.

Saving the Homepage Sections:

section-right-click-save-to-library

Right-click on the blue of the top section and click “Save to Library”.

save-section-to-library

You may choose to create a new category for all of your minimal portfolio layouts/sections. If so, use the category creator filed. I chose to use the following names for each section to help keep them searchable and recognizable.

  • Minimal Portfolio Hero Section 1 (in case you want to make more and test them against each other)
  • Standard Minimal Portfolio
  • Filterable Minimal Portfolio
  • Minimal Portfolio Global Call to Action 1 (If you haven’t already, save as global item)
  • Minimal Porftolio Footer (If you haven’t already, save as global item)

Saving the About/Contact Page

If you followed along with my most recent post “How to Create a Compelling About Page for Your Portfolio Website with Divi” then your about/contact page should look like this on the backend of the builder.

about-contact-builder

Just as with the homepage above, save the full layout first as “Minimal Portfolio Master About/Contact Page”. Then save each section individually. I used the names below.

  • Minimal Portfolio About/Contact Stacked Elements
  • Minimal Portfolio About/Contact Side-by-Side Elements

With everything saved, we’re now ready to run some A/B tests!

Example Split Test: Standard Portfolio vs. Filterable Portfolio

split-test-a-b

Let’s say you want to test which version of your portfolio is more likely to result in people clicking on the call to action button at the bottom of the page. In the backend builder of your homepage, start by deleting the hero section (it should be saved in your library).

split-test-1-1

Then, right-click on the standard portfolio section and click “split test”. It will ask you to select your goal. Choose the button module in the call to action section at the bottom of the page. It will turn that item blue.

split-test-1-2

You’ll notice that your portfolio section is now yellow. It should also have a downward pointing arrow in the upper left corner of the section box and a label next to it that says “Section 1”. If you click the arrow it will take you to “Section 2” which we want to edit.

split-test-1-3

Now normally this would be the part where you are able to click into the settings of your section two section, row, or module and make changes. But we’ve already created the altered version we want and it’s disabled below our split test.

split-test-1-4

All we have to do is right-click and copy the filterable portfolio row and paste it into the split test above it.

split-test-1-5

Then we can delete both the top row and the disabled filterable portfolio section (which should be saved in your library). Resulting in a split test like the image below.

split-test-1-6

But we’re not done quite yet. There’s one more thing we can track. We can use the Divi Leads tracking shortcode to see how many people submit a booking inquiry after clicking the call to action button.

To do that, navigate to the top of the Divi Builder on your homepage and click the hamburger menu icon to open the page settings.

split-test-1-7

Scroll down to where it says “Shortcode Tracking” and switch it over to “Yes”. Then copy the shortcode there and click save to close that modal out. Now go to your thank you page on the backend and add a text module called “shortcode tracking” and paste the shortcode into it.

split-test-1-8

Save everything, update both pages and monitor the results. Which, by the way, can be found by clicking on the graph icon at the top of your builder page where you’re running the split test (in this case, your homepage/portfolio).

split-test-1-9

You’ll see stats based on clicks, reads, bounces, goal engagement, and (when you’ve used the shortcode like we have) shortcode conversions.

split-test-1-10

When you have enough data to make your decision you can click the blue “End Split Test & Pick Winner” button at the bottom. It will choose the design you want and discard the other. But don’t worry! Since we saved everything before we started you won’t actually lose anything.

Some Other Tests You Might Want to Run

Because we need to manage the length of this post, there are several other tests I’d love to show you how to conduct but which we don’t have the time or space to share. I feel confident though that given the example above and the resources below you can successfully test any element of your new minimal portfolio site you want to.

To help get you started, here is a list of other split tests you might want to run:

  • Test two or more portfolio page layouts against each other to see which one results in more people clicking through the call to action module at the bottom of the page.
  • Test design variations of the hero section against each other.
  • Test design variations of the global call to action module against each other.
  • Test the copy of the call to action module against different versions of copy.
  • Test the copy of the hero section against different versions of copy.
  • Test the field text of the contact form against different version of copy.

More Divi Leads Resources

We have quite a few other posts here on our blog about how to use the Divi Leads feature. If this is interesting to you I highly recommend checking them out and learning all you can about this powerful tool.

Series Conclusion: How to Create a Simple and Effective Portfolio Website with Divi

This post concludes our miniseries. I hope that if you’ve been able to follow along you have felt empowered to create a portfolio website for yourself or your clients that you can be proud of. And, for that matter, one you can be sure is working effectively!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

The post How to Use Divi Leads to Measure Your Portfolio Site’s Effectiveness appeared first on Elegant Themes Blog.

How to Hide Media Attachment Pages in WordPress

The WordPress core makes it’s easy to password protect posts and pages — a handy feature if you want to easily limit access to certain content. The only problem is that any images or videos you display on those pages can still be accessed by going straight to the media attachment pages. This can be […]

Tips for Designing Great Longform Content on WordPress

Do you know the average length of content for pages ranking first in Google? It’s a massive ~2,500 words! And while we can’t know for sure whether that relationship is causative or correlative, the fact remains that longform content dominates the search engine rankings.

But when you create longform content, you can’t just throw up a 2,500+ word wall of text. You need to pay special attention to how your format your content so that your readers don’t get driven away.

In this post, I’ll give you some general tips to help you design great longform content that keeps your users engaged and reading.

Longform Content Offers Huge Benefits

I already talked about serpIQ’s analysis correlating higher ranking content with longer length:

longform content results

But taking advantage of that correlation is far from the only benefit of longform content:

  • Longform content lets you create incredibly detailed posts to take advantage of Brian Dean’s popular Skyscraper SEO technique.
  • People actually like reading longer content. Medium found that ~7 minutes was the optimum reading time for posts. That doesn’t mean you should make every post take 7 minutes to read – just that people don’t hate longer posts (as is often assumed).
  • Moz found that longer content gets more links. Again, this data is correlative, but it does suggest that people view longer content as more authoritative.

If you’re convinced about longform content, here’s how you can design it to optimize your results:

How to Design Longform Content

While the exact design of your longform content always needs to fit your specific site, there are some general tips which apply to every situation:

Tell Readers What They’re in For

The Medium reading length analysis I linked earlier tells us that people don’t mind reading long content. But that doesn’t mean people want to be surprised with long content. It’s always nice to tell your readers exactly how much time they’re likely to invest in a specific piece. Maybe they’re on their Pomodoro break and only have five minutes!

Medium incorporates this exact technique into all of their posts with the “Estimated time” guide:

longform-content-2

You can easily add something similar to WordPress with the Reading Time WP plugin. The plugin even lets you use shortcodes so you can add estimated reading time to Divi modules.

Remember to Leave Some White Space

If I had to suggest one overriding design principle for longform content, it would be this one. Many of the following suggestions will connect to white space in some form or another.

Walls of text are just plain intimidating. Put yourself in your reader’s shoes, would you ever read something that looked like this?

quick brown fox

My eyes hurt just looking at that example! And it’s not just me, Jakob Nielsen found that making text more concise and scannable increased usability by 124% over the control group in his test.

Never feel like you need to fill the whole page with content. It’s okay to have a white margin around your content. Images can have some space to breathe. You can write short paragraphs and use large line spacing.

Mix Up Text With Lists, Pull Quotes, and More

One way to keep your text scannable (and incorporate white space) is to liberally use some of these elements:

  • Lists
  • Pull quotes
  • Bolded text
  • Italicized text

See what I did there? I used a list to break up my text! Isn’t that easier to read than saying “liberally use elements like lists, pull quotes, bolded text, and italicized text”?

Neil Patel always keeps his content scannable by incorporating these tactics:

longform-content-4

One of my favorite ways of breaking up text is “Click to Tweet” buttons. Not only do they generate a pull quote, but they also boost your social shares. CoSchedule always adds stylish “Click to Tweet” buttons to all of their posts:

longform-content-5

You can easily add these buttons to your own WordPress content with CoSchedule’s Click to Tweet plugin.

Add Lots of Images and Other Visual Media

You may have noticed this post, and most other pieces of longform content, includes numerous images. Not only do images help break up text and add white space, but liberal use of images also correlates with higher numbers of social shares according to BuzzSumo.

longform-content-6

The Y-axis is number of social shares, the X-axis is “images per X words”.

One way to effectively use images is as examples to drive home your points (like I’ve been doing). But another worthwhile use of images is to bring in charts and graphs to help illustrate data.

Humans process images much more efficiently than text, so a chart or graph is a great way to help your readers understand complex data. If you don’t already have a chart, you can use a tool like Piktochart to easily create eye-catching illustrations.

And finally, custom illustrations add an air of authority to your longform content. Not only are they nice to look at, but they also signal that you invested significant time and effort into your longform content pieces.

Focus on Meaningful Headings and Subheadings

In the usability study I linked earlier, one of Jakob Nielsen’s suggestions for making pages more usable is “meaningful sub-headings (not “clever” ones).” Headings and subheadings grab readers’ attention and draw them through your content.

But in order to do that, headings and subheadings have to be:

  1. Used liberally
  2. Written to be both meaningful and attention-grabbing

One of my favorite pieces digging into subheadings is this short, but juicy, guide from Brian Clark at Copyblogger.

Include Multiple Calls to Action to Maximize Marketing Results

If you’re investing time into creating longform content, you probably have a marketing goal in mind. It might be getting readers to subscribe to your list, purchase a product, or any other type of action.

If you want your readers to actually perform those actions, you need to push them to do just that with a call to action.

But the problem with longform content is that it’s surprisingly easy for your call to action to get lost, or missed, when it’s mixed in with 3,000 other words.

For longform content, I’m a proponent of including three calls to action:

  • One at the top
  • Another in the middle
  • A final call to action at the end

For example, you always get this call to action at the end of any Elegant Themes post:

longform-content-7

By utilizing multiple calls to action in longform content, you maximize your chances of pushing your readers to action. And because your content is so long, three calls to action aren’t in any danger of overwhelming your readers.

Wrapping Up

Longform content correlates with higher search rankings and more backlinks. But you never want to be the writer publishing 3,000 words of pure text. Use these tips to create scannable longform content with liberal use of whitespace and images.

Keep your headings meaningful to promote scannability, remember to break up paragraphs with lists, quotes, and bolded text, and add multiple call to actions if you want to push your readers to action.

Now it’s your turn. As readers, how are your favorite pieces of longform content designed?

Article thumbnail image by Max Griboedov / shutterstock.com 

The post Tips for Designing Great Longform Content on WordPress appeared first on Elegant Themes Blog.

Weekly WordPress News: New WordPress.org Homepage

If you’ve visited WordPress.org sometime this week, you’ve probably seen the biggest bit of news:
A brand spankin’ new WordPress.org homepage.
In other news, Matt Mullenweg wrote about ensuring the continued development of WP-CLI.
Also, WooCommerce fans will want to check out the official WooCommerce year in review.
And if you’re not using a CDN,

The post Weekly WordPress News: New WordPress.org Homepage appeared first on WPLift.

Top 5 Most Popular Articles On Torque In 2016

Twenty-sixteen was an important year in WordPress. Not only were there more community wins than ever before — with 115 total WordCamps in 41 countries — but the core software also saw some significant improvements in 2016, namely the inclusion of the REST API content endpoints, leaving it poised for incredible growth in 2017.

On Torque, we’ve published nearly 600 articles and videos on everything from security and plugin and theme coverage, to industry news, dev-tutorials, beginner how-to articles and beyond. Today we look back on the year and share five of our most popular articles from 2016.

5. How to Move WordPress From a Localhost to Live Server 

Making changes to a live site can be scary. You piece together an entire site, and then one plugin install breaks all your images. This can be avoided, though. To ensure the quality of your site, you can make changes on a localhost before pushing it to the live server.

After creating your site on a localhost, you’ll want to officially make it live. This article takes a deep-dive into the tools you’ll need, then goes into the process of moving your new site to a live server.

4. 11 Best Translations Plugins For WordPress 

Twenty-sixteen was a great year for accessibility in WordPress. WordPress 4.7 is the first update to ever be completely translated into Urdu after the work from the volunteers at the second WordPress Translation Day. Many strides were made to bring WordPress to other countries and languages.

Why not make your site as accessible as possible? These 11 plugins are free and easy-to-use, and will allow for more people around the world to view your content.

3. How to Use Advanced Custom Fields 

Custom fields are near and dear to most WordPress developers. A user can completely customize menus, let users interact with the site, and more. Adding them can seem like a daunting task for a beginner, but plugins allow anyone to add the powerful feature.

Advanced Custom Fields is one of the best on the market — and it is free and full featured. Plus, it’s also the winner of our 2016 Plugin Madness Competition, highlighting its community support and popularity. This article walks through why you should use custom fields and how to implement them. It’s a great resource for beginners and experts alike.

2. How WordPress Sites Get Hacked (And What to do About it)

One of the biggest concerns about using WordPress is security. Sadly, if you work on the internet, the risk of being hacked is something you should be wary of. This article goes over the ways malicious attacks find their way into WordPress and what you do if that happens.

Armed with this guide, you will be ready for anything 2017 throws your way and come back from a potentially devastating attack with grace.

1. How to Easily Enable Gzip Compression for WordPress

For any website, the second most important thing outside of site security is speed and page load time. One way to make things more efficient is Gzip compression. This reduces file size and makes things easier to transfer. Gzip compression is an easy way to increase performance.

This step-by-step guide shows how Gzip works, why you should use it, and how to implement it on your own website.

Thank you to all our readers this year, we can’t wait to see you again in 2017!

What was your favorite article in 2016? Share in the comments below!

Emily Schiola

Emily Schiola is a Staff Writer at Torque. She loves good beer, bad movies, and cats.

The post Top 5 Most Popular Articles On Torque In 2016 appeared first on Torque.

How to Create a Compelling About Page for Your Portfolio Website with Divi

Welcome to post 4 of 5 in our miniseries How to Create a Simple and Effective Portfolio Website with Divi. In this series we’ll cover everything you need to do in order to create your own portfolio website from scratch. We’ll also go over how to use our A/B testing system Divi Leads to make sure your site is effective at attracting new clients.


In today’s post we’re going to finish off our minimal portfolio website with a simple and (hopefully) effective about/contact page. Just to be safe we’re going to create two slightly different versions and test them against each other in tomorrow’s post.

But we better not get ahead of ourselves. Let’s get cracking on this design!

Today’s Final Product(s): Two About/Contact Page Design Variants

To me a page does not need to be complex, difficult to build, or flashy to be effective. In fact, in most cases, those things will likely work against you. That’s why for our joint about/contact page I wanted to keep the design extremely simple and in-line with our minimal aesthetic.

We have a blurb about the artist and a contact form for booking inquiries. And that’s it. The only difference between the two variants is the placement of those two elements. In the first variant you will have to scroll down to fill out the contact form and submit it. In the second one everything is “above the fold” and accessible as soon as you hit the page.

about-page-final-v-1

About/Contact Page Design Variant 1

about-page-final-v-2

About/Contact Page Design Variant 2

In the sections below I’ll walk you through how I created each one (and the subtle differences between them).

About/Contact Page Design 1

To create the first design variant of our about/contact page, navigate to the page you created for it in our first tutorial. If you have the global footer we created already in place then it will look like this.

design-v-1-1

Enable the visual builder and add a new standard section with one row and one column.

design-v-1-2

Open up your blue section settings and choose a background image. Mine is 1920px wide by 1300px high.

design-v-1-3

Once you’ve saved that, click the grey add module button in the middle of your row. Add a text module, set the text color to light, and put your name in the content area. Then add a divider module below it. Set the color to white, the visibility to “show divider”, and the height to 2.

design-v-1-4

Now add another row, but this time with two columns. Add a text module and put the first bit of your about text there. Add a final text module in the second column on the right and finish your about text there.

design-v-1-5

Now add a new row with a single column and add the contact form module to it. Now all of your design elements are on the page. It’s time to go back through and begin styling things.

design-v-1-6

Name Text Module Settings

design-v-1-7

Open up the design settings for the text module your name is in and make the following adjustments.

General Settings:

  • Text Color: Light
  • Text Orientation: Left

Design Settings:

  • Text Font: Roboto Light; All Caps (TT).
  • Text Font Size: 34

Custom CSS:

Under main element past the following line of css.

font-weight: 400;

Save and exit.

Remaining Row Settings

In the middle row containing your “about text” open up the row settings and set the top custom padding value to 20px. Set all of the other custom padding values to 0px. Save and close.

In the row settings for the bottom row, set all custom padding values to 0px. Save and close.

Contact Form Module Settings

design-v-1-8

Under the general tab add two new items; both input fields. Label the first one “Project” and the second one “Budget”. You can choose to make them required fields or not depending on your preference but to match this design you will need to set the Make Fullwidth switch to “No”.

design-v-1-9-3

Also in the general tab, turn the Display Captcha option to “No”. And fill in the remaining fields according to your preference. I liked the phrasing “Booking Inquiries” for the title but you can choose whatever you want.

Moving on to the Design tab, make the following changes:

  • Title Font: Roboto Light; All Caps (TT).
  • Text Font Size: 34
  • Button Text Size: 16
  • Button Border Radius: 1px
  • Button Font: Open Sans; Bold (B).
  • Button Icon: Camera

Finally, in the custom css tab, paste the following css:

font-weight: 400 !important;
padding-bottom: 30px;
margin-bottom: 60px;
border-bottom: solid 1px #ffffff;

Save everything and exit the visual builder. Your final result will look like this.

about-page-final-v-1

Your End Result: About/Contact Page Design Variant 1

About/Contact Page Design 2

Since all of our design elements have already been created, we’re more or less just going to re-arrange things for this design variant. The first step is to enable the visual editor and duplicate the first design we just created. The duplicate will appear below it. Once that has happened, disable our first design by right-clicking on the section settings and disabling it on all devices.

design-v-2-1

Scroll to the bottom of the existing design and create a new row with two columns.

design-v-2-2

Drag the contact form module into the right hand column. Then drag the name text module, white divider, and left-hand side text module into the left column of the new row.

design-v-2-3

Next, delete the top two rows and open up the contact form module settings. In the css tab paste this adjusted code.

font-weight: 400 !important;
padding-bottom: 23px;
margin-bottom: 40px;
border-bottom: solid 1px #ffffff;

Save and exit the module settings. The final step is to add a new bottom row with a single column. Add an invisible divider module with 350px of height. Save everything and exit the visual builder. Your final result should look like the image below.

about-page-final-v-2

Your End Result: About/Contact Page Design Variant 2

Tomorrow: Testing Your Portfolio’s Effectiveness with Divi’s A/B Testing System Divi Leads

In tomorrow’s post I’ll show you how to conduct a series of A/B tests that will improve your portfolio’s performance by showing you conclusively what works and what doesn’t. Even if you haven’t followed along with this miniseries so far, tomorrow’s post will show you how to think about and set up A/B tests for whatever site you’re currently working on.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

The post How to Create a Compelling About Page for Your Portfolio Website with Divi appeared first on Elegant Themes Blog.

How to Find Which Files to Edit in WordPress Theme

Recently, one of our readers asked how do you find which files to edit in their WordPress theme? If you are new to WordPress theme development and want to customize your theme, then you need to learn which template files in your theme you need to edit. In this article, we will show you how to easily find which files to edit in WordPress theme.

How to find which WordPress theme files to edit

Template Files in WordPress Themes

WordPress themes control how your website looks to your users. Each theme contains several template files which control the appearance of a particular section or page in your WordPress theme.

For example, single.php file controls the appearance of single posts on your website. It is not the only file to do that.

If your theme does not have a single.php file, then WordPress will look for alternate templates like index.php to display the page.

Most beginners are not familiar with template hierarchy in WordPress. This makes it harder for them to figure out which files to edit when they want to customize their themes.

Having said that, let’s see how to easily find out which files to edit in your WordPress theme.

Finding Template Files in WordPress Themes

First thing you need to do is install and activate the What The File plugin. For more details, see our step by step guide on how to install a WordPress plugin.

The plugin works out of the box, and there are no settings for you to configure.

Upon activation, you need to visit your website and you will notice a new ‘What the file’ menu in WordPress admin bar.

What the file menu in WordPress admin bar

Now you need to just take your mouse over to the menu item, and it will display a drop down menu listing the template files used to display this page.

Template files used to display this page

Clicking on the file name will take you to the default WordPress file editor where you can edit that particular file.

However, we do not recommend using WordPress file editor to edit theme files because there is no undo option. If you accidentally lock yourself out of your website, then you would have to use a FTP client. That’s why we always using a FTP client and plain text editor to edit your files.

Making direct changes to your WordPress theme is also a bad idea. Those changes will disappear when you update your theme.

If you are just adding some CSS, then you can add it as custom CSS in WordPress. For all other changes you should create a child theme.

‘What The File plugin’ can help you locate the theme files that you need to copy and edit in your child theme.

Note: The menu item added by the plugin in the admin bar will be visible to all logged in users, and it has a link to an external site. You should only use this plugin in development environment.

We hope this article helped you learn how to find which files to edit in WordPress themes. You may also want to see our guide on how to test your WordPress theme against latest standards

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Find Which Files to Edit in WordPress Theme appeared first on WPBeginner.

Repairing Corrupted, Broken or Missing Files and Databases in WordPress

Have you found that your WordPress site’s on the fritz and all you can say is “I didn’t do anything, I swear!?” Yet, you see errors that say your files or database are broken, missing or corrupted. Anything from posts and categories sporadically disappearing and reappearing to error messages like: “Warning: require_once(path/to/file.php) [function.require-once]: failed to open […]

Adding Attachments to WordPress Comments (& Why You May Want To)

Text is boring! We live in a multimedia world, so why are WordPress comments limited to just text? Adding attachments in WordPress comments opens up a realm of interesting new options for your comments section.

The idea of adding attachments to comments is far from new – Facebook allows it, bulletin boards allow it, so why can’t WordPress blogs allow it? In this post, I’ll show you exactly how to enable adding attachments to WordPress comments, as well as some important things to consider before you open the comment attachment floodgates.

Why Allow Attachments in WordPress Comments?

Let’s start with the less serious reason to consider adding comment attachments:

They’re just plain fun! Attachments allow readers to upload GIFs or images to go along with their comments. And in a world replete with memes, this can make your comments section a lot more fun and lively.

But it’s not just about fun, it also allows users to submit files to an individual post. When could this come in handy? I imagine it’s helpful in a variety of situations, but I’m picturing running a contest and asking users to attach a file to the post as a method of submission.

Another use case might be if you’re running an eCourse or using WordPress as an online complement to your real-world class. Opening comment attachments allows students to easily submit documents to the post containing your lesson.

So whether it’s for fun, practicality, education, or something else, there are definitely some reasons to consider adding attachments in WordPress comments.

Important Considerations Before Allowing Attachments

Do you know what would be a really bad idea? Allowing readers to attach any type of file they want with no size limits. Yeah, that’s how you get someone to upload a 5GB .zip file of cat pictures…or worse.

So, make sure you consider these two limits:

  • File size limits – you definitely need to set a maximum file size for attachments. The solution I’ll show you in the next section will make the default upload limit the limit set by your server. But that might be too high for most situations. If you’re just allowing image/GIF uploads, I think 2MB is a good maximum.
  • File type limits – think about the types of attachments you want to allow and then only add those. Keep your site as locked down as possible. If you only want images in your comments section, there’s no reason to allow users to upload .PPT files.

Okay, now that you know what to pay attention to, here’s how you can allow attachments in your WordPress comments section.

How to Add Attachments to WordPress Comments

While there is a premium plugin offering more full-featured comment attachments, I like to keep things free whenever possible.

To stay on the free side of things, you can use the Comment Attachment plugin. Get started by installing and activating the plugin like you would any other free plugin.

Once it’s activated, you can configure it by going to Settings → Discussion and scrolling to the Comment Attachment section:

Adding attachments in WordPress comments

Here are the settings you’ll absolutely want to configure:

  • Maximum file size (in megabytes) – this is the file size limit I discussed earlier. Make it as small as possible (like I said, under 2MB is probably a good starting point for images).
  • Is attachment required? – if you’re using attachments for a course, you might want to make attachments required in order to leave a comment. Otherwise, you probably should leave it disabled.
  • Attach attachment with current post? – this makes it easier to find attachments for individual posts in your media library.
  • Show image thumbnail & thumbnail size – choose whether or not you want to actually display images in your comments (or just links to the image files). If yes, you can also choose how large you want the image’s dimensions to be.
  • Try to embed audio/video player? – if you’re allowing video/audio attachments, you can have the plugin automatically make them playable using the native WordPress media player.
  • Allowed file types – finally, you want to configure all of the allowed file types. The plugin currently allows 32 different file types, divided by media type. Go through and check the types you’d like to allow.

adding-attachments-in-comments-wordpress-2

Once you’re finished configuring, make sure to save your changes.

How Comment Attachments Work

Once you’ve configured the plugin, your users will now be able to upload attachments to your posts like this:

Upload attachments

Because I configured the plugin to only display image thumbnails, any uploaded images will look like this:

display thumbnails

But remember, you can always make images display with larger dimensions if you’d like.

Where the Attached Files Are Stored

The plugin will store any files attached to comments in your normal WordPress media library:

WordPress media library

If you expand the details for any file, the plugin will tell you exactly which post the file was uploaded to:

uploaded to details

How to Delete a File Attached to a Comment

By default, the plugin makes it so that deleting a comment also deletes all attachments associated with that comment. So, unless you turn that default setting off, you simply need to delete a comment to delete its associated attachments.

During comment moderation, you also have the opportunity to delete the attachment from a comment without removing the whole comment. So, if someone attaches an inappropriate file to an otherwise acceptable comment, you don’t need to completely delete the comment:

deleting attachments

Finally, you can always delete attached files by going to your WordPress media library and deleting them there.

Wrapping Up

Enabling the adding of attachments to WordPress comments is pretty easy. Just remember to be careful. Keep a sensible file size limitation and only allow the exact file types you need.

If you’re only allowing attachments for a private site (e.g. a closed learning course), then you can probably afford to be a little more liberal with file size limits and attachment types.

But if you’re allowing attachments to a public comments section, definitely keep things locked down to keep your site secure and performing well.

Would you ever consider allowing attachments on your WordPress site? I’d love to hear why or not.

Article thumbnail image by drvector / shutterstock.com 

The post Adding Attachments to WordPress Comments (& Why You May Want To) appeared first on Elegant Themes Blog.

Creative Free WordPress Themes Featured in Website Examples

WordPress offers you a diversity of free themes for various niches. Do you also want to add a word “bewildering” to this “diversity”?  Especially if you are one of those perfectionists in search for the most reliable and attractive solution for the online presence, you may face a problem of choice. And a problem of trust to a free solution. Especially if you are looking for something creative. The first thing that probably catches your eye is visual attractiveness. And it has a common sense – is this theme creative enough to present my crafts? It’s a highly important point…