How to Use SMTP to Send Emails From WordPress

Featured Imgs 13

How to Use SMTP to Send Emails From WordPressWordPress has a native way of sending emails. It uses the PHP mail() function to deliver all those newsletters, password resets, or any other type of email you’re sending to your audience. While this method should theoretically be sufficient, it’s far from perfect. In WordPress, sending emails with SMTP is a much better alternative. And […]

The post How to Use SMTP to Send Emails From WordPress appeared first on WPExplorer.

Chris’ Corner: Little Websites

Featured Imgs 23

Gotta love a good little single-purpose website, right? I generally love what they do, what they say, or what service they provide, I love them on some deeper meta-level. Like someone cared so much about this idea that they just had to produce something, and a website made the most sense. Global reach! Easily findable and savable! Multimedia! It will last forever unless corporate publishers ruin it. Well done, people. You world wide that web.

Here are a few I’ve saved recently that seem to have been making the rounds.

Keyboard Accordion

I still feel like the Web Audio API is underused overall and has much untapped potential on websites, whether audio focused or not.

Broider

Never use border-image without help.

Modern Font Stacks

It is perfect timing for a new site like this. Web fonts are a big pill to swallow for web performance, so if you can get away without using them, that’s kinda nice. And nowadays, it doesn’t mean entirely boring choices.

Perfect Freehand

Of all of these, I feel like this is the one I’m going to need the most and will be the easiest to forget.

Just lemme draw something on the web real quick!

Me, regularly

Better Mobile Inputs

Everyone should do an audit of their web forms and see if you can improve them in any small way. Me and this site included! Almost certainly, there are mobile-specific things that could be improved.

Calligrapher.ai

Get a cool rendering of text without having to hand-draw it (just type). I like how you can just keep re-generating it (and adjusting the controls) until you get one you like.

How To REALLY Do Code Reviews [Video]

Featured Imgs 23

Welcome to the follow-up to How To Do Code Reviews, with many moooooore details on the human factors involved in a code review, as well as several options on how to approach reviewing pull requests.

Just a quick recap, what is the scenario? A user sent in a GitHub pull request for our Google Photos clone, which means we have to do a code review. How should you do such a review? What is or isn't important? Let's find out in this episode of Marco Codes.

Mastering CSS Variables and Unlocking Their Full Potential

Category Image 052

CSS Variables, also known as Custom Properties, have revolutionized the way we manage styles and build maintainable, flexible stylesheets. They enable developers to store and reuse values throughout a stylesheet, making it easier to change themes, colors, fonts, and more with just a few updates. In this article, we’ll explore the best practices for using CSS variables, along with some helpful code examples.

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

1. Defining and Using CSS Variables

To define a CSS variable, you must use the double hyphen (–) syntax. Typically, you’ll want to create your variables within the :root pseudo-class, which refers to the highest-level parent element in the DOM tree. This ensures that your variables are globally accessible.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
}

a {
  color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
}

In the example above, we’ve defined three CSS variables: –primary-color, –secondary-color, and –font-size. To use these variables, we use the var() function, which accepts the variable name as its argument.

2. Fallback Values

One of the great features of CSS variables is their ability to provide a fallback value. This is helpful when a variable may not be defined or supported by a particular browser. To provide a fallback value, include a second argument within the var() function.

body {
  font-size: var(--font-size, 16px);
}

In this example, if the –font-size variable isn’t defined, the browser will use the fallback value of 16px.

3. Leveraging Variables in Media Queries and Theming

CSS variables are incredibly useful when combined with media queries and theming. You can quickly and easily update your styles for different devices or themes by redefining the variable values.

:root {
  --font-size: 16px;
}

@media screen and (min-width: 768px) {
  :root {
    --font-size: 18px;
  }
}

body {
  font-size: var(--font-size);
}

In this example, we’ve updated the –font-size variable within a media query. When the screen width is at least 768px, the font size will automatically adjust to 18px.

4. Working with Calculated Values

CSS variables can be combined with the calc() function to create dynamic and flexible values.

:root {
  --base-padding: 10px;
}

.container {
  padding: calc(var(--base-padding) * 2);
}

In the example above, we’ve defined a base padding value and used it in combination with the calc() function to double the padding for the .container element.

5. Handling Colors with HSL and CSS Variables

When working with colors, using the HSL color format in combination with CSS variables makes it easier to create color schemes and adjust hues, saturation, and lightness.

:root {
  --primary-hue: 210;
  --primary-color: hsl(var(--primary-hue), 50%, 50%);
  --primary-color-light: hsl(var(--primary-hue), 50%, 75%);
  --primary-color-dark: hsl(var(--primary-hue), 50%, 25%);
}

a {
  color: var(--primary-color);
}

a:hover {
  color: var(--primary-color-light);
}

a:active {
  color: var(--primary-color-dark);
}

In this example, we’ve used the HSL color format and CSS variables to create a primary color and its lighter and darker variations. By adjusting the –primary-hue value, you can change the color scheme throughout your stylesheet with ease.

6. JavaScript Interoperability

CSS variables can be accessed and manipulated using JavaScript, providing an additional layer of flexibility and dynamism. For instance, you can create user-customizable themes by modifying variables through JavaScript.

<button onclick="changeTheme()">Change Theme</button>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20function%20changeTheme()%20%7B%0A%20%20%20%20let%20root%20%3D%20document.documentElement%3B%0A%20%20%20%20let%20currentHue%20%3D%20parseInt(root.style.getPropertyValue('--primary-hue'))%3B%0A%20%20%20%20let%20newHue%20%3D%20(currentHue%20%2B%2030)%20%25%20360%3B%0A%20%20%20%20root.style.setProperty('--primary-hue'%2C%20newHue)%3B%0A%20%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

In the example above, clicking the “Change Theme” button will change the –primary-hue variable, effectively updating the primary color and its variations.

Wrapping Up

Variables have transformed the way we approach theming, responsiveness, and maintainability in our stylesheets. By following best practices such as global variable declaration, using fallback values, leveraging variables in media queries, working with calculated values, handling colors with HSL, and harnessing JavaScript interoperability, you’ll unlock their full potential.

With this newfound understanding, you can create more efficient, flexible, and dynamic stylesheets that adapt to different devices, user preferences, and themes with minimal effort.

How to Customize the Background Color of WordPress Block Editor

Category Image 091

Do you want to change the background color of the WordPress block editor for admins?

Sometimes when working on a custom client project, you may want to change the Gutenberg editor background color in WordPress to match their brand colors.

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

Changing the background color of WordPress block editor

Note: This guide covers changing the editor color in WordPress admin. If you’re looking to change the background color in WordPress front-end, then please see our tutorial on how to change background color in WordPress.

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.

Default block editor

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, keep in mind that 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 free WPCode plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Code Snippets » + Add Snippets page from the admin sidebar.

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

Add new snippet

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, you need to choose ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right.

Choose PHP Snippet option as the code type for changing editor background color

After that, you need to 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
});

Next, 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.

Paste the code snippet for changing the editor background color

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

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

Choose the insertion method and location of the code snippet

After that, you need to scroll 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 save your changes.

Save the code snippet for changing the background color

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

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

Editor color preview

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 85+ time saving WordPress shortcuts, or take a look at our top picks for the best WordPress page builder plugins.

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.