Best Softwares, Technology and Web Development Tutorials

web designing and web development tutorials in English and Urdu. especially WordPress, Node js, MongoDB, Mean Stack, Full Stack development tutorials, basic to advance HTML css and javascript tutorials.

Subscribe to Our Youtube Channel

LightBlog

Breaking

Monday, 4 April 2016

April 04, 2016

12 Web Design Tips to Help You Achieve Success in 2016


12 Web Design Tips to Help You Achieve Success in 2016
There’s a lot more to being a great web designer than simply having the necessary technical skills. Another key element to success is keeping up to date with the latest web design tips and trends from the world of online publishing and beyond.
Keeping your finger on the pulse gives you the option of becoming an early adopter of emerging design trends and styles. This, in turn, can help you to deliver projects, whether your own or for your clients, that really pack a punch.  Having a solid arsenal of web design tips to turn to when it’s time to get down to work can also help to speed up your workflow.
Even if you’re a bit of a maverick who prefers to walk your own path rather than following the herd, keeping abreast of the latest web design tips and trends has it advantages. For one, it’ll make it easier to understand the needs and wants of your clients when discussing their vision for a project and they want to emulate something they’ve seen elsewhere.
And if you really want to be original, being aware of what’s popular now will help you to avoid those trending web design tips and styles and create something that is all your own.
So in this article, you’ll find a collection of useful web design tips that will help your WordPress website and the client projects you work on in 2016 achieve success – whether you want to implement them or ignore them in your quest for originality.

12 Web Design Tips to Help You Achieve Success in 2016

When it comes to creating websites, whether for yourself or for your clients, success doesn’t come easy. To increase your productivity and keep your output looking fresh and modern, not to mention optimized for search engines and conversion rates, it’s essential that you’re always learning as many new tips and techniques as possible.
So, let’s explore a few different web design tips that can help you out in 2016.

1. Use Style Guides

Web Design Tips-Google-Material-Design-Style-Guide
Create your own or adopt an existing style guide – image by Google
Style guides are popular in the publishing world. They can come in the form of large books or documents that media publications follow to maintain uniform styles throughout their content. This can include everything from how states and countries are labeled to how numbers are written.
Web designers can create their own style guides to ensure the sites they build have uniform styles throughout. This is especially useful for designers who collaborate with other freelancers. A well-written style guide can help keep a disparate team on the same page.
The style guide Google produced for its own Material Design is a great example of a thorough, well-written style guide. If you’re looking for a more generic style guide or set of rules to apply to your work, be sure to check out our guide to the essential typography books for 2016.

2. Phase Out Sidebars

Web Design Tips in 2016 - No Sidebar
Maybe it’s time to reconsider the sidebar
Sidebars create clutter. They were meant to improve the usability of a site by displaying additional navigational elements, such as links to recent posts and popular content.
Over time, it’s fair to say they’ve been hijacked by savvy marketers looking for a way to display email optin forms and other promotional content that doesn’t always offer much to the user experience.
While in theory sidebars containing links and other useful content should enhance the user experience, in reality, very few site visitors actually use them, at least according to heatmap tests conducted by ConversionXL. Therefore, compromising your site’s design in favor of a sidebar for marketing purposes may not deliver the results you desire.
Try phasing sidebars out in your designs, especially if a site doesn’t really need one. Make your content the most important element on a page by using designs that force readers to focus on it.
If the thought of abandoning sidebars altogether sounds a bit extreme, look for a theme that gives you the option of publishing full-width content, alongside more traditional layouts that feature an accompanying sidebar.
You can do a lot with the humble WordPress sidebar and one web design tip for 2016 is to get smarter with the way you do or don’t use them.

3. Start Your Designs Offscreen

Web Design Tips - Sketch - shutterstock_376300174-MoonRock
Try starting your designs outside of the code editor – image by MoonRock / shutterstock.com
Do you create code and designs on the screen at a rapid rate, without a care of how things will turn out as you know you’ll edit and clean things up later on? If so, why not try a new approach in 2016.
Instead of jumping right in and figuring things out as you go, why not turn to the trusty pencil and paper or use a whiteboard to plan an overall site layout offscreen first. Use this approach to get an idea of where you want specific elements to go, much like how an architect uses floor plans to plot out where windows, doors, and rooms should go.
If adopting a pen and paper doesn’t appeal, there are plenty of great wireframing and prototyping web design tools out there that can help you quickly get your ideas out of your head, before you get started in your development environment.

4. Use Larger Font Sizes

Web Design Tips - Large Typeface
Experiment with large typefaces – image from mint.com
Big typography isn’t a new trend or aspect of design, but it’s still a great practice to follow in 2016. This is because it has the power to grab the reader’s attention and places the focus on your content.
Readability on smaller screens, such as mobile devices, has played a huge role in this trend’s rising popularity, but it also fits in nicely with the ever-popular minimalist and flat design trends.
One web design tip for 2016 is to try incorporating larger font sizes in your designs, such as a minimum font size of 18 points for body text, where it makes sense. This includes any text you place in header images or even the text on a homepage when using a large, hero image. Just make sure you focus on choosing a web-friendly typeface that scales well, rather than agonizing about which size to choose.

5. Create More Space

Web Design Tips 2016 - White Space - shutterstock_213761197-grop
Don’t fear the whitespace – image by grop / shutterstock.om
Too much clutter can distract readers and make a site appear overly complicated. That’s one reason why phasing out sidebars is recommended. However, you should also try creating more space in general rather than trying to include as many elements as you can on a page. Again, it helps a reader focus on what’s important while giving you the opportunity to build better-looking designs.
This space is typically referred to as “whitespace” or “negative space,”. However, this space doesn’t always need to be white, especially if you’re building a website that uses large images on its homepage and headers.
Minimize the amount of clutter in your designs and include more space around and between elements to help guide your users through your site. Whitespace can make it clear where a reader’s attention should be focused.

6. Responsive Design isn’t Optional

Web Design Tips - Responsive-shutterstock_236339074-MPFphotography
Are you ready for mobile first design? – image by MPFphotography / shutterstock.com
Mobile device usage continues to grow, especially when it comes to accessing websites. This means that it’s never been more important to ensure your websites are mobile-friendly.
So one key web design tip for 2016 is to fully commit to responsive design. In the past, this simply meant checking off the responsive design box on your to-do list. However, as this technology matures, you need to start considering more than just fluid layouts. Think mobile optimized images, whether hamburger menus are the right choice, and much more.
For 2016, you might even want to embrace the concept of mobile-first web design.

7. Take Advantage of Google’s Material Design

Web Design Tips - Google Material Design
Google’s Material Design is here to stay – image by Google
Google ramped up the use of the Material Design philosophy in 2014, and digital designers have been quick to follow suit.
If you’ve embraced the flat web design trend, then it’s probably time for you to jump on the Material Design bandwagon and update your style for 2016. The core concepts of this web design framework include using layers to create elegant shadows alongside the edges of elements, helping to add some much-needed style and depth to the minimal flat design trend.
If you want to get started, there are some great, free Material Design UI kits around that can help get you up to speed.

8. Expand and Reevaluate Your Toolkit

Adobe CC Illustrator
Keep an eye out for new tools that can help you – image by Adobe.com
Are there tasks in your workflow you feel could be more efficient or at least, more enjoyable? Then one web design tips that can help you out is to do a little research and find out if there are any new tools that better meet your needs.
Just as new web design tips are emerging all the time, so too are new web design tools. From hot new free apps like Pixate, through to updates to industry favorites like the Adobe CC apps for web designers, it’s always worth keeping an eye out for something new that could help improve your workflow and enjoyment levels.

9. Simplify Navigation

Web Design Tips - Mobile Menu Icon - shutterstock_234020359-Titov Nikolai
Unclutter your menus – image by Titov Nikolai / shutterstock.com
Placing tons of links in your navigation menu, sidebar, blog posts, and even the homepage may seem like a great way to keep people on your site, but it can actually go the other way. Complicated navigation systems create way too many options for people, so much so that they may decide to leave your site altogether.
Placing fewer items in your navigation menus and eliminating sidebars are great ways to cut down on the amount of clutter that exists on your site. This can allow you to build better-looking designs without compromising user experience or conversion rate optimization.

10. Up Your Imagery Game

Web Design Tips - Photography-shutterstock_344949170-Fouaddesigns
Take your imagery more seriously – image by Fouaddesigns / shutterstock.com
Upgrading the quality of the images you use in your work is a great web design tip for elevating your projects. Instead of simply using the free images that everyone else has access to, it might be time to invest in a premium stock image service.
The next level up could be to create or commission your own images from scratch, whether that’s going out and taking high-quality photographs, drawing them yourself, or a combination of the two. Combining typography with your chosen images can be another effective way to make them more original and assist you in delivering your message.
Choosing beautiful imagery for your website is a proven way to assist you in achieving your goals and help your content stand out from the crowd.

11. Phase Out Sliders

Web Design Tips - Divi Slider
Are your sliders really adding anything to the user experience?
The decision between whether or not to use sliders is a highly-debated topic.
However, in most cases, they should really be phased out in 2016, especially if you want to decrease the amount of distractions on your site and make it easier for users to find their way around. Sliders don’t do either of those things. They’re very similar to sidebars. They create way too many options for your visitors to choose from, and very few people actually use them.
If it’s your homepage you’re concerned about, opt for a large header space that uses a unique, well-crafted static design that clearly defines your brand of that of your client. Again, play around with big typography to make static images more visually appealing and come up with better page designs that make sliders redundant.

12. Learn A/B Testing

Web Design Tips - Split Testing - shutterstock_311929856-Iconic Bestiary
Validate your ideas with split testing – image by Iconic Bestiary / shutterstock.com
A lot of these web design tips are general advice based on current and upcoming trends in the digital space. However, there’s no guarantee they’ll work for your site.
You also shouldn’t necessarily feel obligated to use or forego certain design elements simply because it’s a current trend or now an unpopular style. A/B testing is a skill you can learn to find out whether or not your designs are working or not.
Maybe you or your client want to use a slider or a busy sidebar and don’t want to give in to the conventional wisdom that states they’re outdated and ineffective. A/B testing is a great way to implement a new design and test its effectiveness yourself. Split testing is also an effective way to negotiate compromises between you and your clients, thanks to the evidence that can help back up your recommendations.
Check out our guide on how to use A/B testing with WordPress if you want to learn more.

Final Thoughts on Web Design Tip for 2016

Continuing to learn and pick up new web design tips, no matter how much experience you have, is one of the most important things you can do to achieve and maintain success throughout your career.
Hopefully, these web design tips have given you something to think about and help point you in the right direction for more learning and experimentations. Perhaps the final web design tip should be not to rest on your laurels, no matter how successful your 2015 was.
April 04, 2016

17 Best Corporate WordPress Themes for Businesses


17 Best Corporate WordPress Themes for Businesses
Starting a new business venture is no easy feat – especially if you don’t have a solid website already set up to capture leads, guide new customers to your doorstep or sell products and services directly.
There are a lot of multipurpose and business themes available online for WordPress users and many of them deserve your attention. In this roundup we’ve taken the liberty of compiling a list of 17 of the best corporate themes for businesses available today.
Some of the following themes are suited to specific business niches while others can pretty much cover all bases. We’ve highlighted the primary use case for each theme alongside its name, so that you can quickly spot which themes will be of interest to you.
Let’s get cracking!

1. Divi (Multipurpose)

A screenshot of the official Divi header.
Divi is our own multipurpose theme. It features over 20 premade layouts based on diverse business (or personal) sites and comes with full support for WooCommerce integration.
If by any chance you don’t find what you’re looking for among the included premade layouts, you can always turn to the drag-and-drop Divi builder, which easily lets you put together sites with complex features thanks to its wide array of customization options.
The Divi theme is also fully responsive, available in 32 different languages, and was awarded the Sucuri ‘Seal of Security’ thanks to passing their audit with flying colors, making it ideal for building a secure business website.
Try out the Divi demo.

2. Listify (Directory)

A screenshot of the official Listify header.
WithListify you can easily create directories of any kind of business. For example, its demo includes listings for arts events, bars, spas, restaurants, travel, and many other categories. Each individual listing can be customized with a list of features (including custom icons), owner information, links to social profiles, photos, operating hours, and details regarding special deals.
The theme is ready for integration with WooCommerce, which enables you to handle bookings and reservations directly from within your directory using WooCommerce Bookings, and also includes support for OpenTable, Resurva and Guestful.
Integrating WooCommerce also opens the door for you to transform your Listify site into a variety of businesses, such as a gift certificate directory, or a membership site with special deals. There are plenty of creative applications.
Try out the Listify demo.

3. Listable (Directory)

A screenshot of the official Listable header.
Listable offers many of the same features as Listify, while adding a few of its own. Its design is based on cards, and individual listings are more focused on photos of the locale in question. Information about each listing is also shown in a more compact fashion, with prominent calls to action for individual purchases unique to each.
Naturally, it’s fully compatible with WooCommerce, which enables you to monetize your directory in a number of ways. You could, for example, charge for users to add individual listings, take fees for reservations made through your site, or offer a subscription service for people wishing to add their businesses.
Try out the Listable demo.

4. Education WP (Education)

A screenshot of the official Education theme header.
This unique theme enables you to create and monetize online courses as well as integrate an online shop (with WooCommerce) to sell additional materials. The theme itself includes seven unique demos ready to be set up for different kinds of courses, and is integrated with the LearnPress WordPress LMS Plugin, which provides the functionality for the courses themselves.
The LearnPress plugin is able to create sorting choice question types, random quizzes, content drips, give out certificates, reward points (through the myCRED premium plugin, which also comes with the theme), supports multiple instructors, and can also manage payments via Stripe.
On top of these core functions, Education WP also supports bbPress and BuddyPress integration, which enables you to create support forums for your students to obtain additional guidance or share tips between each other.
Try out the Education WP demo.

5. SEO WP (Online Marketing, SEO, Social Media Agency)

A screenshot of the official SEO WP header.
The SEO WP theme is meant to be used by SEO companies, digital marketing agencies, and social media specialists. It comes prepackaged with the Live Composer plugin as well as drag-and-drop builders for forms, footers, and Google Maps.
The images seen in the SEO WP demo are also fully available to be used as part of your finished websites, which means you can use their one-click import function and have a fully functional website live in a matter of minutes (aside from adding your own content, of course).
Purchasing the theme also gets you access to a variety of premium plugins such as Rankie, Mega Main Menu, Master Slider, Easy Social Share Buttons, NEX-Forms, Simplified Google Maps, WPFW and WordPress Fresh Favicon.
Finally, the theme was designed from the ground up to comply with the latest site performance best practices both for regular and mobile use, achieving almost perfect scores across the board in various popular site performance metric tools (as seen on the image above).
Try out the SEO WP demo.

6. Real Homes (Real Estate)

A screenshot of the official Real Homes header.
Real Homes is a powerful real estate listing theme which provides agencies with all the features they need to take their operations online. It features advanced property searches, Google Maps integration, user login and registration, and payment integration via PayPal.
Individual listings contain a wide variety of meta boxes with the basic presets for house and apartments (i.e. sale or rent price, the size of the property, number of bedrooms, etc.) which can be added to depending on the needs of individual agents or agencies.
Real Homes can also be used to power directories; you can even charge users to submit properties through an automated process.
Last but not least, this theme comes bundled with two premium plugins, Visual Composer, and Revolution Slider.
Try out the Real Homes demo.

7. Factory (Industrial and Manufacturing)

A screenshot of the official Factory header.
Factory is an theme intended for industrial operations ranging across fields such as engineering, research, and manufacturing. It’s intended to be set up quickly and includes demos with real content to illustrate what a finished website would look like, and comes with a narrated installation video to guide you through proceedings.
The design here was built with effectiveness in mind, which is to say, conveying the maximum amount of information across each page without overwhelming viewers and with intuitive, no-frills layouts.
It comes bundled with Visual Composer and LayerSlider.
Try out the Factory demo.

8. BuildPress (Construction)

A screenshot of the official BuildPress header.
BuildPress is a no-nonsense theme for construction businesses. Much like Factory, it’s all about providing a solid foundation for informational websites, only in this case targeting the construction niche.
In order to provide a product tailor-made for the field, the team behind BuildPress researched the market and came up with a variety of prebuilt layouts, including unique pages for custom construction services, project portfolios, and all the other basic pages a construction business would need (with all the pertinent information front and center).
The theme is also compatible with WooCommerce, in case you want to incorporate an online store, and comes packaged with the Essential Grid Gallery Plugin to power project portfolios.
Try out the BuildPress demo.

9. Builder (Construction and Architecture)

A screenshot of the official Builder Construction Architect header.
Builder offers a wide variety of features which make it perfect for all the business types it references (from building to cleaning). Its pre-made layouts display opening hours, appointment forms, case results, FAQs, and individual pages for team members.
The theme includes CSS animation options for most of its elements, a simple parallax builder, and a one-click installer for its demo content, in case you want to get your service site up and running in no time. It also comes packaged alongside the Revolution Slider plugin and a premium set of icons at no additional cost.
Try out the Builder Construction Architect Renovation demo.

10. Corpus (General Corporate)

A screenshot of the official Corpus header.
Corpus is all about that sleek, elegant corporate look which makes users feel at ease about the prospect of handing their money to strangers over the internet. On top of its sleek design, the theme also features some great UX design, with integrated animations which don’t feel thrown in just for the fun of it, and incredible attention to detail.
Thanks to its WooCommerce integration, Corpus is well suited for online shops and service companies, although it’s flexible enough to power quite a wide variety of businesses. It comes with the Visual Composer plugin for easy customization, the Revolution Slider plugin, a wide variety of prebuilt pages (including one-page designs), great navigational menus, and as we mentioned earlier, plenty of CSS animations.
Try out the Corpus demo.

11. Accounting (Accountancy)

A screenshot of the official Accounting header.
If you’re only reading this article to find the perfect theme for your accounting business then boy, do we have some good news for you!
Accounting may not be the flashiest of themes, but it does include the solid framework you need to set up a simple and thorough site for accounting businesses, or pretty much any other niche that requires an informational website. By far its best feature is the front and center form to obtain a free quote, which is included alongside the prebuilt theme demo.
The theme is packaged with the Visual Composer and Revolution Slider plugins, is fully ready for WPML localization, and features a one-click install function for its demo content.
Try out the Accounting demo.

12. ClassyAds (Ads Directory)

A screenshot of the official ClassyAds header.
By far the classiest theme featured in our list (sorry), ClassyAds is a recently released classifieds theme that hasn’t received much attention yet, but you should definitely check it out.
It features modern listing pages with prominent headers, plenty of custom details, a convenient navigational system, and contact forms to get in touch with the owner of each offer.
The theme is fully compatible with WooCommerce in order to handle payments for listings, and the ads functionality is based on the WP Job Manager plugin (which is not included alongside the theme).
Try out the ClassyAds demo.

13. Automotive (Car Dealership)

A screenshot of the official Automotive Card Dealership header.
Automotive enables you to setup a gorgeous and fully functional car dealership website. Its main feature is the inclusion of a thorough (and fully searchable) inventory system, which gives your customers the ability to look through all your offerings with the use of multiple filters, and the possibility of comparing multiple vehicles at once to find their dream ride.
It also includes a Similar Vehicles widget, a financing calculator, and layouts for printable brochures in PDF format, as well as all the base Photoshop PSD files used during the design process. As for free plugins, it comes with Visual Composer and Revolution Slider, and is fully compatible with WooCommerce in case you want to add payment options to your online dealership.
Try out the Automotive Car Dealership Business demo.

14. Lawyer Base (Lawyers and Law Firms)

A screenshot of the official Lawyer Base header.
If the previously mentioned Accounting didn’t convince you there’s a WordPress theme for every conceivable niche, Lawyer Base should put those doubts to rest.
This theme was custom built with law firms in mind, and to that effect, it features a modern, professional design which inspires confidence without descending into cookie cutter corporate territory. Its prebuilt layouts include individual pages for different kinds of law areas, testimonials, recent firm news, and individual attorney profiles which can be easily customized.
The theme uses the custom GoodLayers page builder (from the same team who developed this theme), includes the Master Slider plugin, and is fully compatible with WooCommerce as well as WPML.
Try out the Lawyer Base demo.

15. WorkScout (Job Board)

A screenshot of the official WorkScout header.
WorkScout is a recently launched job board theme with plenty of functionality to back up its solid design, although many of its more advanced features require separately sold premium plugins.
Using the theme alongside the free WP Job Manager plugin, you’ll be able to set up a working job directory to which users can upload listings separated by different categories such as freelance, full-time, internship, part-time and temp. The theme was also developed with more advanced functions in mind, covering everything from uploading resumes, application management (which could be seen from an employer dashboard), new job alerts, and bookmarked jobs.
All of these functions are supported by the theme and included in the design but require the purchase of add-ons, which may be a turnoff for some.
Try out the WorkScout demo.

16. Medicare (Medical and Health)

A screenshot of the official Medicare header.
Medicare is a custom-built theme for medical practitioners which includes prebuilt layouts for several specific fields such as clinics, dentist and veterinary offices.
Its designs are simple yet include smart details such as custom animations, and are intended to be packed with important medical information in an easy to digest fashion. The theme also features a built-in cost calculator plugin, the RapidComposer plugin, is fully ready for translation, and includes support for WooCommerce as well as being ready for child theming.
Try out the Medicare demo.

17. Startuply (Multipurpose)

A screenshot of the official Startuply header.
Last but not least, Startuply is meant to fulfill the crucial functions needed by a startup on the rise. It doesn’t matter if your product or service hasn’t gone live yet – this theme will help you start compiling user information for your waiting list or advance sign-ups.
Startuply comes with seven prebuilt layouts to get your startup page up and running in no time, and comes prepackaged with a few premium plugins including Revolution Slider, Visual Composer, and Templatera.
Try out the Startuply demo.

Conclusion

You’re on your way to kickstarting or boosting your business’ online presence, but simply choosing a theme isn’t enough to get you there. A great theme will, however, include all the features you require as well as provide you with enough flexibility to grow over time.
But what if you’re not quite sure how to pick the right theme for you even after going over the list? Just follow these steps:
  1. Go back over our picks and select the theme which comes the closest to fulfilling your requirements.
  2. Don’t rush into anything. Every theme will offer you live previews and demos so you can see them in action. We’ve included links to them alongside each of them.
  3. Purchase your business theme and get to work!
What is your favorite corporate WordPress theme for businesses? Share your picks with us in the comments section below!
April 04, 2016

How to Fix the 500 Internal Server Error on Your WordPress Website


How to Fix the 500 Internal Server Error on Your WordPress Website

The 500 internal server error runs on every page of your site when there’s a problem with the server or file system that’s powering your site. The cause most likely occurs in the root directory, where your WordPress files are, but it can also be caused by a problem on your host’s server.
This is one of the most frustrating errors that can occur in WordPress. It never has a straightforward solution, requiring a lot of troubleshooting that can eat up your time and patience. But we’re going to try to help alleviate some of that stress by suggesting several solutions to this problem and walking you through each.
Let’s get started.

Backing Up Your Site

These solutions require making a lot of changes in your site’s root directory. It’s highly recommended you backup your site prior to trying any of these solutions in case something goes wrong.

Using an FTP Client

If you already have experience using an FTP client, skip this section. I’m going to go over how to set up an FTP client for those who have never used one as most of these solutions require it.
An FTP client allows you to access and edit your site’s files. You can use the File Manager your host uses, of course, but an FTP client of your choosing is often easier to use.
download-filezilla
There are many FTP clients, but we’re going to use FileZilla for the purpose of this demonstration. Go to FileZilla’s homepage, and click Download FileZilla Client.
Click the green Download FileZilla Client button if the site is recommending your exact operating system. If it’s not, click the Show Additional Download Options link beneath the green button and download the version that’s appropriate for your operating system.
Open the client once you’ve downloaded the installer and have installed it on your system. Click File > Site Manager. Click New Site, and enter your site’s name.
filezilla-ftp-setup
Configure these settings:
  • Host – Your domain name
  • Port – Leave blank
  • Protocol – FTP – File Transfer Protocol
  • Encryption – Only Use Plain FTP
  • Logon Type – Normal
Use the username and password you use to access your host’s file manager. If your host uses cPanel, use the login information you use to access cPanel. If you’re not sure, ask your host.
Go to the Transfer Settings tab, and select the checkbox for Limit Number of Simultaneous Connections. Set the Maximum Number of Connections to 8. This keeps your site’s server from blocking your IP address. Click Connect to connect to your site’s server.
You’re ready to go!

Common Solutions for the 500 Internal Server Error

The two most common causes of this error are a corrupted .htaccess file and exceeding your server’s PHP memory limit. The .htaccess file in your WordPress directory can become corrupted after you install a plugin or make another change to your WordPress site. The fix is simple. All you need to do is create a new .htaccess file.
PHP memory limit issues often occur as the result of a poorly-coded plugin running on your site or a site that’s grown considerably over time and is using too many plugins. You’ll begin to exceed the PHP memory limits set by your hosting provider once either of these things happen. The result is a 500 internal server error.
We’re going to learn how to create a new .htaccess to get rid of the corrupted one as well as how to test whether or not you’re exceeding your PHP memory limits.

Creating a New .htaccess File

Open your WordPress root directory in FileZilla or your preferred FTP client. This is typically called public_html. If you see folders named wp-admin and wp-content, you’re in the right place. If you don’t see your .htaccess file or any dotfiles, make hidden files viewable by clicking Server and selecting Force Showing Hidden Files.
rename-htaccess-file
Once you find your .htaccess file, right-click it, and rename it “.htaccess.bak”. This essentially deletes your site’s .htaccess file, so we need to create a new one. Go into your WordPress admin area. Hover over Settings, and select Permalinks. Scroll down to the bottom of the page, and click Save Changes.
Open your website in your browser. If the 500 internal server error is gone, it was caused by a corrupted .htaccess file and your issue is now fixed. If you’re still seeing the error, you have some more tests to run.
It’s also worth mentioning that an improperly named .htaccess file will cause this error to run on your site. Make sure this file is not named anything other than “.htaccess”.

Increasing Your PHP Memory Limit in WordPress

PHP memory limits are set by your host and WordPress. WordPress will attempt to increase your limit if you begin exceeding it, but it can only go as high as the limit your host has placed on your server. This limit is often lower for shared hosting plans. You need to increase your PHP memory limit in WordPress and refresh your site to test whether or not this is causing your 500 internal server error.
wp-config-php-file
Open your root directory, and locate your wp-config.php file. Right-click on the file, and select Download to download it to your computer. Open the file in your preferred text editor, and add this bit of code under the opening PHP tag:
define('WP_MEMORY_LIMIT', '64M');
Save the file, and re-upload it to your root directory, overwriting the original file. Refresh the client, and refresh your site. If you still see the error, you are not having PHP memory limit issues. Remove the above code from the wp-config.php file on your computer, save it, and re-upload it to your root directory.
Don’t get too excited if you don’t see the error. You still have some work to do.
Increasing your site’s PHP memory limit in the wp-config.php file is the equivalent of pouring bleach down your kitchen sink when it smells like rotten eggs. You’re fixing the problem well enough to get rid of the offensive odor, but you’re not fixing the bigger issue at hand, which is likely a clog somewhere in the pipes that lead to your sink.
The same is true with increasing your site’s PHP memory limit. You may have increased it yourself in the file, but something is still exhausting your limit. You can follow the steps in the next few sections to try and find out what that might be, but if worst comes to worst, you’ll likely need to convince your host to increase the limit on your server.

Less Common Solutions for the 500 Internal Server Error

Fixing a corrupted .htaccess file and increasing a site’s PHP memory limit are the top two solutions for fixing this error, but there are other solutions if those haven’t helped you.
They are as follows:
  • Deactivating plugins to check for faulty plugins.
  • Locating issues by debugging your site.
  • Checking if your files and folders have the correct file permissions.
  • Uploading fresh wp-content and wp-includes folders to your site.
  • Asking your host if the issue is on the server that powers your site.

Deactivating Plugins

deactivate-plugins
If you’re able to access the WordPress admin area, deactivate your plugins one by one. Refresh your site after each deactivation. If the error disappears, it was likely caused by the plugin you deactivated prior to refreshing.
Delete the plugin and find a replacement if its function is important for your site. If you don’t feel you can replace the plugin, contact the developer directly. You can do this within the plugin’s support forum on WordPress.org, but I recommend doing a bit of research to see if the developer offers support elsewhere.
If you cannot access the WordPress admin area, open your FTP client. Open the root directory, and open the wp-content folder. This folder contains your Plugins, Themes and other folders.
rename-plugins-folder
Rename the Plugins folder to anything you wish, such as “plugins.test”. This deactivates all of the plugins on your site. Refresh your site. If the error is gone, it was caused by a faulty plugin. Activate each plugin one by one, refreshing your site after each activation, to find out which plugin is causing the error.
Make sure you rename the folder back to “Plugins” afterward.

Debugging Your WordPress Website

debugging-wordpress
If you’re having trouble figuring out what’s causing this error to run on your site, you may want to use WordPress’ built-in debugging feature. Pasting a bit of code into your site’s wp-config.php file enables debugging on your site. Any errors found are recorded in a file in your directory.
Josh Pollock wrote a post on how to use this feature in WordPress a while back. If you’re a developer, go ahead and start debugging your site. If you’re an average site owner, you may want to sit this one out as you may not know the difference between a minor error that can be safely ignored and a major error that should be taken care of promptly.
Normally, debugging a live site is frowned upon as it may reveal essential code to site visitors, among other things. However, it may be the only thing that explains what might be causing the 500 internal server error to run on your site.

Checking File Permissions

check-file-permissions
This likely isn’t the issue, but it’s still worth checking. In your WordPress directory, permissions for folders and files should be 755 or 644. Setting permissions to anything else may cause problems, including 500 internal server errors.
Open your root directory in an FTP client. Many clients, including FileZilla, have a Permissions tab you can use to quickly check the permissions for each file and folder in your root directory. Make sure these are not set to anything other than 755 or 644.

Uploading Fresh Versions of wp-admin and wp-includes to Your Site

This step should be a last resort, but if you’ve used the above solutions and still cannot find one that works, it’s worth a try. Backup your site, and download a fresh version of WordPress from the main site.
wp-admin-wp-includes-folders
Extract the files from the ZIP file, and open the extracted folder. Open your site’s root directory in an FTP client, and upload the wp-admin and wp-includes from your fresh version of WordPress to your site’s directory, overwriting the older versions.
Refresh the client, and refresh your site. If the error is gone, it was likely caused by a corrupted core file. If you still see the error, you may have no other option than to contact your host.

Contacting Your Host

If you’ve gone through all of these steps and still cannot find a solution, your host may have it. It is, however, important that you go through these steps to ensure the issue is not occurring in your root directory.
The quality of the support you receive differs between hosts, but many hosts may shrug the issue off and blame your site’s files rather than their servers. This isn’t out of the question as third-party plugins and themes do cause plenty of issues that are out of your host’s hands.
So, it’s important that you go through all of these steps so you can explain to them that you’ve checked every nook and cranny of your file system and can’t find a single issue that would lead to the 500 internal server error that’s running on your site.
Politely ask them to check their server logs to see if the issue is there.

Final Thoughts

The 500 internal server error is a frustrating issue as it doesn’t always have a clear cause or a clear solution. It requires a lot of troubleshooting, as you’ve learned, but I hope these steps have at least made the task a little less irritating.
All in all, make sure you back up your site on a regular basis and update your plugins, themes, and WordPress core files as soon as they’re available. A great way to prevent this issue is to ask your theme’s developer whether or not their theme or an update to their theme is compatible with the plugins you’re running on your site as this may corrupt your .htaccess file.
Lastly, make sure you upgrade your hosting package accordingly. This error is most likely to occur on a small-budget shared hosting server, so it’s important for you to begin researching other options so you can move your site to a server capable of handling your growing site.
April 04, 2016

Stuck in WordPress Maintenance Mode? Here’s How to Get Out of It


Stuck in WordPress Maintenance Mode? Here’s How to Get Out of ItWordPress maintenance mode is a feature WordPress core enables when you update to the latest version of WordPress or update plugins and themes. It displays a message across your site that lets users know you’re working on something so you can perform updates without forcing users to use a semi-broken site.
The update screen within WordPress typically reads “Enabling maintenance mode…” and “Disabling maintenance mode…” in its update sequence, but there are times, however rare, when this goes awry. If you’re racking your brain (and Google) trying to figure out how to fix this issue, you’ll be delighted to know it’s a lot easier than you think.
Let’s get started.

How Updates and WordPress Maintenance Mode Works

wordpress-updates
Updates play a vital role in the health of a system, and that goes beyond your WordPress site. Your operating system requires them. The applications you use on your desktop and mobile phone require them. Even your game consoles require them, but why are they so important?
The simple answer is security. Bugs occur, and new threats pop up every day. One sure way to ensure users are protected is by providing updates that feature security patches and new security features. However, updates are also used to provide new features for an application to improve its functionality.

What Happens Behind the Scenes When WordPress Performs Updates?

wordpress-update-process
Many hardcore WordPress users, including some of you, perform manual updates to prevent some of the issues that can occur during this process. If you’re experiencing this maintenance mode issue, you likely use the WordPress admin area to update WordPress, your themes, and your plugins.
If so, you likely don’t know what’s going on behind the scenes, in your root directory, while these updates take place. In a WordPress core update, for instance, new files are unzipped and copied over while old files are deleted. The process is quick, but if it goes wrong, it could make your site unusable.
WordPress has its updater create a .maintenance file in your root directory to combat this issue. The updater deletes this file before it completes its process so you never know the file ever existed on your site.
If you’re stuck in WordPress maintenance mode, your updater likely failed to delete this file, so you’ll need to delete it manually.

How to Delete the .maintenance File

delete-maintenance-file-cpanel

Deleting the .maintenance file can either be hard or easy depending on your level of experience in accessing your site’s file system. If you’re comfortable with this, all you need to do is access your site’s root directory, make hidden files viewable, and delete the .maintenance file.
If you’re using an FTP client, refresh it before testing your site. If you still see the maintenance mode message, test it on a different browser or clear your browser’s cache.

How to Delete the .maintenance File in cPanel

cpanel-show-hidden-files
cPanel is not the only file manager out there, but it is one of the most popular. If your host uses a different file manager and you’re not able to figure out how to use it using these cPanel instructions, contact your host for instructions on how to access your WordPress root directory.
If your host uses cPanel, log into it. Many file managers hide files that begin with a dot by default, so we need to make sure hidden files are showing. Once you’re logged into cPanel, scroll down to the files section, and click File Manager.
When the File Manager Directory Selection pop-up appears, select Web Root (public_html) and make sure Show Hidden Files is selected. Click Go. This takes you directly to where your .maintenance file is located. Find it, delete it, and refresh your browser with your site open to see if the message is gone.
If the pop-up does not appear when you click on File Manager and you do not see any dot files in your public_html directory, go back to cPanel, scroll down to the bottom, and click Reset All Interface Settings. Refresh the page, and try again. Try clearing your browser’s cache if it still doesn’t work.

How to Delete the .maintenance File Using FileZilla

delete-maintenance-file-filezilla
An FTP Client is a file manager you can use on your desktop. It comes with more features and permissions than the ones available through hosts more often than not. WordPress recommends using FileZilla for Windows systems and Cyberduck for Macs, though both of these programs have versions for both operating systems.
The following instructions are for FileZilla. Once you download the installer, run it and install the program on your computer, open it. Click File, and select Site Manager.
You’ll need to know your FTP details. Typically, this is the username and password you use to access your site’s file manager, but be sure to ask your host directly if you’re not sure.
Click New Site. Make sure the General tab is selected, and configure the following settings:
  • Host – Enter your domain. If your domain is example.com, enter example.com.
  • Port – Leave blank.
  • Protocol – FTP – File Transfer Protocol.
  • Encryption – Only use plain FTP.
  • Logon Type – Normal.
  • User – FTP username from your host.
  • Password – FTP password from your host.
Click over to the Transfer Settings tab. Tick the box for Limit Number of Simultaneous Connections, and enter 8 as the Maximum Number of Connections. This keeps the server from blocking your IP address, especially if you’re on a shared hosting server.
Click Connect. If you see folders named wp-content and wp-admin, you’re in the right place. If not, double click your root directory folder. This is typically public_html, but ask your host if you’re not sure.
If you do not see any dot files, click Server, and select Force Showing Hidden Files. Find the .maintenance file and delete it. Click the Refresh the File and Folder Lists button, and refresh your browser to check your site. Clear your cache and check again if you’re having issues.

What Causes WordPress Maintenance Mode Issues?

Image by Vitaliy Snitovets / shutterstock.com
Image by Vitaliy Snitovets / shutterstock.com
This issue has two main causes:
  1. You allowed update requests to pile up and attempted to update several things at once.
  2. The theme or plugin(s) you attempted to update is not compatible with your version of WordPress.

How to Prevent Update Issues

Theme and plugin updates can break a site, so updating things as soon as they’re available isn’t always recommended even though those updates likely contain valuable security patches. Before you perform an update, back up your entire WordPress site. Don’t trust your host to do it for you.
Performing regular backups and performing backups right before you update things will keep you protected enough to update things promptly rather than allowing them to pile up. You should also stop using the bulk update feature and update WordPress, plugins, and themes one by one.
Check out Nathan’s tips on running automatic WordPress updates. If you run a fairly basic WordPress site, you may benefit from them.

How to Prevent Compatibility Issues

New releases of WordPress versions are great, but they sometimes occur before developers have a chance to catch up. If a new WordPress version has come out recently, make sure the plugin or theme you wish to update is compatible with it. You can follow the developer’s email list, check their blog or ask them directly to stay up to date on this issue.
Similarly, if you’re on an older version of WordPress and only keep your plugins and theme up to date, you may start running into compatibility issues. It’s best to keep your site up to date by making sure you’re running the latest version of WordPress. This keeps your site more secure as well.

Issues with WordPress Maintenance Plugins

This is actually an entirely different issue, but it is related to some degree, making it worth a mention here. WordPress maintenance plugins allow you to put your site in maintenance mode so you can make minor and major changes to your site without expecting users to put up with them. The plugins allow you to use a custom maintenance page optimized for style and marketing purposes.
Unfortunately, some of these plugins fail to take your site out of maintenance mode after you request them to do so. Thankfully, the solution is simpler than deleting a file in your root directory. More often than not, all you need to do is empty the page cache if you’re using a caching plugin or deactivate/delete the plugin before emptying the cache. This should fix it quick.

Final Thoughts

Having a site stuck in maintenance mode can be an annoying issue, especially when you never intended to take your site down for maintenance in the first place, but at least the solution is an easy one. Still, that doesn’t necessarily mean you’re in the clear simply because you fixed it once.
The issue still occurred, and you need to take a few steps back to figure out what caused it so you can prevent something like this from happening in the future. The most important thing to do from here on out is make sure you’re updating WordPress, your theme, as well as your plugins regularly.
If you don’t think you can remember to check on your updates regularly, pick an “update day” for yourself and set a reminder once a week, bi-weekly, or once a month. On this day, you’ll log into your WordPress admin area, create a backup, and then update everything that needs to be updated one by one.
Check your site after each update. If there’s an issue, see if it’s fixable. If not, use your backup to roll your site back to when it was working properly and consider replacing the plugin that caused the issue.
Have you ever had this issue? Let us know how you solved it in the comments below, or at the very least, tell your worst update horror story!
April 04, 2016

Converting HTML Sites to WordPress Sites

Converting HTML Sites to WordPress Sites

In the beginning (of the web) all websites were made with nothing but text and static HTML. Now though, over 20 years later, the web is a much different place. Websites are much more complex. They provide richer and more enjoyable experiences for site creators and visitors alike.
First-Website
Check it out, the world’s first website! See it live here.
This is in large part thanks to open source projects like WordPress. Which, over the last ten years or so, has succeeded in its core mission to democratize online publishing (and a lot more in the process) so that anyone with a WordPress install and the right theme/plugins can have a modern website with advanced design and functionality. No coding–not even HTML!–required.
divi2-screenshots
This is Divi by yours truly, Elegant Themes. This is one of the most advanced WordPress themes on the market today. And it requires zero coding ability to use!
This is why to avid WordPress users like myself, it’s almost hard to believe that in 2015 someone might still be operating a static HTML website instead of a WordPress website with a theme and plugins. But the fact is there are still a significant amount of active HTML only sites out there. (Or HTML with a bit of CSS.)
Granted, these site owners may have good reasons for not upgrading or converting. Maybe their site content never changes and the simple formatting and design already in place is serviceable? Or maybe it’s less of a hassle than worrying about keeping a WordPress site updated? Both are valid reasons (among others). Prime examples of, “Don’t fix what isn’t broken.”
However, I have a feeling that these might not be the primary reason some (perhaps many) haven’t made the leap. The most obvious one being that they simply don’t know how to convert their HTML site into a WordPress site. Especially without losing content or needing to do excessive formatting on a page by page basis.
Thankfully, as is often the case with WordPress, there are a number of ways to go about solving this problem. I’ve compiled some options below.

Your Options for Converting a Static HTML site to a WordPress site

How you choose to convert your static HTML site into a WordPress site will no doubt depend upon your personal preference, desired time/monetary investment, and skill level with code. You will have to be the one to decide which is best for you, but with the summaries below you should be able to decide quickly and skip straight to the most relevant information in this post for your specific situation.
There are three main options:
1. Manually create a WordPress theme based on your current static HTML site.
This will require you to get into your code. You will have to access your current site directory via FTP and use your existing code as a starting point. From there you will need to create the necessary files for a WordPress theme and copy bits of code from the WordPress codex. This is fairly simple and straight forward if you have some experience with HTML, CSS, and a bit of PHP.
2. Install a pre-made theme and simply migrate your content.
This is probably the best option at the intersection of simplicity and value. Assuming you already have hosting for your current website, you will only need to spend money if you choose to purchase a premium theme. The plugin we will use for importing content is freely available in the official WordPress Plugin Repository.
3. Paying to have an HTML to WordPress conversion service re-create your site.
This is the easiest solution, as it doesn’t require you to do much of anything. However it will not do much for familiarizing you with WordPress and the cost will vary depending on who you choose to hire. I won’t be covering this option in the sections below because if this is the route you are interested in, you can simply do a quick search for service providers and they will take care of the rest.

Preparing for HTML to WordPress Conversion

No matter which route you decide to take below, there are a few things you will want to do before diving in.
The first is choosing a hosting plan. You’ll want to look over the options that are out there and decide on a package that best fits your needs. Or perhaps you’d like to create a local WordPress installation instead? You can always migrate it to a hosting service later.
Once you’ve chosen, you will need to install WordPress and log into WP Admin. This is the point at which our two possible paths divide.

Manually Converting Your Static HTML Site to WordPress

If your goal is to not only get your content from your static HTML site into WordPress but also duplicate your current design, this means you will need to create your own custom theme. Thankfully, that is not as scary as it might sound at first. It only involves creating a few folders and files, a bit of copy and paste, and then uploading the result.
You’re going to need a code editor such as Sublime or Notepad++ and access to both your HTML site’s directory and your new WordPress install’s directory.

Step 1: Create a New Theme Folder and Necessary Files

On your desktop, create a new folder to hold your theme files. Name it whatever you’d like your theme to be named.
Next, create a few files (which all go in your new theme folder) in your code editor. Don’t do anything to them just yet. Just leave them open for further editing.
  • Style.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

Step 2: Copy Existing CSS Into New Stylesheet

If you’re looking to duplicate a design, this probably means you have at least some CSS that you want to save. So the first file you’re going to want to edit is your Style.css file.
To begin, add the following to the top of your file.
/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/
After this section simply paste your existing CSS below. Save and close the file.

Step 3: Separate Your Current HTML

Before we get into step three, let me give you a quick note on how WordPress works. WordPress uses PHP to call and retrieve pieces of data from its underlying database. Each file that we’re using in this little tutorial is designed to tell WordPress which part of your site content is to be displayed and where.
So when I say we are going to “chop up” your existing HTML, what we’re actually doing is simply cutting and pasting parts of your existing code into the different files we’ve just created, so that WordPress will know where to display them.
Here we go.
First, open your current site’s index.html file. Highlight everything from the top of the file to the opening div class=”main” tag. Copy and paste this section into your header.php file, save and close.
Second, go back to your index.html file. Highlight the aside class=”sidebar” element and everything inside it. Copy and paste this section into your sidebar.php file, save and close.
Third, in your index.html select everything after your sidebar and copy and paste it into your footer.php file, save and close.
Finally, in your index.html file, select everything that’s left (this should be the main content section) and paste it into your index.php file. Save, but do not close yet.
You can close your index.html file now however and move on to the final steps. Almost done!

Step 4: Finalize Your Index.php File

In order to finalize your new theme’s index.php file you need to make sure it can call up the other section (besides the main content) that are housed in the other files you’ve created. Or in other words, put back together the elements we just “chopped up”.
At the very top of your index.php file, place the following line of php.
<?php get_header(); ?>
Then, at the very bottom of your index.php file, place these lines of php.
<?php get_sidebar(); ?>
<?php get_footer(); ?>
And finally, we have to add what’s called The Loop. This is the primary bit of php that WordPress uses to display your post content to visitors. So the final step in creating your new theme’s index.php file is adding the code below within the content section.
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
Save your index.php and close. You’re theme is now finished! All that’s left is to upload it to your WordPress website.

Step 5: Upload Your New Theme

Now that you’ve created your theme files and have them all stored within your new theme folder, you’re going to need to access your new WordPress install’s directory.
Place your new theme folder inside /wp-content/themes/. Then navigate back to WP Admin > Appearance > Themes and your newly created theme should appear there. Go ahead and activate it!
All that’s left to do at this point is populate your new WordPress website with your old site’s content. Follow along with the section below (skipping over the part about using a pre-made theme) to see how that is done.

Using a Pre-Made WordPress Theme and Importing HTML Content

If the steps above seem too intensive or time consuming to you then rest assured, there is another way. Instead of converting whatever design you happen to be working with right now into a WordPress theme, you can take advantage of any one of the thousands of themes available in the broader WordPress marketplace.
There are free themes and there are premium themes. Before deciding which is best for you, you may want to read up on which themes are designed to cater to your needs and browse by theme category here at Elegant Themes and elsewhere.
Once you’ve chosen a theme you like (and have its zipped file package downloaded) you’ll want to head back to WP Admin > Appearance > Themes > Add New and install/activate your new WordPress theme.
Once this is done, you will have a new WordPress website and theme–but little else. When you preview your site, it will be empty of content and probably look sort of boring. That’s ok, because next we are going to import your old site’s content.
In WP Admin go to Plugins > Add New and search for a plugin called HTML Import 2 by Stephanie Leary. Once this plugin is installed and activated, follow its handy user guide to import your entire directory of HTML pages. Complete with images!
After this you will have all of your old content living on WordPress and formatted by your new theme. Or, if you created your own theme above, your site should pretty much look like it did before–just running on WordPress.

In Conclusion

If you’ve used this post as a guide for migrating your website onto WordPress then you’ve just joined one of the largest open source communities in the world. Welcome! It’s a fun place with lots of developers, designers, bloggers, DIYers, and more–all building, playing, and creating with WordPress and WordPress themes/plugins.
If you’ve “caught the WordPress bug” the official WordPress.org website is chock full of useful themes, plugins, and other resources. If you’d like to further tweak your theme files, explore the Codex for seemingly endless tips, tricks, and variations.
And of course we hope you’ll stick around to chat in the comments below and subscribe for more blog posts in the future.