A personalized background not only adds a touch of creativity but can also improve readability and help you stay focused while creating content.

For example, if you are working on a custom client project, adjusting the Gutenberg editor’s background color to match the client’s brand can help you stay visually consistent throughout the design process.

In this article, we will show you how to easily customize the background color of the WordPress block editor for the admin area.

Why Change the Background Color of the Block Editor in WordPress?

You may want to change the background color of the WordPress block editor for a number of reasons.

For instance, most modern WordPress themes use the same background color for the block editor as the live website, including Astra, OceanWP, GeneratePress, and more.

However, if your WordPress theme doesn’t use the same colors, then the appearance of your post inside the editor will look quite different from what your users will see on the live website.

Another reason for changing the background color could be personal preference.

For instance, by default, the block editor uses a plain white background. Some users may find it a bit stressful to look at the white screen for long hours. Eye strain can be a real issue for many people, and the default white background is not easy on the eyes.

That being said, let’s see how you can easily change the WordPress editor background color.

How to Change the WordPress Editor Background Color

You can easily change the WordPress editor background color by adding custom code to your theme’s functions.php file.

However, even the smallest error in the code can break your website and make it inaccessible.

That’s why we recommend using the WPCode plugin. It’s the best WordPress code snippets plugin on the market and is the easiest and safest way to add custom code to your WordPress website.

First, you need to install and activate the WPCode plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the Code Snippets » +Add Snippet page from the WordPress admin sidebar.

From here, click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

This will take you to the ‘Create Custom Snippet’ page, where you can start by typing a name for your code snippet. This is just for you and can be anything that will help you identify the code.

Next, choose ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right corner of the screen.

After that, copy and paste the following code into the ‘Code Preview’ box:

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

Once you have done that, you need to look for the following code in the PHP snippet you just pasted:

background-color: #bee0ec;

Then, you have to add the hex code of your preferred color next to the background color option. If you don’t want to use a hex code, you can use some basic color names such as ‘white’ or ‘blue’ instead.

After that, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ option.

Next, you must select the ‘Location’ of the code snippet as ‘Admin Only’ from the dropdown menu.

After that, go back to the top of the page and toggle the ‘Inactive’ switch to ‘Active.’

Finally, don’t forget to click on the ‘Save Snippet’ button to store your changes.

Now, go visit the block editor from the admin sidebar.

This is how the block editor looked on our site after adding the PHP code snippet.

Video Tutorial

If you would rather watch a video, check out our YouTube tutorial on how to customize the background color of the WordPress block editor:

Bonus: Change the Background Color in WordPress

If you want to change the background color on your website’s front end, then you can do that by visiting the Appearance » Customize» screen from the WordPress dashboard.

This will launch the theme customizer, where you must click the ‘Colors & Dark Mode’ tab in the left column. Keep in mind that your customizer may look different depending on the theme that you are using.

This will open a new panel in the sidebar where you must click the ‘Select Color’ option.

The Color Picker will now open on your screen, and you can choose your preferred background color. Once you are done, remember to click the ‘Publish’ button at the top to store your settings.

You can also change the text color, highlight color, button color, and more from the theme customizer. However, if you are using a block theme, then you will have to make these changes in the full site editor.

For more details on all of this, you can see our beginner’s guide on how to customize colors on your WordPress website.

We hope this article helped you learn how to easily change the WordPress editor background color. You may also want to see our ultimate guide on how to disable the fullscreen editor in WordPress or take a look at our top picks for the best Gutenberg blocks plugins for WordPress.

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 Customize the Background Color of WordPress Block Editor first appeared on WPBeginner.

Whether you are looking to declutter your footer or add your own branding, removing the default WordPress credit is straightforward and improves the overall look of your site.

Through our extensive experience in building WordPress websites, we have recognized the importance of maintaining brand consistency. That’s why we strategically removed the ‘powered by WordPress’ footer link from our sites, including WPBeginner, WPForms, and MonsterInsights.

In this article, we will show you how to easily remove the ‘powered by WordPress’ footer links too.

Why Remove the WordPress Footer Credits?

Many different WordPress themes show a ‘Proudly powered by WordPress’ disclaimer in their website’s footer, which links to the official WordPress.org website.

Some theme developers take this further and add their own credits to the footer.

In the following image, you can see the disclaimer added by the Astra WordPress theme.

While great for software developers, this ‘Powered by….’ footer can make your site seem less professional, especially if you are running a business website.

It also lets hackers know that you are using WordPress, which could help them break into your site. For example, if you are not using a custom login URL, then hackers can simply add /wp-admin to your site’s address and get to your login page.

This disclaimer also links to an external site, encouraging people to leave your website. This can have a negative impact on your pageviews and bounce rate.

Is It Legal to Remove WordPress Footer Credit Links?

Removing the footer credits link on your site is perfectly legal because WordPress is free and released under the GPL license.

Basically, this license gives you the freedom to use, modify, and even distribute WordPress to other people.

Every WordPress plugin or theme that you download from the official WordPress directory is also released under the same GPL license. Even most commercial plugins and themes are released under GPL.

This means you are free to customize WordPress in any way you want, including removing the footer credits from your business website, online store, or blog.

With that in mind, let’s see how you can remove the ‘powered by WordPress’ footer links.

Video Tutorial

If you don’t want the video or need more instructions, then simply use the quick links below to jump straight to the method you want to use:

Method 1: Using the Theme Settings (Quick and Easy)

Most good theme authors know that users want the option to edit the footer and remove the credit links, so many include it in their theme settings.

To see whether your theme has this option, go to Appearance » Customize in your WordPress admin dashboard.

This will open the theme customizer where you can now look for any settings that let you customize your site’s footer.

For example, the Astra theme has a section called ‘Footer Builder.’

If you are using this theme, then simply click on the ‘Footer’ section and select ‘Copyright.’

This opens a small editor where you can change the footer text or even delete it completely.

No matter how you remove the footer disclaimer, don’t forget to click on ‘Publish’ to make the change live on your site.

Method 2: Using the Full Site Editor (Works With Block-Based Themes)

If you are using a block-enabled WordPress theme, then you can remove the footer disclaimer using Full Site Editing (FSE).

This is a quick and easy way to remove the ‘Powered by’ credit across your entire site, although it won’t work with all themes.

To launch the editor, go to Appearance » Editor.

By default, the full site editor shows your theme’s home template.

In the left-hand menu, select ‘Patterns.’

This shows a list of all the patterns and template parts that make up your WordPress theme. Under ‘Template Parts,’ click on ‘Footer.’

This shows a thumbnail of your website’s footer. To see the footer, give the preview a click.

You’ll now see a preview of the theme’s template.

To edit the footer, go ahead and click on its pencil icon.

Next, select the ‘Powered by’ disclaimer.

You can now replace it with your own content or delete the disclaimer.

When you are happy with how the footer looks, simply click on ‘Save.’ Now, if you visit your site, then you’ll see the change live.

Method 3: How To Remove the ‘Powered by’ Disclaimer Using a Page Builder

Many WordPress websites use the footer to communicate important information such as their email address or phone number. In fact, visitors might scroll to the bottom of your site just to look for this content.

With that in mind, you may want to go one step further and replace the ‘Powered by’ text with a custom footer. This footer could contain links to your social media profiles, links to your affiliate marketing partners, a list of your products, or other important information and links.

This is how we use the footer area on WPBeginner:

The best way to create a custom footer is by using SeedProd. It is the best page builder plugin and comes with 100s of professionally designed templates, sections, and blocks that can help you customize every part of your website.

It also has settings that allow you to create a global footer, sidebar, header, and more.

First, you need to install and activate SeedProd. For more details, see our step-by-step guide on how to install a WordPress plugin.

After activating the plugin, SeedProd will ask for your license key.

You can find this information in your account on the SeedProd website. After entering the key, click on the ‘Verify Key’ button.

Once you’ve done that, go to SeedProd » Theme Builder. Here, click on the ‘Add New Theme Template’ button.

Pro Tip: SeedProd also has a growing library of professional website kits that you can use as the base for your custom theme. For more information, please see our guide on how to install template kits in WordPress.

In the popup, type in a name for the new theme template.

Once you’ve done that, open the ‘Type’ dropdown and choose ‘Footer.’

SeedProd will show the new footer template across your entire site by default. However, you can limit it to specific pages or posts using the ‘Conditions’ settings.

For example, you may want to exclude the new footer from your landing pages so it doesn’t distract from your main call to action.

When you are happy with the information you’ve entered, click on ‘Save.’ This will load the SeedProd page builder interface.

At first, your template will show a blank screen on the right and your settings on the left. To start, click on the ‘Add Columns’ icon.

You can now choose the layout that you want to use for the footer. This allows you to organize your content into different columns. For example, you might display your WordPress widgets in columns.

You can use any layout you want, but we are using a three-column layout in all our images.

Next, you can edit the footer’s background so that it matches your WordPress theme, company branding, or logo.

To change the background color, simply click on the section next to ‘Background Color’ and then use the controls to choose a new color.

Another option is to add a background image.

To do this, either click on ‘Use Your Own Image’ and then choose an image from the WordPress media library or click on ‘Use a stock image.’

When you are happy with the background, it’s time to add some content to the footer.

Simply drag any block from the left-hand menu and drop it onto your footer.

After adding a block, click to select that block in the main editor.

The left-hand menu will now show all the settings you can use to customize the block.

Simply keep repeating these steps to add more blocks to your footer. If you are not sure what blocks to use, then it may help to look at our checklist of things to add to the footer of your WordPress website.

You can also change where each block appears by dragging them around your layout.

When you are happy with your design, click on the ‘Save’ button.

Then, you can select ‘Publish’ to complete your design.

To make the new footer live on your WordPress blog, you’ll need to finish building your WordPress theme with SeedProd. For step-by-step instructions, please see our guide on how to create a custom WordPress theme.

After building your theme, go to SeedProd » Theme Builder. Then, click on the ‘Enable SeedProd Theme’ switch.

Now, if you visit your website, you’ll see the new footer live.

Method 4: Removing the WordPress Disclaimer Using Code

If you can’t see any way to remove or modify the footer credits in the WordPress customizer, then you can always edit the footer.php code.

This isn’t the most beginner-friendly method, but it will let you remove the credit from any WordPress theme.

Before making changes to your website’s code, we recommend creating a backup so you can restore your site in case anything goes wrong.

Keep in mind that if you edit your WordPress theme files directly, then those changes will disappear when you update the theme. With that being said, we recommend creating a child theme, as this allows you to update your WordPress theme without losing customization.

First, you need to connect to your WordPress site using an FTP client such as FileZilla, or you can use a file manager provided by your WordPress hosting company. 

If this is your first time using FTP, then you can see our complete guide on how to connect to your site using FTP. 

Once you’ve connected to your site, go to /wp-content/themes/ and then open the folder for your current theme or child theme.

Inside this folder, find the footer.php file and open it in a text editor such as Notepad.

In the text editor, look for a section of code that includes the ‘powered by’ text. For example, in the Twenty Twenty-One theme for WordPress, the code looks like this:

<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

You can either delete this code entirely or customize it to suit your needs.

For example, you may want to replace the ‘Proudly powered…’ disclaimer with your own copyright notice.

After making your changes, save the file and upload it to your server. If you check your site, then the footer credit will have disappeared.

Warning! Avoid the CSS Method at All Costs!

Some WordPress tutorial sites may show you a CSS method that uses display: none to hide the footer credit links.

While this looks simple, it’s very bad for your WordPress SEO.

Many spammers use this exact technique to hide links from visitors while still showing them to Google in the hopes of getting higher rankings.

If you do hide the footer credit with CSS, then Google may flag you as a spammer, and your site will lose search engine rankings. In the worst-case scenario, Google may even delete your site from their index so it never appears in search results.

Instead, we strongly recommend using one of the other methods we showed above. If you can’t use any of these methods, then another option is hiring a WordPress developer to remove the footer credit for you, or you could change your WordPress theme.

We hope this article helped you remove the ‘powered by WordPress’ footer links. You may also want to check out our tutorial on how to fix the missing admin bar issue in WordPress and our list of vital tips to protect the WordPress admin area.

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 Remove the Powered by WordPress Footer Links first appeared on WPBeginner.

The default WordPress homepage (while functional) often isn’t the most inviting way to welcome your audience. You want a homepage that highlights your best content, products, or services. A design that captivates and keeps them on your site.

In this guide, we will walk you through 3 easy ways to create a custom homepage in WordPress, even if you’ve never done it before.

What Is a Homepage?

A homepage is the first page visitors see when they type in your domain name. For many people, this homepage is their introduction to your business, blog, or website.

A good homepage will make visitors want to learn more about your website. It will also provide easy access to the links, search bars, and menus that help visitors find interesting content.

The default homepage in WordPress shows your latest blog posts, which may be a good fit for personal blogs or hobby bloggers.

However, if you run a business using your WordPress website, you may want to create a custom homepage instead to highlight your products and services.

The good news is that WordPress makes it easy to show a custom page as your homepage rather than the default list of recent posts.

How Do I Set a Custom Page as the WordPress Homepage?

In this guide, we will show you a few different ways to create a custom homepage. However, no matter what method you use, you will need to change your WordPress settings after creating the static homepage.

To do that, simply go to Settings » Reading in the WordPress dashboard.

Here, scroll to ‘Your homepage settings’ and select ‘A static page.’

You can now open the ‘Homepage’ dropdown and choose the page that you want to use as the new homepage.

Then, simply scroll to the bottom of the screen and click on ‘Save Changes.’ You can now visit your site to see the new custom homepage live.

If you have a blog, then make sure to create a separate blog page to display your posts. Otherwise, visitors will struggle to find your latest blogs.

With that being said, let’s see how you can design a custom homepage in WordPress. Simply use the quick links below to jump straight to the method you want to use:

Video Tutorial

If you prefer written instructions, then just keep reading.

Method 1: Create a Custom Homepage Template Using the Block Editor (No Plugin Required)

If you are using a block theme, then you can design a custom homepage template using the full site editor.

This method doesn’t work with every theme, so if you are not using a block-based WordPress theme, then you will need to use one of the other methods covered in this guide.

For more information about using the full site editor, check out our beginner’s guide to WordPress full site editing.

To start, simply create a new page or open an existing page that you want to use as the homepage. In the right-hand menu, click on the ‘Page’ tab and then select the link that appears next to ‘Template.’

The exact link text may vary depending on the template you are currently using.

A popup will now appear with your current template.

Simply go ahead and click on the ‘New Template’ icon.

In the popup, give your template a name. The name is just for your reference, so you can use anything you want.

After that, go ahead and click on ‘Create’ to launch the full site editor.

The template editor works similarly to the standard WordPress block editor.

To add blocks to your custom homepage, just click on the blue ‘+’ button. You can then drag and drop any block onto your layout.

Since we are creating a custom homepage, you will typically want to start by adding a big hero image, such as your website’s logo or banner.

To do this, simply find the Image block in the left-hand menu and then add it to your layout using drag and drop.

You can now either choose an image from the WordPress media library or upload a new file from your computer.

To get more engagement, you may want to show recent comments on your homepage by adding a Latest Comments block.

For more information, please see our guide on how to show comments on the homepage of your WordPress theme.

A good homepage helps visitors find interesting content. With that being said, it’s a good idea to add a Navigation block to your custom homepage.

To learn more, please see our step-by-step guide on how to add custom navigation menus in WordPress themes.

After adding a block, make sure you click to select it in your layout. You can then configure the block using the settings in the right-hand menu and the buttons in the mini toolbar.

To build your custom homepage, simply keep adding more blocks and then configure them using the full site editor settings.

For example, you may want to add blocks such as Latest Posts, Search, Social Icons, Tag Cloud, and more.

When you are happy with how the template looks, click on the ‘Publish’ button.

The page you created earlier will now be using the new homepage template. You can now tell WordPress to use this page as your homepage by following the process described above.

Method 2: Create a Custom Homepage in WordPress Using a Page Builder (Recommended)

The WordPress block-based editor allows you to create a custom homepage using the tools you are already familiar with. However, it doesn’t work with all themes and is limited in flexibility and features.

Plus, while the WordPress theme customizer exists for non-block theme users, it’s not the most user-friendly option, as it doesn’t come with a drag-and-drop feature.

If you want to create a completely custom homepage that works with any WordPress theme, then you will need a page builder plugin.

For this method, we will be using SeedProd. It is the best page builder plugin on the market and allows you to create a custom homepage using a simple drag-and-drop editor.

It also comes with 300+ professionally designed templates and ready-made blocks that you can use on your homepage.

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

Upon activation, you need to enter your license key.

You can find this information in your account on the SeedProd website. After entering the license key, go ahead and click the ‘Verify Key’ button.

Create a New Homepage With SeedProd

At this stage, you need to visit SeedProd » Pages and click on the ‘Add New Landing Page’ button.

After that, it’s time to choose a template for your custom homepage. SeedProd has lots of professionally designed templates that you can customize based on your WordPress site’s needs.

To select a template, simply hover your mouse over it and then click the ‘Checkmark’ icon.

We are using the ‘Juicy Sales Page’ template in all our images, but you can use any design.

Next, go ahead and type in a name for the custom homepage. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.

When you are happy with the information you have entered, click on the ‘Save and Start Editing the Page’ button.

Next, you will be taken to the SeedProd drag-and-drop page builder, where you can customize your template.

The SeedProd editor shows a live preview of your design to the right and some block settings on the left.

The left-hand menu also has blocks that you can drag onto your layout.

For example, you can drag and drop simple blocks like buttons and images or use advanced blocks such as the countdown timer, contact form, social sharing buttons, and more.

To customize any block, simply click to select it in your layout.

The left-hand menu will now show all the customization options to configure that block. You can also change the page’s background colors, add background images, or change the color scheme and fonts to better match your brand.

You can even use CSS animations to grab the visitor’s attention.

To start, you will want to replace any placeholder images with your own photos or custom logo. To do this, simply click to select any Image block in the live preview.

In the left-hand menu, click on the ‘Select Image’ button.

You can now either choose an image from the WordPress media library or upload a new file from your computer.

SeedProd comes with ‘Sections,’ which are collections of blocks that are often used together.

For example, SeedProd has a header, hero image, call to action, testimonials, contact form, FAQs, features, footer sections, and more. These can help you create a custom homepage, fast.

To look through the different sections, simply click on the ‘Sections’ tab. To preview any section, just hover your mouse over it and then click on the magnifying glass icon.

To add the section to your design, click on ‘Choose This Section.’

This will add the section to the bottom of your homepage.

You can move sections and blocks around your layout using drag and drop.

When you are happy with how the homepage looks, don’t forget to click the ‘Save’ button to store your changes.

Connect Your Homepage With an Email Marketing Service

If you plan to run an email marketing campaign, the homepage is one of the best places to display your signup form.

The great thing about SeedProd is it makes it super easy to connect your homepage to popular email marketing services like Constant Contact.

To do this, simply click on the ‘Connect’ tab and then select your email service provider.

SeedProd will now show how to connect the homepage with your email marketing service.

If your provider isn’t listed, then don’t worry. SeedProd works with Zapier, which acts as a bridge between SeedProd and more than 3000+ other apps.

Just scroll to the ‘Other’ section and hover over ‘Zapier.’ When the ‘Connect’ button appears, give it a click and then follow the onscreen instructions to connect SeedProd and Zapier.

Publish Your SeedProd Homepage

Once you have gone through all the previous steps, you are ready to publish your custom homepage. Simply click on the ‘Page Settings’ tab.

There are more options under the Page Settings tab that you may want to look at. For example, you can change the SEO settings, edit the page title, and connect a custom domain.

When you are happy with how the page is set up, go ahead and select the ‘General’ tab.

You can now click on the ‘Page Status’ toggle to change it from ‘Draft’ to ‘Publish.’

Now, you simply need to head over to Settings » Reading and set this page as your new custom homepage.

Method 3: Manually Create a Custom Homepage in WordPress (Coding Required)

Another way to create a custom homepage is using code, which gives you complete control over how your website looks. However, this method can be complicated, and coding mistakes can cause all kinds of common WordPress errors.

With that in mind, we don’t recommend this method for beginners.

Your WordPress theme is made up of many different files. Some of these files are called templates, and they control how different areas of your website look. For more information, please see our WordPress template hierarchy cheat sheet.

One of these templates is called front-page.php.

If your theme has this template, then WordPress will automatically use it to show the homepage. This means you can create a custom homepage by editing this file or replacing it with a new file.

To get started, you will need an FTP client such as FileZilla, or you can use the file manager supplied by your WordPress hosting provider.

If this is your first time using FTP, then you can see our complete guide on how to connect to your site using FTP.

After connecting to the server, go to /wp-content/themes/ and then open the folder for your current WordPress theme.

If this folder already has a front-page.php file, then you can go ahead and open that file in a text editor such as Notepad. You can then make any changes you want by editing the code.

If your theme doesn’t have a front-page.php file, then you can create a new file with the name front-page.php.

After that, you just need to upload front-page.php to your current theme’s folder on your WordPress hosting account.

As soon as you upload this file, WordPress will start using it to display your homepage. However, since the file is completely empty, you will see a blank page as your homepage.

To fix this, just open the file in a text editor app and start adding HTML code.

If you are starting with an empty file, then you can save yourself some time by using the existing code and templates in your WordPress theme.

For example, it usually makes sense to include the theme’s header and footer.

In the following sample code, we have removed the content and sidebars while fetching the header and navigation templates from the theme:

<?php /*
This page is used to display the static frontpage.
*/
 
// Fetch theme header template
get_header(); ?>
    <div id="primary" <?php astra_primary_class(); ?>>
 
    <div class="custom-homepage-container"> 
 
    You custom homepage code goes here
 
    </div> 
 
    </div><!-- #primary -->
//Fetch the theme footer template
<?php get_footer(); ?>

Discover More Expert Tips to Customize WordPress Pages and Posts

Want even more control over your WordPress website and make more customizations to your pages and posts? Check out these articles below:

• How to Display Popular Posts by Views in WordPress
• The Anatomy of a High Converting Landing Page
• How to Customize WooCommerce Product Pages (No Code Method)
• How to Create a Custom Archives Page in WordPress
• How to Display Most Commented Posts in WordPress
• How to Easily Re-Order Posts in WordPress (Step by Step)
• How to Make Sticky Posts in WordPress
• How to Display Recent Posts From a Specific Category in WordPress
• How to Hide a Post From Homepage in WordPress

We hope this article has helped you create a custom homepage in WordPress. You may also want to see our expert picks of the best popular posts plugins for WordPress and our piece on the most important pages that every WordPress blog should have.

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 Create a Custom Home Page in WordPress (3 Methods) first appeared on WPBeginner.