Posted on

How to Fix 503 Service Unavailable Error in WordPress

Are you seeing a 503 service unavailable error on your WordPress website?

The problem with the 503 error is that it gives you no clues about what’s causing it, which makes it extremely frustrating for beginners.

In this article, we will show you how to fix the 503 service unavailable error in WordPress.

How to fix 503 service unavailable error in WordPress

What Is the 503 Service Unavailable Error?

A 503 service unavailable error indicates that your website server is unable to handle any requests due to overload or maintenance.

The 503 error occurs when your web server is unable to get a proper response from a PHP script. This PHP script could be a WordPress plugin, a theme, or a misbehaving custom code snippet.

All WordPress hosting companies offer a fixed amount of resources for each hosting account. For websites on shared hosting, this limit cannot handle heavy usage of server resources.

If the error is caused by heavy usage, a server glitch, or a DDoS attack, then it could automatically disappear in a few minutes. However, if it is caused by bad code on your website, then it will keep occurring unless you find and disable the code that’s causing it.

That being said, let’s take a look at how to easily fix 503 service unavailable errors in WordPress.

Fixing 503 Service Unavailable Error in WordPress

As we mentioned above, this error is caused when your web server is unable to get a proper response from a PHP script running in the background.

To fix it, we will disable all unnecessary PHP scripts one by one until the error is resolved.

Let’s get started.

1. Deactivate All WordPress Plugins

All your WordPress plugins are PHP scripts, so the first thing you need to do is deactivate all your WordPress plugins.

Since you cannot log in to your WordPress dashboard due to the 503 error, you will need to connect to your website using an FTP client or File Manager in cPanel.

If you’re using an FTP client, then simply connect it to your website. For more details, please see our guide on how to use FTP to upload files to WordPress.

Once connected, simply go to the /wp-content/ folder. Then right-click on the ‘plugins’ folder and rename it to ‘plugins-old’.

Rename plugin folder

Next, you need to create a new folder and name it plugins.

Now, you need to visit your WordPress site to see if this resolved the error.

If it did, then this means a plugin installed on your website was causing the error. The above steps have deactivated all WordPress plugins.

To figure out which plugin was causing the issue, you can go to the /wp-content/ folder. From here, right-click on the empty plugins folder and select the ‘Delete’ option.

Delete empty plugins folder

After that you need to rename the plugins-old folder to plugins. This will make all your previously installed plugins available to WordPress. However, these plugins will remain deactivated.

You need to visit the WordPress admin area and then go to the plugins page. You can activate your plugins one by one and visit different pages on your website after activating each plugin. Keep doing that until you find the plugin causing the 503 error.

If this step resolves your issue, then you don’t need to follow the rest of the instructions on this page. Otherwise, you can move on to the next step.

For more details, please see our guide on how to deactivate all plugins when not able to access wp-admin.

2. Switch to a Default WordPress Theme

If deactivating plugins didn’t resolve the issue, then the next step would be to switch to a default WordPress theme. This will deactivate your current WordPress theme.

First, you need to connect to your WordPress site using an FTP client or File Manager in cPanel. Once connected, go to the /wp-content/themes/ folder.

Go to the themes folder

Next, you can locate your currently active WordPress theme and download it to your computer as a backup.

To do that, simply right-click on the folder named after your website theme and click the ‘Download’ option.

Download active theme

After downloading your theme files, you can go ahead and delete it from your server.

Now, if you already have a default theme like Twenty Twenty-Four installed, then it will be automatically activated. If you don’t, then you can go ahead and install a default theme on your website.

Thoroughly check your website to make sure that the 503 service unavailable error is resolved.

3. Reinstall WordPress with a Fresh Copy

If you are still facing 503 errors on your WordPress website after deactivating plugins and changing the website theme, then you may need to reinstall WordPress.

This method is usually required if one of your WordPress core files gets corrupted or modified. As a result, it might interfere with your site’s functionality and cause a 503 service unavailable error.

Before reinstalling WordPress, it’s better to create a backup of your website. This way, you can revert back to the previous state and recover your data in case something goes wrong.

You can follow our step-by-step guide on how to uninstall and reinstall WordPress for more details.

4. Upgrade Your Server Resources

It is also possible that your website server resources are not able to handle all the requests. In that case, it’s worth upgrading your website hosting plan and checking if it resolves the 503 error.

However, before proceeding with the upgrade process, it would be best to contact your hosting provider and find out what’s causing the 503 error.

If it is because of a lack of server resources, then you can choose the fastest hosting provider or move to a higher-pricing package with your existing hosting company.

Remember to choose a website server with more storage and speed. It should be able to handle high-traffic loads without delay.

If you’re using shared WordPress hosting, consider moving to a managed hosting solution. Besides that, you should look for built-in caching, which will help boost your server’s performance.

Additional Resources for Fixing Other WordPress Errors

Here are some additional resources for other WordPress errors you may come across while running your website:

We hope this article helped you learn how to fix the 503 service unavailable error in WordPress. You may also want to see our ultimate list of the most common WordPress errors and the ultimate guide to boosting WordPress speed and performance.

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 Fix 503 Service Unavailable Error in WordPress first appeared on WPBeginner.

Posted on

Beyond CSS Media Queries

Media queries have been around almost as long as CSS itself — and with no flex, no grid, no responsive units, and no math functions, media queries were the most pragmatic choice available to make a somewhat responsive website.

In the early 2010s, with the proliferation of mobile devices and the timely publication of Ethan Marcotte’s classic article “Responsive Web Design”, media queries became much needed for crafting layouts that could morph across screens and devices. Even when the CSS Flexbox and Grid specifications rolled out, media queries for resizing never left.

While data on the actual usage of media queries is elusive, the fact that they have grown over time with additional features that go well beyond the viewport and into things like user preferences continues to make them a bellwether ingredient for responsive design.

Today, there are more options and tools in CSS for establishing layouts that allow page elements to adapt to many different conditions besides the size of the viewport. Some are more widely used — Flexbox and Grid for certain — but also things like responsive length units and, most notably, container queries, a concept we will come back to in a bit.

But media queries are still often the de facto tool that developers reach for. Maybe it’s muscle memory, inconsistent browser support, or that we’re stuck in our ways, but adoption of the modern approaches we have for responsive interfaces seems slow to take off.

To be clear, I am all for media queries. They play a significant role in the work we do above and beyond watching the viewport size to make better and more accessible user experiences based on a user’s OS preferences, the type of input device they’re using, and more.

But should media queries continue to be the gold standard for responsive layouts? As always, it depends, but

It is undeniable that media queries have evolved toward accessibility solutions, making space for other CSS features to take responsibility for responsiveness.

The Problem With Media Queries

Media queries seemed like a great solution for most responsive-related problems, but as the web has grown towards bigger and more complex layouts, the limits of media queries are more prevalent than ever.

Problem #1: They Are Viewport-Focused

When writing media query breakpoints where we want the layout to adapt, we only have access to the viewport’s properties, like width or orientation. Sometimes, all we need is to tweak a font size, and the viewport is our best bud for that, but most times, context is important.

Components on a page share space with others and are positioned relative to each other according to normal document flow. If all we have access to is the viewport width, knowing exactly where to establish a particular breakpoint becomes a task of compromises where some components will respond well to the adapted layout while others will need additional adjustments at that specific breakpoint.

So, there we are, resizing our browser and looking for the correct breakpoint where our content becomes too squished.

The following example probably has the worst CSS you will see in a while, but it helps to understand one of the problems with media queries.

That same layout in mobile simply does not work. Tables have their own set of responsive challenges as it is, and while there is no shortage of solutions, we may be able to consider another layout using modern techniques that are way less engineered.

We are doing much more than simply changing the width or height of elements! Border colors, element visibility, and flex directions need to be changed, and it can only be done through a media query, right? Well, even in cases where we have to completely switch a layout depending on the viewport size, we can better achieve it with container queries.

Again, Problem #1 of media queries is that they only consider the viewport size when making decisions and are completely ignorant of an element’s surrounding context.

That may not be a big concern if all we’re talking about is a series of elements that are allowed to take up the full page width because the full page width is very much related to the viewport size, making media queries a perfectly fine choice for making adjustments.

See the Pen Responsive Cards Using Media Queries [forked] by Monknow.

But say we want to display those same elements as part of a multi-column layout where they are included in a narrow column as an <aside> next to a larger column containing a <main> element. Now we’re in trouble.

A more traditional solution is to write a series of media queries depending on where the element is used and where its content breaks. But media queries completely miss the relationship between the <main> and <aside> elements, which is a big deal since the size of one influences the size of the other according to normal document flow.

See the Pen Responsive Cards Using Media Queries Inside Container [forked] by Monknow.

The .cards element is in the context of the <aside> element and is squished as a result of being in a narrow column. What would be great is to change the layout of each .card component when the .cards element that contains them reaches a certain size rather than when the viewport is a certain size.

That’s where container queries come into play, allowing us to conditionally apply styles based on an element’s size. We register an element as a “container,” which, in our current example, is the unordered list containing the series of .card components. We’re essentially giving the parent selector a great deal of power to influence the current layout.

.cards {
  container-name: cards;
}

Container queries monitor an element by its size, and we need to tell the browser exactly how to interpret that size by giving .cards a container-type, which can be the container’s size (i.e., in the block and inline directions) or its inline-size (i.e., the total length in the inline direction). There’s a normal value that removes sizing considerations but allows the element to be queried by its styles.

.cards {
  container-name: cards;
  container-type: inline-size;
}

We can simplify things down a bit using the container shorthand property.

.cards {
  container: cards / inline-size;
}

Now, we can adjust the layout of the .card components when the .cards container is a certain inline size. Container queries use the same syntax as media queries but use the @container at-rule instead of @media.

.cards {
  container: cards / inline-size;
}

@container cards (width < 700px) {
  .cards li {
    flex-flow: column;
  }
}

Now, each .card is a flexible container that flows in the column direction when the width of the .cards container is less than 700px. Any wider than that, we have the same to lay them out in a row direction instead.

See the Pen Responsive Cards Using Container Queries [forked] by Monknow.

Style queries are a cousin to container queries in the sense that we can query the container’s styles and conditionally apply style changes to its children, say changing a child element’s color to white when the container’s background-color is set to a dark color. We’re still in the early days, and support for style queries and browser support is still evolving.

I hope this gives you a sense of how amazing it is that we have this context-aware way of establishing responsive layouts. Containers are a completely new idea in CSS (although we’ve used the term synonymously with “parent element” for ages) that is novel and elegant.

So, Are Media Queries Useless?

NO! While media queries have been the go-to solution for responsive design, their limitations are glaringly obvious now that we have more robust tools in CSS that are designed to solve those limits.

That doesn’t make media queries obsolete — merely a different tool that’s part of a larger toolset for building responsive interfaces. Besides, media queries still address vital accessibility concerns thanks to their ability to recognize a user’s visual and motion preferences — among other settings — at the operating system level.

So, yes, keep using media queries! But maybe reach for them sparingly since CSS has a lot more to offer us.

Posted on

AlmaLinux vs Rocky Linux for a new server

I watched both grow , from their early beginnings , because our current servers are on CentOS and of course I am not happy with where CentOS has gone.
Because the CentOS lesson , I have been really caution and I am a little bit too worried from witch one from those to select. If you have build in a server in top of an OS a tons of others systems you CAN'T just change the OS. You just migrate to a new server with whatever that means (it is not just the cost , consider the burden to the Sales & Demand dpt. to make all users to use a new serve in their outlook or what ever their are using)
I will not list the advertised pros for each one of them in relation to the other ( to be fair an LLM can summarize pretty well press releases even if you ask one vs the other). And notice that I am leaning to AlmaLinux.

But ... If you imagine AlmaLinux as an entity , then that entity is living out of resources from CloudLinux. There is nothing bad about that , it is not their's (CloudLinux) property nor can they can influence the AlmaLinux future path (I hope). But if CloudLinux bankrupts , or just stops supporting AlmaLinux what happens ? Will AlmaLinux still be there ?

And there there is Rocky Linux , witch seems great. And the sales point is that the human that is under CentOS is also under Rocky. And exactly this is the reason I am not leaning towards Rocky. Why couldn't the same play that happened with CentOS repeat with Rocky ? Some entity (big company or a crazy billionaire) buys it out and make your version non upgradable as it is, except of course if you pay a stream something and be a forever customer that they can bill you as match as they like.

What is your view in this dilemma ?

Posted on

How to Use the Psychology of Popups to Boost Signups by 250%

I’ve been doing popup marketing for over a decade now, and I’ve found that it is one of the most effective ways to prompt action and get more leads online.

The problem is that popups can be annoying. Studies show that over 80% of website visitors will form a low opinion of your brand if they feel your popups and ads are deceptive, intrusive, or obnoxious.

That’s why it’s important to use psychological principles in your popups to grab attention and influence user behavior. This can help you create popups that offer real value to your visitors instead of annoying them.

Here are some of my favorite tactics and approaches that leverage the psychology of popups to increase signups by around 250%.

Note: This is a guest post by Thomas Griffin, the co-founder of OptinMonster, the #1 WordPress popup builder and lead generation plugin. This is an expert column that we publish every Thursday, where we invite a WordPress expert to share their experiences with our readers.

How to Use the Psychology of Popups to Boost Signups

I will cover a few different topics in this post, and you can use the quick links below to navigate between the different sections:

  1. Optimize the Timing of Popups to Be Less Intrusive
  2. Personalize Your Popups Based on User Behavior
  3. Gain Users' Trust Using Social Proof
  4. Nudge Users Towards Action Using Scarcity and Urgency
  5. Build Anticipation Using the Fear of Missing Out (FOMO)
  6. Inspire Action by Using Emotional Appeal
  7. Use Color Psychology to Capture Attention

1. Optimize the Timing of Popups to Be Less Intrusive

Imagine walking into a physical store, and a salesperson immediately approaches you with suggestions about what to buy. They then continue to come back with more recommendations throughout your visit. Although they have good intentions, this may feel pushy and intrusive.

The same thing can happen with popups, but it doesn’t have to. Waiting until your visitors are ready before you display a popup with helpful content can improve the user experience and boost conversions.

This is a psychological principle known as ‘pattern interrupt’. An unexpected popup can disrupt the visitor’s flow and refocus their attention, similar to a salesperson approaching you in a store.

But for the popup to be welcomed, there needs to be a balance between being intrusive and providing helpful information. This makes the timing of popups critical.

Popups should appear only once your users are most receptive and least likely to be disrupted.

Shockbyte Popup Example

A popup that appears immediately upon visiting a website might be perceived as intrusive. By contrast, one that shows up after they spend some time on your site will feel more acceptable.

That’s why the best popup marketing software, including OptinMonster, will allow you to set powerful targeting rules. These rules enable you to show personalized campaigns to users based on a large set of triggers or conditions.

For example, time-based rules can display a popup after the user has spent some time on your WordPress website or on a specific page after they visit a certain number of web pages. Alternatively, a scroll distance rule can display a popup after the visitor has scrolled down the page a set distance.

Adding Time-Based Triggers to an OptinMonster Popup

OptinMonster can also use InactivitySensor to time when a user has been inactive, or Exit-Intent technology to sense the exact moment they are about to leave your website.

Using these strategies has allowed online businesses like Shockbyte to increase their signups by more than double, so it’s worth playing around with different timing rules to see what works for your business.

2. Personalize Your Popups Based on User Behavior

Studies show that 74% of your visitors expect personalized content, and it can boost conversions by 42%.

Personalization is an important psychological principle, and tailoring your popups to users’ interests and behavior patterns will make them more relevant and engaging.

The problem is that if you are using popups to collect leads, you don’t already have any personal information about your target visitors, which makes personalization challenging.

This is where personalized triggers can make a big difference.

For example, OptinMonster’s referral detection feature can easily determine the domain from where each visitor visits your website. This allows you to display a custom popup if the user was referred to your site from another specific website.

Let’s say you’re getting a lot of Pinterest traffic. You could create a targeted popup that offers people a discount when they sign up for your newsletter.

Referrer Detection Popup Example

You can also trigger a popup based on the specific page they are currently looking at. That page can give you a clue as to what the visitor is interested in and then show a popup related to the topic being discussed or the product being reviewed.

Another option is to personalize your content based on the visitor’s location. 80% of marketers use location-based personalization and get great results.

Example of a Popup Personalized by Location

Once a user has signed up for your newsletter, you can offer even greater personalization. That’s because many popup software options have access to the personal data you have collected, such as the visitor’s name, gender, age, birthday, and more.

This means you can easily create more personal popups, such as mentioning the customer by name. You simply insert this information on your popup using smart tags.

Example of a Popup Being Personalized With the User's Name

On top of personalized triggers, I like to learn more about visitor behavior by tracking the user journey using an analytics plugin like MonsterInsights.

For example, you can see which pages a specific user views before filling out your signup form.

Viewing User Journey in MonsterInsights

This will show you which form or web page inspires the most signups, how much time users spend on your website and how far they scroll down the page before signing up, as well as the amount of engagement your videos are getting.

You can then use this information when deciding where and when to display your popups and optimize your highest-performing pages to boost organic traffic and leads.

3. Gain User Trust Using Social Proof

When people are unsure what to do, they often follow the crowd. Social proof is a psychological phenomenon where people are more likely to take action if they see others doing it first. It’s like a shortcut their brains use to decide if something is good or not.

That’s why people are more likely to follow someone on Twitter who already has lots of followers, watch a movie that has good user reviews, or choose a restaurant with a long line of people waiting to get in rather than one that’s empty.

You can use social proof on website popups by including user testimonials. This can help build trust and credibility in a short amount of time, influencing users towards conversion.

The simplest way to get started with social proof is to display the number of subscribers you already have. This is a quick way to lend credibility to your newsletter.

Example of Showing the Number of Subscribers in a Popup

Another way you can use testimonials for social proof is influencer marketing. Including endorsements from celebrities and experts in your niche who use your products or subscribe to your newsletter can gain your users’ trust and grow your signups.

For example, Be A Better Blogger achieved a 26% conversion rate by featuring a celebrity testimonial in a popup.

Example of Adding a Celebrity Testimonial to a Popup

You could also display your social media statistics, list the awards and badges you have won, list the number of 5-star ratings you have, and more.

All of these strategies will show your visitors that other people are happy with your product or service, making them more likely to try it themselves.

4. Nudge Users Towards Action Using Scarcity and Urgency

Urgency and scarcity are two closely linked psychological principles that can be used in popups to nudge users toward a quicker decision.

Many of my clients with online stores like to create a sense of urgency with a limited-time discount. You can use the same strategy to boost your signups by offering a discount coupon or giveaway to new subscribers for a limited time.

You can place this information with a countdown timer in a popup to emphasize that time is running out. This is easily done in OptinMonster by adding a Countdown block to a time-sensitive offer popup, as you can see on the Kennedy Blue website.

Example of Displaying a Countdown Timer in a Popup

Typical examples of scarcity include products that are low in stock and limited edition products. To encourage newsletter signups, you could create a sense of scarcity by offering a lead magnet or other incentive to the first 100 or so users to subscribe.

Alternatively, you can offer special deals for new subscribers each month. Crossrope is a fitness company specializing in jump rope workouts, and they used this strategy successfully to explode their email list by 900%.

Example of Using Scarcity in a Popup

You can highlight the limited-time deal by using phrases like “Don’t miss out!” or “Last chance!” on your popups.

Remember, the key is to use urgency and scarcity ethically and authentically. Make sure you avoid manipulative tactics that annoy people and may damage user trust. For instance, never display fake countdown timers or mark an item as low stock when you have plenty.

5. Build Anticipation Using the Fear of Missing Out (FOMO)

Do you ever feel left out when other people are enjoying something exciting that you’re not? This is a psychological trigger known as FOMO, or the fear of missing out.

You can create a sense of FOMO using the strategies of urgency, scarcity, and social proof that we covered above. But that’s just the start.

Another way is to offer exclusive content that only email subscribers can access. This could be content on your website or downloadable content such as an ebook.

Using OptinMonster to Offer Content Upgrades

Content locking lets you blur or remove content below a set point on the page as you see above. Visitors have to opt in to see the rest of the article. Some of my customers have boosted conversions by 150% using this strategy.

You can also build anticipation by making your visitors aware of something that is not yet available, such as an upcoming product, a new ebook you are working on, or a webinar or training course. Let them know that they can stay updated by signing up for your mailing list.

Marie Forleo builds anticipation on her website by promoting her flagship course, B-School. Although this course runs just once a year, Marie includes a notice on her website that visitors can subscribe to her email list so they stay in the loop and don’t miss out.

B-School Popup Example Using FOMO

6. Inspire Action by Using Emotional Appeal

Popups that bring to mind positive emotions are more likely to resonate with users and have them respond to your call to action. You can appeal to strong emotions such as excitement, curiosity, aspiration, and humor.

Power words are persuasive words you can use in your popups to trigger a psychological or emotional response. They can entice your users to sign up and are one of the easiest ways to increase your conversion rates.

My team put together a helpful list of the best power words to use in your popups that can increase conversions by 12.7%.

Rich Page tested two different headlines in his popup, one that didn’t use power words and the one in the following screenshot that does.

Example of a Popup Using Power Words

With the optimized popup that appealed to his visitors’ emotions, he increased his signup rate from 12% to 50%.

If you need help coming up with enticing content for your popup, then you can use OptinMonster’s Smart Optimizations feature to improve your existing copy using AI. It takes your text and asks ChatGPT to suggest improvements.

My team programmed the AI using our decades of experience creating successful OptinMonster campaigns so that these suggestions will have a higher chance of converting.

OptinMonster Smart Suggestions

You can select one of the suggestions or ask for more variations.

Another way to appeal to users’ emotions is by using images. Placing a heart-melting photo like this on a popup can increase email signups by 63%.

Using an Image in a Popup for Emotional Appeal

By strategically using emotional appeal and considering these points, you can create popups that connect with users on a deeper level, influence their decisions, and ultimately increase your conversion rates.

7. Use Color Psychology to Capture Attention

I came across a study that shows it takes just 90 seconds for someone to make a judgment about something they see, and 90% of that opinion is based on color.

Color psychology can be a powerful tool to grab attention and influence user behavior in your website popups, ultimately leading to more signups.

Color Psychology Chart

However, when I researched the best colors to use on popups, I found that the specific colors you use don’t have a major impact on conversions. Instead, the key thing is to choose button colors that are high-contrast, on-brand, and consistent.

Speaking of buttons, you can increase your signups by 14.34% just by adding a call to action button to your popup. And you can increase that rate even more by using colors that make it easy for website visitors to find where they’re supposed to click.

Notice the contrasting color that AutoAnything uses on their CTA button. They were able to increase their daily email optins by 250% using this email subscription popup.

Example of Using a Contrasting Button Color on a Popup

I hope this tutorial helped you understand the psychology of popups and boost your signups. You may also want to read my last guest post on why popups continue to stay relevant and the best email marketing services for small business.

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 Use the Psychology of Popups to Boost Signups by 250% first appeared on WPBeginner.