29 Best WordPress Themes for Artists (2017)

Are you looking for the best WordPress themes for artists? Sometimes its hard to find the perfect theme that can showcase your creativity and talent. In this article, we have hand-picked some of the best WordPress themes for artists.

Best WordPress themes for artists

Building a WordPress Site for Artists

Due to the flexibility and freedom it offers, WordPress is used by artists all over the world to share and promote their work online.

First you need to make sure that you are using the right platform. A self-hosted WordPress site gives you the freedom to use all features of WordPress.

Next, you need to sign up for a WordPress hosting account and register a domain name.

We recommend using Bluehost for hosting because they are one of the largest hosting companies in the world and an official WordPress recommended hosting partner. They are also offering our users 65% off + a free domain name.

Once you have signed up for hosting, it is time to install WordPress. Head over to our step by step guide on how to start a WordPress blog and you will be up and running in no time.

You can now choose a theme for your WordPress site. Select a theme from our list below. If you need help installing the theme, then check out our guide on how to install a WordPress theme.

Having said that, let’s take a look at some of the best WordPress themes for artists.

Note: This list contains both free and paid WordPress themes and all of them are fully mobile responsive.

1. Creatica

Creatica

Creatica is a multi-purpose WordPress theme for artists, creative agencies, art blogs, and more. It ships with stunningly beautiful and ready-made demos that you can install with 1-click.

It also includes tons of customization options like multiple header styles, multiple sidebars, custom widgets, and a powerful theme options panel. You will also get a slider plugin and a powerful drag and drop page builder to create your own page layouts.

2. Meteor

Meteor

Meteor is an elegantly designed WordPress theme for artists, arts and crafts, and portfolio websites. It includes grid, carousel, masonry, and blocks portfolio templates, allowing you to beautifully display photos, projects, paintings, illustrations, videos, and more.

It also allows you to choose different layouts for each single project in your portfolio. You can also choose 4 layout styles for your posts. It also includes a template to create a resume page and a section to add services.

3. Martho

Martho

Martho is a WordPress multipurpose theme that can be used by bloggers, photographers, and artists. It is highly flexible and perfect if you want to grow your website and be able to add different things as it grows.

Martho includes multiple homepage designs, templates for blog, project pages, galleries, and more. It is WooCommerce ready and has portfolio post type built-in with multiple display options. It also ships with a drag and drop page builder.

4. Indigo

Indigo

Indigo is a gorgeous multipurpose WordPress theme carefully designed with an artistic approach to details. It comes with easy to use modules that you can just drag and drop to build your homepage layout.

It also includes 14 ready made templates to make a website. You can install and then just replace the content with your own. These websites include a blog, magazine, portfolio, and stories theme that would work perfectly for an art website.

5. Freelo

Freelo

Freelo is a beautifully designed WordPress theme for artists, illustrators, and art blogs. It has a built-in portfolio section with multiple styles using beautiful CSS animations. You can choose from multiple color schemes and create your own as well.

It allows you to easily change fonts and has support to use Google Fonts. There are multiple page templates, unlimited sidebars, and even a sidebar generator packed inside.

6. Nico

Nico

Nico is a beautifully designed WordPress theme for artists, photographers, illustrators, and more. It includes a gorgeous filterable portfolio with grid layout that helps you display your work elegantly.

Nico includes several customization options such as custom colors, custom background and header, and social media integration. It has a custom theme panel to help you easily build your website.

7. Heron

Heron

Heron is a minimalist WordPress theme for artists, bloggers, and writers. It features beautiful typography, earth toned colors, and a clean spacious layout. It uses large fully scalable featured images and videos, which makes your pages more engaging.

It has a full screen search overlay next to the navigation menu on top. It also comes with author bio box for multi-author WordPress sites. It is easy to setup and customize using the built-in theme options panel.

8. Designer

Designer

As the name suggests, Designer is a creative WordPress theme for graphic designers, illustrators, and artists. It includes a portfolio content type with multiple styles to display portfolio items. Theme homepage has a two column layout on desktop, and a single column layout on mobile.

It uses the minimalist approach to design, which offers a distraction-free and engaging view to showcase your portfolio items. Designer uses crisp elegant typography so the text looks great on mobile and desktop devices. It has a getting started page to walk you through theme set up process.

9. Ambiance Pro

Ambiance

Ambiance Pro is a WordPress theme for artists, bloggers, and photographers. It is built on the rock solid foundation of Genesis framework. Designed specifically to beautifully showcase your photos and images, Ambiance Pro comes with beautiful layout choices and elegant typography.

It has multiple page templates for your blog, archives, and landing pages. It is quick and easy to setup using the live theme customizer. The homepage is fully widgetized so you can easily set it up in minutes.

10. Creativo

Creativo

Creativo is a flexible WordPress theme suitable to build almost any kind of website. It includes a built-in portfolio section with beautiful display options. It also has several layout choices for your blog and homepage, and it can also be used as a single page theme.

Inside you will also find sections to add services, photo galleries, testimonials, and more. Creativo ships with bonus premium page builder, slider, and a live chat plugin.

11. Exposure

Exposure

Exposure is a stylish multi-purpose WordPress theme with portfolio management system built-in. It is ideal for photography, fashion, lifestyle, arts and crafts websites.

It comes with a drag and drop page builder which allows you to design your pages the way you want. It has lots of customization options built-in and it is fully mobile responsive.

12. Coastline

Coastline

Coastline is a beautiful WordPress portfolio theme with unique design. It includes powerful custom widgets, multiple layout choices, and a well crafted portfolio section.

It has a fixed left sidebar with custom background support and comes with different page templates for blog, portfolio, archives, and galleries.

13. Relive

Relive

Want to tell your stories with an engaging layout? Check out Relive. It is a WordPress theme for storytellers, photographers, artists, and more. It is designed to offer an immersive user experience with audio, video, images, and text.

It is ideal for long form content, portfolios, photo and video galleries. It has beautiful templates for single posts and pages, photo galleries, and a unique homepage layout. Inside you will also find tons of customization options with color schemes, sidebars, custom widgets, shortcodes, and more.

14. Candid

Candid

If storytelling is a big part of your project, then you will love Candid. It is a beautiful WordPress theme for publishers with a focus on great typography and gorgeous display of images. It takes the minimalist approach to design with generous white space and modern layouts.

It features a dynamic, masonry-style layout that can be configured into one, two or three columns to match your content. It also ships with portfolio content type allowing you to showcase your photos, images, audio, or video projects.

15. Suarez

Suarez

Suarez is a stunningly beautiful and modern WordPress theme for bloggers, photographers, artists, and storytellers. It is designed to offer an immersive user experience with dazzling display of photographs and images.

The homepage layout features a large full screen header image at the top, which is followed by a masonry grid of your most important content with clever usage of images. Other features include categories carousel, sidebar filters, subcription box, social media widgets, and more.

16. Nisarg

Nisarg

Nisarg is a beautiful free WordPress theme suitable for artists and bloggers. It comes with a clean layout with two navigation menus and a large full-width header image.

It also supports custom backgrounds, custom colors, and multiple post formats for video, galleries, and other posts. All theme options are easily customizable using the theme customizer.

17. Peak

Peak

Peak is a modern WordPress theme with unique layout and style. Suitable for artists, illustrators, and photographers. It features a tile based display of images in a responsive grid layout.

It comes with multiple layouts for pages as well as posts. Other features include a mega menu on top, social media menu, slide-in sidebar widgets, easy setup, and more.

18. Memories

Memories

Memories is a beautiful WordPress theme designed for lifestyle, fashion, arts, and personal websites. It comes with a gallery display that showcases your photographs, designs, and other visual artworks beautifully.

The theme includes multiple color schemes, multiple layout choices, custom background, and header support as well as custom widgets for your social media profiles.

19. Sanremo

Sanremo

Sanremo is a free WordPress theme for bloggers and artists. It features a minimalist spacious layout with large featured images. It also includes custom widget for social media links, a sticky navigation menu at top, and a footer widget area.

20. Mozzy

Mozzy

Need a bright and lively WordPress theme for your illustrations? Check out Mozzy. It is a WordPress portfolio theme for illustrators, graphic designers, and photographers. It includes a widgetized homepage layout with a slider and featured content areas.

It comes with built-in sections for portfolio, services, and clients. Other features include custom post formats, backgrounds, headers, and social widgets.

21. Draft

Draft

Draft is another free WordPress theme suitable for artists, illustrators, and bloggers. It uses featured images to display a grid based layout on the homepage. It comes with a welcome message box, custom colors, header and background support. All theme options can be setup using customizer.

22. North

North

Looking for a great combination of elegant typography and unique layout? North is the perfect mix of the both. It is a WordPress portfolio theme with a minimalist design approach and a grid layout.

It has beautiful portfolio templates to display portfolio items like images, photos, videos, and audio files. It includes multiple color choices, post format support, and can also be used with third party photo gallery plugins.

23. Parallax

Parallax

Parallax is a modern and stylish WordPress theme for portfolio, arts, and photography websites. It features fullscreen parallax backgrounds and a unique layout. It ships with 40 different layouts that can be installed with 1-click. It also has an integrated drag and drop page builder.

Among other features you will find custom widgets for social media, portfolio section, and image filters. It can be used as a single page theme, a single page with infinite scroll, or as a regular multi-page theme.

24. Hestia

Hestia

Hestia is a free WordPress theme with powerful features to build any kind of website. It comes with a companion plugin which adds testimonials, services, and homepage sections to your website.

It is ready to be used with popular free page builder plugins, and it also supports WooCommerce out of the box. Hestia is easy to setup using the live theme customizer.

25. Verb

Verb

Verb is gorgeous WordPress theme built specifically for designers, photographers, and artists. It puts the best of your work at the top using an elegant masonry grid layout. It includes full-width templates to display individual portfolio items and pages. It also includes a traditional blog template with a right sidebar.

Verb offers pain free setup with options you need and none that you don’t need. It also includes with a getting started page to help you get started in minutes.

26. Profile

Profile

Looking for a theme to promote your personal brand? Profile is a WordPress theme to promote your personal brand online. It ships with social media integration to all your social media profiles. It also includes a beautiful portfolio section.

The homepage displays your personal photo at the top, which is followed by your Twitter feed, social profile links, blog posts, and portfolio items. It is easy to customize and comes with several shortcodes, templates, and custom widgets.

27. It is a Wrap

Wrap

If video plays an important role in your artwork, then Wrap can be the perfect way to display it. It has three homepage layouts, several content discovery features, and a beautiful media playback popup for your videos.

It also includes 4 creative header styles, featured content carousel, social media integration, and a visual page builder. It includes several page layouts, custom widgets, and easy customization options.

28. Eclipse

Eclipse

Eclipse is a stylish WordPress theme for photographers, artists, and bloggers. Theme homepage features a beautiful slider showcasing your latest work. It also displays your pages and recent posts in blocks on the homepage.

It comes with a custom widget to display your Instagram photos and videos. It also has beautiful gallery templates, portfolio section, and is fully compatible with WooCommerce.

29. Everly

Everly

Everly is a sophisticated WordPress theme for personal websites, blogs, and artists. It takes the minimalist approach to design with a spacious layout that makes your images popout. It comes with 4 different homeopage and blog layouts, post templates, galleries, and icon fonts.

It comes with unlimited colors, slider plugin, social media integration, dedicated ad spaces, and much more. Theme setup is quite simple allowing you to quickly get started without struggling with settings.

That’s all for now. We hope this article helped you find the best WordPress themes for artists and designers. You may want to take a look at our Envira Gallery plugin if you want a more robust WordPress gallery solution to display your work.

Also don’t forget to check out our ultimate step by step WordPress SEO guide for beginners to boost your SEO rankings.

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 29 Best WordPress Themes for Artists (2017) appeared first on WPBeginner.

How to Style Individual Categories Differently in WordPress

Do you want to style categories differently in WordPress? Most WordPress themes use the same style for all category archive pages. However, if you run a content rich website, then you can style each category differently to maximize their potential. In this article, we will show you how to easily style categories differently in WordPress.

How to style categories differently in WordPress

Why Style Categories Differently in WordPress?

As we said earlier, most WordPress themes use the same template for each category archive page. That’s because theme developers don’t know how you will be using the categories on your website and what those categories will be.

However, if you are running a content rich site, then changing the layout of a category archive page can have a dramatic impact on how users engage with the content on that page.

For example, if you run a news or magazine site, then you can have local ads displayed on the local news category. You can show weather information, show most popular stories in that category, and so on.

Having said that, let’s see how to easily style individual categories differently in WordPress.

Styling Individual Categories Differently in WordPress

There are multiple ways to style categories in WordPress. We will show you two different methods to style categories, and you can choose the one that best suits your needs and skill level.

Using Single Category Template in WordPress Theme

WordPress themes follow a standard template hierarchy. Depending on a template file name, WordPress can automatically pick the right template to display a page.

For example, it looks for category.php file to display category archive pages.

WordPress also allows you to create templates for individual categories as well. Let’s suppose you want to style the ‘Apple’ category differently. You can do that by adding a new template file to your theme and naming it category-apple.php.

Connect to your WordPress site using an FTP client and then go to /wp-content/themes/your-current-theme/ folder and create a new file category-apple.php. Don’t forget to replace apple with your own category name.

Creating a template for individual category in your WordPress theme

You can use your theme’s category.php file as a starting point. Simply edit and copy all of its content. Now edit your newly created category-apple.php file and paste the code inside it.

After that you can start making changes to your individual category template. You can create and use a different sidebar for this category, make it a full-width page, add a welcome message, or anything else you want.

Style Individual Categories in WordPress Using CSS

WordPress automatically adds CSS classes to different elements throughout your website. These include both the body class and the post class.

For example, if you view a category archive page and then use the Inspect Tool, you will notice category and category-name CSS classes in the body tag.

Category class added to body element by WordPress

You can use this CSS class to style each individual category differently by adding custom CSS.

Here is some example CSS that you can use as a starting point.

body.category-apple { background-color:#EEE;
background:url("http://example.com/wp-content/uploads/2017/background.jpg") no-repeat fixed;
color:#FFFFFF;
}
.category-apple .site { background:#232323; }
.category-apple a { color:#CCCCCC; } 

Don’t forget to change the category name in the CSS class with your own category name.

Changing category style using CSS

We hope this article helped you learn how to style categories differently in WordPress. You may also want to see our list of most wanted category hacks and 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 Style Individual Categories Differently in WordPress appeared first on WPBeginner.

How to Add Two-Factor Authentication in WordPress for Free

Have you noticed how popular sites like Facebook and Google are now giving you the ability to add two-factor authentication to improve security? Well now you can add two-factor authentication to your WordPress site. This ensures maximum security for your WordPress site. In this article, we will show you how to add two-factor authentication for WordPress using both Google Authenticator as well as SMS text message.

How to add 2-factor SMS verification for WordPress login

Why Add Two-Factor Authentication for WordPress Login?

One of the most common tricks hackers use is called brute force attacks. By using automated scripts, hackers try to guess username and password to break into a WordPress site.

If they steal your password or accurately guess it, then they can infect your website with malware.

One of the easiest ways to protect your WordPress website against stolen password is to add two-factor authentication. This way even if someone stole your password, they will need to enter a security code from your phone to gain access.

There are two ways to setup two-factor authentication in WordPress:

  1. SMS Verification – where you receive the verification code via text message.
  2. Google Authenticator App – Fallback option where you receive the verification code in an app.

Let’s take a look at how to easily add two-factor verification to your WordPress login screen for free.

1. Adding 2-Step SMS Verification to WordPress Login Screen

This method adds a 2-Step SMS verification to your WordPress login screen. After entering the WordPress username and password, you will receive a text message via SMS on your phone with a code.

First you will need to install the Two Factor and Two Factor SMS plugins. For more details, see our step by step guide on how to install a WordPress plugin.

The first plugin which is called Two Factor provides multiple ways to set up 2-step verification in WordPress. The second plugin, which is called Two Factor SMS is an addon for the first plugin. It adds support for 2-Step SMS verification. You will need both these plugins installed and activated.

Upon activation, you need to head over to Users » Your Profile page and scroll down to Two Factor Options section.

Select SMS Twilio is your 2-step method

Check the box next to ‘SMS (Twilio)’ option and also click the radio button to make it your primary verification method.

After that scroll down to the Twilio section.

Twilio settings

You will be asked to provide your Twilio account information.

Twilio is an online service that offers phone, voice messaging, and SMS services to use with your own applications. They also have a limited free plan which would be sufficient for our purpose here.

Head over to Twilio website and create your free account.

Twilio Signup

On the signup page, you will be asked for the usual personal information. After that you will be asked which products you would like to use first.

Signup options

You need to select SMS and then select 2-factor authentication for ‘What you are building’ option. Finally select PHP for your programming language.

Once you have signed up for an account, you will reach your Twilio dashboard where you need to click on the get started button.

Get started with Twilio

This will take you to a settings wizard where you need to click on the ‘Get your first Twilio number’ button.

Get your Twilio number

It will bring up a popup showing a US based phone number. Copy and save this number in a text file and then click on the ‘Choose this number’ button.

Choose number

You can now exit the wizard and head over to Settings » Geo Permissions page.

Here you need to select the countries where you will be sending SMS. Since you are using the service to receive SMS for yourself, you can select the country you live in and countries you travel to.

Geo permissions

Next, you need to visit the Twilio console dashboard to copy your Account SID and Auth Token.

Copy account ID and Auth key

Now you have all the information that you need.

Go to the user profile page on your WordPress site and enter your Twilio Account SID, Auth token, and sender phone number.

Add your own phone number as the ‘Receiver Phone Number’.

Don’t forget to click on the ‘Update Profile’ button to save your settings.

You can now logout from your WordPress site to see the plugin in action.

On login screen, first you will provide your WordPress username and password. After that, you will receive a SMS notification on your phone, and you will be asked to enter the code you received.

Enter your SMS verification code

After entering the SMS code, you will be able to access your WordPress admin area.

Note: This method works great, but what if you are traveling and unable to receive text messages on your phone number?

Let’s solve this problem by adding a fallback option too.

2. Adding 2-Factor Verification to WordPress with Google Authenticator

As a fallback option, we will setup 2-Factor verification using Google Authenticator.

SMS verification will still be your primary verification method. In case you don’t get the SMS, you’ll still be able to login using the Google Authenticator app on your phone.

Head over to Users » Your Profile page and scroll down to two factor options section.

Two factor plugin settings

Click the Enabled checkbox next to ‘Time Based One-Time Password (Google Authenticator)’ and then click on ‘view options’ link to begin Google Authenticator setup.

Gauth options

You will now see a QR code which you will need to scan with the Google Authenticator app.

Go ahead and install Google Authenticator app on your phone.

Once you have installed the app, open it and click on the add button.

Add new account in Gauth

Now you need to scan the QR code shown on the plugin’s settings page using your phone’s camera.

The app will detect and add your website. It will also show you a six digit code. Enter the code in the plugin’s settings page, and you are done.

Don’t forget to click on the ‘Update Profile’ button to save your changes.

You can now logout of your WordPress site to see it in action.

First you will have to enter your WordPress username and password. After which you will be asked to enter SMS verification code.

Use your backup method to authenticate

If you didn’t get the SMS code, then you can click on ‘Use backup method’ link and enter the code generated by Google Authenticator app on your phone.

Troubleshooting

If you lose access to your phone, then you may be unable to login. See our guide on what to do when you are locked out of WordPress admin area to recover access to the admin area.

We hope this article helped you add 2-factor SMS verification for WordPress login. You may also want to see our step by step WordPress security guide for beginners.

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 Add Two-Factor Authentication in WordPress for Free appeared first on WPBeginner.

WordPress Custom Fields 101: Tips, Tricks, and Hacks

Ever wondered what are custom fields in WordPress? Want to learn more about how custom fields work? In this article, we will show you how to user WordPress custom fields with tips, tricks, and hacks.

Custom Fields 101

Since this is a lengthy article, we have added table of contents for easier navigation.

What are WordPress Custom Fields?

WordPress custom fields are metadata that are used to add additional information related to the post or page such as title, author name, date / time, etc.

By default, when you write a new post, page, or any content type, WordPress saves it into two different areas. The first part is the body of your content that you add using the post editor.

The second part is the information about that particular content. For example, title, author, date, time, and more. This information bit of the post is called metadata.

WordPress automatically adds all the required metadata to each post or page you create. WordPress also allows users to save their own custom metadata using custom fields.

By default, custom fields option is hidden on the post edit screen. To view it, you need to click on the ‘Screen Options’ button at the top and then check the custom fields option.

Show custom fields meta box

Scroll down a little, and you will be able to see the custom field meta box below the post editor.

Custom fields meta box on post edit screen in WordPress

Custom fields can be used to add any information related to the post, page, or any content type. This meta information can be displayed in your theme. However, to do that you will need to edit your WordPress theme files.

This is why this tutorial is recommended for users familiar with editing theme files. It is also helpful for aspiring WordPress developers who want to learn how to properly use custom fields in their own themes or plugins.

Having said that, let’s take a look at how to add and use custom fields in WordPress.

Adding Custom Fields in WordPress

First you need to edit the post or page where you want to add the custom field and go to the custom fields meta box.

Adding custom field

Next, you need to provide a name for your custom field and then enter its value. Click on the Add Custom Field button to save it.

The field will be stored and displayed in the custom fields meta box like this:

Saved custom field

You can edit this custom field any time you want and then click on the update button to save your changes. You can also delete it as needed.

Now you can save your post to store your custom field settings.

Displaying Custom Fields in WordPress Themes

To display your custom field on your website, you will need to edit your WordPress theme files. If you haven’t done this before, then take a look at our guide on how to copy and paste code in WordPress.

First you will need to find the theme file you need to edit to display your custom field. Ideally you would want to display it on a single post page. You will need to edit the single.php or content-single.php file.

You will need to enter your custom fields code inside the WordPress loop. Look for the line that looks like this:

<?php while ( have_posts() ) : the_post(); ?>

You want to make sure that you add your code before the following line:

<?php endwhile; // end of the loop. ?>

Now you need to add this code to your theme file:

<?php echo get_post_meta($post->ID, 'key', true); ?>

Don’t forget to replace key with the name of your custom field. For example, we used this code in our demo theme:

<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

You can now save your changes and visit the post where you added the custom field to see it in action.

Custom field data displayed in a WordPress theme

Now you can use this custom field in all your other WordPress posts as well. Simply create a new post or edit an existing one. Go to the custom fields meta box and select your custom field from the drop down menu and enter its value.

Select and reuse custom field

Click on ‘Add Custom Field’ button to save your changes and then publish or update your post.

Creating a User Interface for Custom Fields

As you can see, that once you add a custom field, you will have to select the field and enter its value each time you write a post.

If you have many custom fields or multiple users writing on your website, then this is not a very ideal solution.

Wouldn’t it be nice if you could create a user interface where users can fill in a form to add values into your custom fields?

This is what so many popular plugins already do. For example, the SEO title and meta description box inside Yoast SEO plugin is a custom meta box:

Custom meta box used in Yoast SEO

The easiest way to do this is by using the Advanced Custom Fields plugin. It allows you to create custom fields, group them, and display them in a custom meta box on your post edit screens in WordPress.

For detailed step by step instructions, see our guide on how to add custom meta boxes in WordPress posts and post types.

Hide Empty Custom Fields with Conditional Statement

In the above example, we showed you how to create a custom field and display it in your theme.

Now let’s see how to check if the custom field is not empty before displaying it. To do that, we will modify our code to first check if the field has data in it.

<?php $mood = get_post_meta($post->ID, 'Mood', true); if ($mood) { ?> <p>Today's Mood: <? echo $mood; ?></p> <?php } else { // do nothing; } ?>

Don’t forget to replace Mood with your own custom field name.

Adding Multiple Values to a Custom Field

Custom fields can be reused in the same post again to add multiple values. You just need to select it again and add another value.

Adding multiple values to a custom field

However, the code we have used in above examples will only be able to show a single value.

To display all values of a custom field, we need to modify the code and make it return the data in an array. You will need to add the following code in your theme file:

<?php $mood = get_post_meta($post->ID, 'Mood', false);
if( count( $mood ) != 0 ) { ?>
<p>Today's Mood:</p>
<ul>
<?php foreach($mood as $mood) { echo '<li>'.$mood.'</li>'; } ?>
</ul>
<?php } else { // do nothing; }
?>

Don’t forget to replace Mood with your own custom field name.

In this example, you would notice that we have changed the last parameter of get_post_meta function to false. This parameter defines whether the function should return a single value or not. Setting it to false allows it to return the data as an array, which we then displayed in a foreach loop.

Displaying Posts with a Specific Custom Key

WordPress allows you to display posts with custom keys and their values. For example, if you are trying to create a custom archive page to display all posts with specific custom keys, then you can use WP_Query class to query posts matching those fields.

You can use the following code as an starting point.

$args = array( 'meta_key' => 'Mood', 'meta_value' => 'Happy'
);
$the_query = new WP_Query( $args ); <?php // the query
$the_query = new WP_Query( $args ); ?> <?php if ( $the_query->have_posts() ) : ?> <!-- the loop --> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_content(); ?> <?php endwhile; ?> <!-- end of the loop --> <!-- pagination here --> <?php wp_reset_postdata(); ?> <?php else : ?> <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?> 

Don’t forget to replace meta_key and meta_value parameters with your own values.

Add Guest Author Name Using Custom Fields

Do you want to add a guest post but don’t want to add a new user profile just to add a single post? An easier way to do that is by adding guest author name as a custom field.

First, you need to add the following code in your theme’s functions.php file or a site-specific plugin.

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );
function guest_author_name( $name ) {
global $post;
$author = get_post_meta( $post->ID, 'guest-author', true );
if ( $author )
$name = $author;
return $name;
}

This code hooks a function to the_author and get_the_author_display_name filters in WordPress. The function first checks for the guest author name. If it exists, then it replaces the author name with the guest author name.

Now you will need to edit the post where you want to display the guest author name. Go to the custom fields meta box and add your guest author name.

Adding guest author custom field

For details, see our article on how to rewrite guest author name with custom fields in WordPress.

Display Contributors to an Article Using Custom Fields

On many popular blogs and news sites, multiple authors contribute to write an article. However, WordPress only allows a single author to be associated with a post.

One way to solve this problem is by using Co-Authors Plus plugin. To learn more, see our guide on how to add multiple authors on a WordPress post.

Another way to do that is by adding contributors as a custom field.

First you need to edit the post where you want to display co-authors or contributors. Scroll down to custom fields meta box and add author names as co-author custom field.

Adding co-authors as custom field

Now add this code to your theme files where you want to show co-authors.

 <?php $coauthors = get_post_meta($post->ID, 'co-author', false);
if( count( $coauthors ) != 0 ) { ?>
<ul class="coauthors">
<li>Contributors</li>
<?php foreach($coauthors as $coauthors) { ?> <?php echo '<li>'.$coauthors.'</li>' ; } ?>
</ul>
<?php } else { // do nothing; }
?>

To display author names separated by commas, you can add the following custom CSS.

.coauthors ul { display:inline;
}
.coauthors li { display:inline;
list-style:none;
}
.coauthors li:after { content:","
}
.coauthors li:last-child:after { content: "";
}
.coauthors li:first-child:after { content: ":";
}

This is how it looked on our demo site.

Co-authors displayed using custom fields

Display Custom Fields Outside the Loop in WordPress

So far we have shown you all the examples where custom fields are displayed inside the WordPress loop. What if you needed to show them outside the loop? For example, in the sidebar of a single post.

To display the custom fields outside the WordPress loop add the following code:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

Don’t forget to replace the key with your custom field name.

Display Custom Header, Footer, Sidebar using Custom Fields

Usually most WordPress themes use the same header, footer, and sidebar on all pages. There are multiple ways to show different sidebars, header, or footer for different pages on your website. See our guide on how to display different sidebar for each WordPress post or page.

One way to do this is by using custom fields. Edit the post or page where you want to show a different sidebar and then add the sidebar as custom field.

Adding custom sidebar to a post using custom fields

Now you need to edit your WordPress theme files like single.php where you want to display custom sidebar. You will be looking for the following code:

<?php get_sidebar(); ?>

Replace this line with the following code:

<?php global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

This code simply looks for the sidebar custom field and then displays it in your theme. For example, if you add wpbpage as your sidebar custom field, then the code will look for sidebar-wpbpage.php file to display.

You will need to create sidebar-wpbpage.php file in your theme folder. You can copy the code from your theme’s sidebar.php file as an starting point.

Manipulating RSS feed Content with Custom Fields

Want to display additional meta data or content to your RSS feed users? Using custom fields you can manipulate your WordPress RSS feed and add custom content into your feeds.

First you need to add the following code in your theme’s functions.php file or a site-specific plugin.

function wpbeginner_postrss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) {
if($coolcustom !== '') {
$content = $content."<br /><br /><div>".$coolcustom."</div>
";
}
else {
$content = $content;
}
}
return $content;
}
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

Now just create a custom field called “coolcustom” and add any value you like. You can use it to display advertisements, images, text, or anything you want.

Manipulate RSS Feed Title with Custom Fields

Sometimes you may want to add extra text to a post title for RSS feed users. For example, if you are publishing a sponsored post or a guest post.

First you add the following code in your theme’s functions.php file or a site-specific plugin.

function wpbeginner_titlerss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$gpost = get_post_meta($postid, 'guest_post', true);
$spost = get_post_meta($postid, 'sponsored_post', true); if($gpost !== '') {
$content = 'Guest Post: '.$content;
}
elseif ($spost !== ''){
$content = 'Sponsored Post: '.$content;
}
else {
$content = $content;
}
return $content;
}
add_filter('the_title_rss', 'wpbeginner_titlerss');

Next, you need to edit the post where you want to display the extra text in the title field and add guest_post and sponsored_post in custom fields.

 Sponsored and guest post custom fields

If any of these two custom fields are found with a value “true”, then it will add the appropriate text before the title. This technique can be utilized in various ways to fit whatever you like.

Want to learn more cool RSS feed hacks? See our guide on how to add content and manipulate your WordPress RSS feeds.

Set Expiration Date for Posts in WordPress Using Custom Fields

Want to set an expiration date for some posts on your WordPress site? This comes handy in situations when you want to publish content only for a specific period like running surveys or limited time offers.

One way to do this is by manually removing the post content or by using a plugin like Post Expirator plugin.

Another way to do this is by using custom fields to automatically expire posts after a specific time.

You will need to edit your theme files and add modify the WordPress loop like this:

<?php
if (have_posts()) :
while (have_posts()) : the_post(); $expirationtime = get_post_meta($post->ID, "expiration", false);
if( count( $expirationtime ) != '' ) { if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
} $secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween >= 0 ) {
echo 'This post will expire on ' .$expirestring.'';
the_content();
} else { echo "Sorry this post expired!"
}
} else { the_content();
} endwhile;
endif;
?>

Note: You will need to edit this code to match your theme.

After adding this code, you can add the expiration custom field to the post you want to expire. Make sure you add the time in this format mm/dd/yyyy 00:00:00.

Adding an expiration custom field to a WordPress post

Style Individual Posts Using Custom Fields

Want to change the look of an individual post using CSS? WordPress automatically assigns each post its own class which you can use to add custom CSS.

However, using custom fields you can add your own custom classes and then use them to style posts differently.

First you need to edit a post that you would like to style differently. Go to custom fields box and the post-class custom field.

Post class custom field

Next, you need to edit your WordPress theme files and add this code at the beginning of WordPress loop.

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Now you need to find a line with the post_class() function. Here is how it looked in our demo theme:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Change this line to include your custom field value, like this:

<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

Now if you examine the post’s source code using Inspect tool, then you will see your custom field CSS class added to the post class.

Custom field post class

Now you can use this CSS class to add custom CSS and style your post differently.

That’s all, we hope this article helped you learn more about WordPress custom fields. You may also want to see our ultimate step by step guide to boost WordPress speed and performance for beginners.

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 WordPress Custom Fields 101: Tips, Tricks, and Hacks appeared first on WPBeginner.

How to Display Different Sidebar for Each Post and Page in WordPress

Do you want to display different sidebars for different posts and pages on your WordPress site? Typically, WordPress themes show the same sidebars on fixed locations regardless of which post or page you’re on. In this article, we will show you how to create and display different sidebars for each post and pages in WordPress.

Custom Sidebars for WordPress

When Would You Need Different Sidebars in WordPress?

By default, sidebars are defined by your WordPress theme. Each WordPress theme comes with a few sidebars or widget ready areas that allow you to add widgets.

Typically a sidebar on the blog is displayed throughout your site on all posts, pages, categories, and archive pages. However, sometimes you may want your sidebar content to change based on specific posts or pages.

For example, you can show different featured content in the sidebar of your most popular posts, add different email signup forms, or display ads.

Having said that, let’s see how to create and display different sidebar for each post and page in WordPress.

Displaying Different Sidebars for Each Post and Page in WordPress

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

Upon activation, you need to visit the Appearance » Theme Sidebars page to create custom sidebars.

Creating a new custom sidebar

First you need to provide a name for your custom sidebar and then click on the create sidebar button.

The plugin will now create your sidebar, and you will be able to select the sidebar properties.

Sidebar settings

After that you need to select which theme sidebar will be replaced by your custom sidebar and provide a description for it.

Next, you need to select where you want your custom sidebar to replace the theme sidebar. You will see your posts, pages, categories and tags listed in the left column of the screen.

Simply select the areas where you want custom sidebar to be displayed and then click on ‘Add to sidebar’ button.

Add posts or pages to your custom sidebar

You will notice your selected items appear under the custom sidebar settings. Don’t forget to click on the save button to store your sidebar settings.

Easy Custom Sidebar allows you to create as many custom sidebars as you like and assign each sidebar to different pages on your WordPress site.

Adding Widgets to Your Custom Sidebars

Once you have created custom sidebars and assigned them to different areas of your website, it’s time to add widgets to your sidebars.

Head over to the Appearance » Widgets page. You will notice your newly created custom sidebars among your theme’s default sidebars.

Add widgets to custom sidebar

You can go ahead and add widgets to your custom sidebars. The plugin will now show the sidebars based on your settings. You can visit your selected pages to see it in action.

We hope this article helped you learn how to add different sidebars to each post or page in WordPress. You may also want to see our these WordPress sidebar tricks to get maximum results.

The post How to Display Different Sidebar for Each Post and Page in WordPress appeared first on WPBeginner.

27 Best WordPress Themes for Architecture

Are you looking for the best WordPress architecture theme for your firms’ website? There are so many WordPress themes out there that it becomes difficult to find a theme that would work for an architecture firm. In this article, we have hand-picked some of the best WordPress themes for architecture firms and businesses.

Best WordPress themes for architecture

Building Your Architecture Firm Website with WordPress

WordPress is a great platform for making a website for architecture business. It is flexible, easy to use, and gives you access to tons of professionally designed templates for your website.

First, you need to make sure that you are using the right platform for site. A self-hosted WordPress.org site gives you the freedom to use all the features of WordPress.

You will need to sign up for a WordPress hosting account. All websites need hosting. It will be your website’s home on the internet.

You will also need a domain name. It will be your website’s address on the internet and what users will type in their browser to reach your site (example, wpbeginner.com).

We recommend using Bluehost. It is one of the largest hosting companies in the world and an official WordPress hosting partner.

Once you have signed up for hosting, you are now ready to install WordPress. Follow the instructions in our complete step by step guide on how to start a WordPress blog, and you will be up and running in no time.

After installing WordPress, it is time to choose a WordPress theme. Select a theme from our expert pick below.

Need help installing the theme? See our beginner’s guide on how to install a WordPress theme.

Having said that, let’s take a look at some of the best WordPress themes for architecture. This list contains both paid and free themes and all of them are mobile responsive.

1. Architecto

Architecto

Architecto is a modern WordPress theme designed specifically for architecture firms. It comes with a modular homepage layout, built-in portfolio section, and multiple slider and blog styles.

It also includes unlimited color variations, custom widgets, social media integration, and more. It ships with a drag and drop page builder and a slider plugin. It comes with an easy to use theme options panel to help you quickly setup your website.

2. Koehn

Koehn

Koehn is a beautifully crafted WordPress theme for architects, architecture firms, and businesses. It uses a large full width slider on the homepage followed by welcome message, projects, team members, and more.

The homepage layout is fully widgetized allowing you to drag and drop content widgets to setup your homepage. Koehn includes several custom widgets for social media and content discovery features. It is also fully compatible with popular page builder plugins for WordPress.

3. Ambiance

Ambiance

Ambiance is a modern WordPress theme for architecture and interior design websites. It includes built-in sections to easily add services, portfolio, team members, and testimonials.

The homepage layout is made up of different sections that you can drag and drop. Other features include, flat icons, unlimited colors, homepage slider, custom social media widgets, and more.

4. Modules

Modules

Modules is a modern sophisticated WordPress theme suitable for any kind of business. It is designed to be multipurpose and ships with multiple ready-made websites that you can install with 1-click.

Modules allows you to easily create your own layouts by simply adding modules to a page. It has modules for your portfolio, testimonials, team, slider, and more. Each built-in layout is beautifully designed with elegant typography and gorgeous display of images.

5. North

North

Need to showcase your projects more prominently? Check out North. This beautiful WordPress theme is designed to be used for photography or portfolio websites. The homepage layout prominently displays your latest work.

Attention to detail is even more noticeable on the single project pages where users can see more details. It is quite simple to use and comes with a getting started page to walk you through the setup.

6. Megalith

Megalith

Megalith is a multipurpose WordPress theme suitable for construction and architecture websites. It has a modern homepage layout with large full width slider at top followed by a welcome message, services, and other sections.

It uses smooth transition and parallax effects on the homepage. It also ships with a drag and drop page builder and a slider plugin, which allows you to create your own page layouts if you need.

7. Domus

Domus

Domus is a flexible WordPress theme suitable for architecture, construction, and engineering businesses. It comes with an easy to use admin panel that helps you setup your website. It also includes sections to add your projects, team members, and photo galleries.

Domus is a WooCommerce ready theme and includes beautiful shop templates as well. Other features included are custom fonts, custom social media widgets, multiple homepage styles, page builder, and slider plugins.

8. Architekt

Architekt

Architekt is a purposefully designed WordPress theme for architecture and interior design businesses. It ships with multiple page layouts and a drag and drop page builder. It includes portfolio, events, testimonials, and photo galleries.

It comes with a beautiful admin panel allowing you to edit different theme modules. Among other features, you will find social media widgets, mega menu, unlimited colors, 1-click demo content, and more.

9. Atmosphere Pro

Atmosphere Pro

Atmosphere is a multipurpose WordPress theme with a spacious layout. Built on top of the rock solid foundation of the Genesis framework, this WooCommerce ready theme is perfect to build your architecture website.

It includes a widgetized homepage layout and an easy to use theme options panel. It also includes customizable header with custom logo support.

10. Cribs

Cribs

Cribs is a beautifully designed WordPress theme for interior design and architecture websites. It comes with a powerful drag and drop page builder plugin and several ready to use layouts.

It includes 1-click demo installer, custom widgets for social media, unlimited colors, custom Google Maps and more.

11. Presence

Presence

Presence is a powerful and highly flexible WordPress theme suitable for all kind of business websites. It ships with 10 ready to use demos that you can install with a click.

It also includes beautiful portfolio, post, and page layouts. It is WooCommerce ready and works with all popular page builder plugins.

12. Potenza

Potenza

Potenza is a one page WordPress theme suitable for an architecture firm. It ships with a fully widgetized homepage layout, where you just need to drag and drop content widgets to setup your website.

It includes custom background, images, animations, and parallax modules which will make your website truly stand out from the crowd.

13. Montblanc

Montblanc

MontBlanc is a multipurpose WordPress theme that is suitable for architecture and architects. Designed to be flexible, it includes lots of customization options, multiple layouts choices, and several homepage styles.

It can also be used as a one page theme. Inside you will find portfolio section, photo galleries, and built-in sliders with several display options to beautifully display your projects.

14. Hellomouse

Hellomouse

Hellomouse is a WordPress portfolio theme with minimalist approach to style. It is designed to leave a strong first impression with your portfolio items displayed immediately after a welcome message.

It includes beautiful templates for pages, posts, photo galleries, and more. Inside you will also find multiple social media and content discovery widgets. All theme options can be easily setup using the live theme customizer.

15. Besty

Besty

Besty is a free WordPress theme designed for architecture, design, and photography websites. It uses a four column layout for the blog page and a full screen header image on the homepage.

It features a static sidebar on the left with your site’s logo, navigation menus, and social media buttons.

16. Balance

Balance

Balance is a modern and flexible WordPress theme for business websites. It features a sticky navigation menu at the top and a full width slider on the homepage.

It includes 6 color schemes, unlimited customization options, and multiple blog layouts. Among social features, it has a full width Instagram section and a social profiles widget. Balance is WooCommerce ready and supports all popular page builder plugins.

17. Lenscap

Lenscap

Lenscap is an eCommerce ready WordPress theme suitable for any kind of website including architecture, design, and construction. It features an elegant layout with gorgeous typography. Its homepage includes a highly customizable featured content carousel.

Lenscap also comes with engaging lightbox popup display for your photos. It includes multiple color schemes, and you can also create your own. It is quick and easy to setup with a handy setup guide that walks you through the whole process.

18. Green Ink

Green Ink

Green Ink is a free WordPress theme for businesses and startups. It comes with page builder integration, slider, portfolio, and full WooCommerce support.

In also includes flexible customization options, unlimited color choices, custom widgets, multiple sidebars and page templates. All theme options can be easily set up using live theme customizer.

19. True North

True North

True North is another ideal choice for a WordPress architecture theme. This WordPress portfolio theme comes with a unique layout featuring your best work at the top. It comes with a powerful portfolio content type with beautiful templates to showcase your projects.

Theme setup is easy with a custom options panel, custom widgets for Instagram, Twitter, and more.

20. Rhea

Rhea

Rhea is a free WordPress theme suitable for architecture and business websites. It can also be used as a single page WordPress theme. It features a full screen header with prominent call to action buttons.

It has parallax background support, portfolio content type, WooCommerce and supports WPML for multilingual websites.

21. Ultra

Ultra

Ultra is a highly flexible WordPress multipurpose theme. It includes 8 ready made websites with demo content that can be installed with 1-click. You can then just replace the content and images with your own.

You can also edit pages with the integrated page builder. It has built-in portfolio, services, team members, and events sections. Among other features, it includes animated counters, progress bars, slider, timeline, and WooCommerce support.

22. Infinity Pro

Infinity Pro

Infinity Pro is a stylish WordPress theme suitable for any kind of business. It is built on Genesis framework and features large header image with prominent call to action. It has a transparent menu on the top, which becomes sticky when users scroll.

It has a widgetized homepage layout and comes with an easy theme options panel. It is easy and quick to set up using live theme customizer.

23. Indigo

Indigo

Indigo is a stunningly beautiful and modern WordPress theme suitable for architecture, design, construction, and other businesses. It uses a modular approach to design and comes with built in modules to just drag and drop to build your own page layouts.

It also includes multiple ready made websites that you can install and replace with your own images and content. Among other features, it offers WooCommerce support, Google fonts, icon fonts, slider, portfolio content type and more.

24. Creativo

Creativo

Creativo is a powerful and beautifully designed multi-purpose WordPress theme perfect to build an architecture website. It includes ready made websites with 1-click demo content installer. It has multiple color schemes, layout styles, unlimited customizations and multiple header styles.

It ships with drag and drop page builder and two premium slider plugins. All theme options are easily setup using the powerful options panel.

25. Monochrome

Monochrome

Looking for a minimalist modern WordPress architecture theme? Check out Monochrome. This beautifully designed theme is built on top of Genesis framework. It offers a distraction free layout with beautiful typography and a spacious layout.

It includes a widgetized home page, customizable header, live theme customizer support, and a theme options panel.

26. Meteor

Meteor

Meteor is a stylish WordPress theme suitable for architecture firms and portfolio websites. It includes grid, carousel, masonry, and blocks portfolio templates, allowing you to beautifully display your best work. It also allows you to choose different layouts for each single project in your portfolio.

It includes sections to add portfolio projects, services, and photo galleries. You can also choose from 4 layout styles for your posts.

27. Highend

Highend

Highend is a powerful WordPress theme to create any kind of website. It includes a drag and drop page builder and comes with 16+ demo templates that you can use as a starting point.

It also includes beautiful templates for your portfolio, photo galleries, blog, and landing pages. It ships with premium slider plugin and full WooCommerce support.

We hope this article helped you find the best WordPress themes for your architecture website. You may also want to see our ultimate WordPress SEO guide for beginners.

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 27 Best WordPress Themes for Architecture appeared first on WPBeginner.

How to Embed a Google Form in WordPress

Do you want to embed a Google form in WordPress? Google Forms are easy to embed anywhere and are particularly useful when you need to share the form on multiple websites. In this article, we will show you how to embed a Google form in WordPress.

How to Embed a Google Form in WordPress

Google Forms vs WordPress Form Builders

Some of you may be thinking that why would anyone want to use Google Forms when there are amazing form builder plugins like WPForms?

It is true, that WordPress form builders are easier to use. They are integrated into your WordPress site, so you can show users a special offer, accept payments, create custom login forms, user registration forms, and more.

However, sometimes you may need to share a form on different websites, email lists, and platforms so that all form responses are stored at the same location.

In such situations, Google Forms can be an easier option. It is easy to share, mobile friendly, and gets the job done. All responses are stored in your Google Drive, and you can even add collaborators to work on the form responses.

How to Embed a Google Form in WordPress

First you need to visit the Google Forms website. If you haven’t already created a form, then select a template to start a new form.

Creating a new form in Google Forms

Creating a new form in Google Forms is quite simple. First you need to provide a form title, description, and then you can start adding your form fields.

Google’s AI technology automatically selects the correct form field based on the question you ask. If it selects incorrect field type, then you can manually select it.

Adding form fields in Google Forms

You can click on the add button in the menu to add a new form field. You can also add images and videos.

Once you are satisfied with your form, click on the send button to get the embed code.

Get form embed code

This will bring up the send form popup where you need to click on the embed tab. Next, click on the ‘Copy’ link to copy the embed code.

Copy your Google Forms embed code

After that head over to your WordPress site’s admin area and edit the post or page where you want to display the form.

On the post edit screen, you will need to switch to the text editor and then paste your form code.

Paste Google Forms embed code in WordPress post

Don’t forget to click on the save or publish button to save your changes.

You can now preview your post or page to see the Google form embedded in WordPress.

A Google Form embedded in a WordPress page

We hope this article helped you learn how to easily embed Google Forms in WordPress posts and pages. You may also want to see our list of 19+ free Google tools every WordPress bloggers should use.

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 Embed a Google Form in WordPress appeared first on WPBeginner.

How WordPress Actually Works Behind the Scenes (Infographic)

Have you ever wondered how WordPress actually works behind the scenes? For most users, it seems simple because you type a URL and a page loads in few seconds, but there is a lot that happens behind the scenes. In this guide, we will walk you through how WordPress actually works behind the scenes, and we have created an easy to follow infographic as well.

How WordPress Works Behind the Scenes

Why You Should Learn How WordPress Works?

WordPress is an open source software, which means any one can study its code and write their own apps (plugins) and templates (themes) for it.

Learning how WordPress works and what goes on behind the scenes can help you understand what you can do with it. You can learn about improving WordPress performance and write better code for your own projects.

This guide will walk you through the whole process step by step. We will start from when a user requests a page and end when that page is fully loaded.

Ready? Let’s get started.

Click to View the Behind the Scenes WordPress Infographic

You can also follow our written tutorial below for more details.

1. Load wp-config.php File

The wp-config.php is the WordPress configuration file. It sets global variables for a WordPress site and contains your WordPress database information. This is the first file WordPress loads for obvious reasons. Learn more about wp-config.php file and how to edit it.

2. Setup Default Constants

After loading wp-config.php file, WordPress will move on to set default constants. This includes information like default WordPress upload location, maximum file sizes, and other default constants set in wp-config.php file.

3. Load advanced-cache.php File

If advanced-cache.php file exists on your site, then WordPress will load it next. This file acts as a drop-in file and is used by several popular plugins particularly WordPress caching plugins. If your site is using this file, then you will see a new item on the plugins screen called Drop-ins.

advanced-cache.php file appearing as drop-in

4. Load wp-content/db.php File

WordPress allows developers to create their own database abstraction layers and load them in a db.php file placed inside the wp-content folder. It is commonly used by WordPress caching plugins to improve database performance. If your website has this file present, then WordPress will load it.

5. Connect MySQL and Select Database

WordPress now have enough information to proceed further. It will move on to connect to the MySQL server and select the database.

If WordPress is unable to connect to the database, then you will see the “Error establishing database connection” error and WordPress will quit right here.

If everything works fine, then it will move on to next steps.

6. Load object-cache.php or wp-includes/cache.php File

WordPress will now look for object-cache.php file. If it doesn’t exist, then WordPress will move on to load wp-includes/cache.php file.

7. Load wp-content/sunrise.php File

If it is a multisite network, then WordPress will now look for sunrise.php file if it exists in the wp-content folder.

8. Load Localization Library

WordPress will now load l10n.php library in the wp-includes folder. This file loads WordPress localization system, loads translations, sets locales, etc. See our guide on how to use WordPress in other languages.

9. Load Multisite Plugins

If it is a multisite network, then WordPress will now load the multisite plugins. Learn more about how plugins work on WordPress multisite network.

Network activated plugins

10. Do Action ‘muplugins_loaded’

The action muplugins_loaded is now run by WordPress. This action is available only to network activated plugins on a WordPress multisite.

11. Load Active Plugins

WordPress will now load all active plugins on the site. It does that by looking in the active_plugins entry in the options table of your WordPress database. This allows WordPress to ignore plugins that are installed on your site but not activated.

12. Load pluggable.php File

The pluggable.php file contains functions that can be redefined by WordPress plugins. WordPress will now see if the functions inside this file are already defined by another plugin. Otherwise, it will define those functions itself.

13. Do Action ‘plugins_loaded’

WordPress will now run the action ‘plugins_loaded’. It allows developers to hook their functions to run after all active plugins have been loaded.

14. Load Rewrite Rules

WordPress will now load the rewrite rules. These rewrite rules help WordPress use SEO friendly URLs.

15. Instantiate $wp_query, $wp_rewrite, $wp

At this point WordPress loads the following objects:

$wp_query: The global instance that holds WP_Query class. It tells WordPress what content is requested in a typical WordPress query format.

$wp_rewrite: The global instance that holds your WP_Rewrite class. It contains your rewrite rules and functions which tell WordPress which URL to use to display the requested content.

$wp: The global instance of the WP class which contains functions that will parse your request and perform the main query.

16. Do Action ‘setup_theme’

WordPress will now move on to run ‘setup_theme’ action. This action runs before your WordPress theme is loaded.

17. Load Child Theme’s functions.php File

The functions.php file acts as plugin and is used in WordPress themes to add theme specific features to your website. If you are using a child theme, then WordPress will now load your child theme’s functions.php file.

Otherwise, it will go on and load your current active theme’s functions.php file.

18. Load Parent Theme’s functions.php File

If you are using a child theme, then WordPress will now load your parent theme’s functions.php file.

19. Do Action ‘after_setup_theme’

This action runs after WordPress has setup the theme and loaded theme functions. It is the first action available to themes.

20. Setup Current User Object

At this point, WordPress loads the current user object. It allows WordPress to manage the request in accordance with the user’s role and capabilities.

21. Do Action ‘init’

WordPress has so far loaded all the crucial information it needs. Now it fires the ‘init’ action.

This action allows developers to add code that needs to be executed after WordPress has loaded all previously mentioned information.

22. Do Action ‘widget_init’

The widget_init action allows developers to register widgets and run code they needed to run at this time.

23. Run wp()

WordPress now calls wp() function which is located in wp-includes/functions.php file. It sets up the WordPress query globals $wp, $wp_query, $wp_the_query and then calls $wp->main.

24. Parse Request

Now WordPress has all the information it needs to parse the user request. It starts by checking the rewrite rules to match the user’s request.

And then runs query variable filters, request action hook, and sends header request.

25. Run Query

If no content matches the query, then WordPress will set is_404 variable.

Otherwise, WordPress will go on to load query variables.

It will then run WP_Query->get_posts().

Next, it fires DO_ACTION_REF_ARRAY ‘pre_get_posts’ action with WP_Query object.

WordPress will now run apply_filters to clean up query and run some final checks.

Now it fetches posts from the database and applies posts_results and the_posts filters.

The query part ends with WordPress returning the posts.

26. Do Action ‘template_redirect’

WordPress will now run the template_redirect action. This hook runs just before WordPress determines which template page to load.

27. Load Feed Template

If the requested content is a RSS feed, then WordPress loads the feed template.

28. Load Template

WordPress will now look for the template file based on WordPress template hierarchy. It then loads the template which usually contains a WordPress loop.

29. Do Action ‘shutdown’

Just before ending all PHP execution, WordPress fires the last action called shutdown.

WordPress stops working here. It has run the code and generated user’s requested web page.

Now, your web hosting server replies to user’s request by sending them the web page generated by WordPress. This page contains HTML, CSS, and Javascript code, which tells user’s browser how to display it on screen.

Amazing isn’t it? All these things happen within milliseconds. If you are using one of these best WordPress hosting services, then ideally your page will load in a couple of seconds.

We hope this article helped you learn how WordPress works behind the scenes. You may also want to see our step by step guide on how to boost WordPress speed and performance for beginners.

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 WordPress Actually Works Behind the Scenes (Infographic) appeared first on WPBeginner.

How to Add Custom Meta Boxes in WordPress Posts and Post Types

Do you want to create custom meta boxes for your WordPress posts, pages, and custom post types? Custom meta boxes are commonly used to provide a better user interface for adding custom fields (meta data) into your content. In this article, we will explain what is a custom meta box, and how you can easily add custom meta boxes in WordPress posts and post types.

How to add custom meta boxes in WordPress posts

What is a Custom Meta Box in WordPress?

Custom meta box is a more user friendly interface to add custom fields (meta data) in your posts, pages, and other custom post types.

WordPress comes with an easy to use interface that helps you create content like posts and pages, or custom psot types.

Normally, each content type consists of the actual content and its metadata. Metadata is information related to that content like date and time, author name, title, and more. You can also add your own meta data by using custom fields.

Custom fields

However, adding metadata using the default custom fields box is not very intuitive. This is where custom meta boxes come in.

WordPress allows developers to create and add their own custom meta boxes on post edit screens. That’s how most popular plugins add different options on your post edit screens.

For example, the SEO title and meta description box inside Yoast SEO plugin is a custom meta box:

Category SEO Title and Meta description in Yoast SEO

Having said that, let’s see how you can easily add custom meta boxes in WordPress posts and post types.

Creating Custom Meta Boxes in WordPress

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

Upon activation, the plugin adds a new menu item labeled ‘Custom Fields’ to your WordPress admin bar. Clicking on it will take you to the custom fields page.

This page will be empty since you haven’t created any custom fields yet. Go ahead and click on the ‘Add New’ button to continue.

Add new custom fields group

You will be taken to the ‘Add New Field Group’ page.

Here you need to provide a title for your field group. This title will be used as the title of your meta box.

After that you can start adding your fields. Simply click on the ‘+ Add Field’ button to add your first field.

Add your fist field

This will bring up the field settings form. First you need to provide a label for your field. This label will be displayed in your meta box before the field.

Creating a new field for your custom meta box

After that you need to select the field type. Advanced Custom Fields plugin allows you to choose from a whole range of options. This includes text, textarea, radio buttons, checkboxes, full WYSIWYG editor, images, and more.

Next, you need to provide field instructions. These instructions will tell users what to add into the field.

Below that, you will find other options for your field. You need to carefully review these options and adjust them to match your needs.

Field settings

Next, click on the close field button to collapse the field.

If you need to add more fields to your metabox, then click on the ‘+ Add Field’ button to add another field.

Close field and add another

Once you are done adding fields, you can scroll down to the location section. This is where you can define when and where you want your meta box to be displayed.

Location rules

Advanced Custom Fields comes with a handful of predefined rules for you to choose from. For example, you can select post types, post category, taxonomy, page parent, and more.

Next, comes the meta box options settings.

First you need to choose the order number. If you have multiple field groups defined for one location, then you can select the order number for them to be displayed. If you are unsure, then leave it as 0.

Meta box options

Next, you need to choose the meta box position on the page. You can choose to show it after the content, before the content, or in the right column.

Below that, you will need to choose a style for your meta box. You can choose it to be like all other WordPress meta boxes, or you can choose it to be seamless (without any meta box).

If you are unsure, then select Standard (WP Meta box) option.

Lastly, you will see a list of fields normally displayed on a post edit screen. If you want to hide a particular field on your post edit screen, then you can check it here. If you are not sure, then its best to leave them unchecked.

Once you are done, click on the publish button to make your field group live.

Publish your field group

Congratulations, you have successfully created your custom meta box for your WordPress post or post type.

Depending on your settings, you can now visit your post or post type to see your custom meta box in action.

Custom metabox preview

You can use this custom meta box to add meta data into your posts or post types. This data will be stored in your WordPress database when you save or publish the post.

Displaying Your Custom Meta Box Data in WordPress Theme

So far we have successfully created a custom meta box and displayed it on our post edit screen. The next step is to display the data stored in those fields on your WordPress theme.

First, you need to edit the custom field group you created earlier. On the ‘Edit Field Group’ page, you will see your custom fields, and their names.

Field names

You will need these fields names to display them on your website.

Advanced Custom Fields allows you to do that in two different ways.

First, you can use a shortcode to display a custom field into your post.

[acf field="article_byline"]

You can also display them by adding code into your WordPress theme files. If you haven’t done this before, then take a look at our beginner’s guide on how to copy and paste code in WordPress.

You will need to edit the theme file where you want to display the data from these fields. For example, single.php, content.php, page.php, and so on.

You will need to make sure that you add the code inside the WordPress loop. The easiest way to make sure that you are entering the code inside the loop is to look for a line in your code that looks like this:

<?php while ( have_posts() ) : the_post(); ?>

You can paste your code after this line and before the line that ends the loop:

<?php endwhile; // end of the loop. ?>

Your custom field code would look something like this:

<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

This code will display the data entered into the article byline field of our custom meta box.

Notice how we wrapped the code in a h2 heading with a CSS class. This will help us format and style the custom field later by adding custom CSS into our theme.

Here is another example:

<blockquote class="article-pullquote"> <?php the_field('article_pullquote'); ?> </blockquote> 

Don’t forget to replace the field names with your own field names.

You can now visit the post where you have already entered the data into your custom fields. You would be able to see your custom meta data displayed.

Custom fields displayed on a website

Advanced Custom Fields is a very powerful plugin with a lot of options. This tutorial only scratches the surface. If you need more help, then don’t forget to check out the plugin’s documentation on how to further extend it.

We hope this article helped you learn how to add custom meta boxes in WordPress posts and post types. You may also want to see our step by step guide on how to boost WordPress speed and performance for beginners.

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 Add Custom Meta Boxes in WordPress Posts and Post Types appeared first on WPBeginner.

How to Allow Editors to Only Edit Certain Pages in WordPress

Do you want to restrict WordPress editors to only edit certain pages on your website? By default, a user with the editor permissions can edit any page or post. However, sometimes you may want to restrict the editor from editing certain pages. In this article, we will show you how to allow editors to only edit certain pages in WordPress.

Allow editor to only edit certain pages in WordPress

Why Stop Editors from Editing All Pages in WordPress?

WordPress comes with a robust user roles and permissions system. It allows you to add users under different user roles, and each user role comes with different capabilities.

One of these user roles is called Editor. Users with the editor user role can edit all posts and pages on your website.

Many WordPress sites are structured in a way where editors are usually responsible for content like articles and blog posts. Pages are usually static pages that do not change often and are used to display information like your about us, privacy policy, contact form, and more.

If you do not want editors to be able to edit pages, or want them to only edit specific pages, then you will need to modify the editor user role on your site.

Having said that, let’s see how to allow WordPress editors to only edit certain pages.

Step 1. Modify Editor User Role in WordPress

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

Upon activation, you need to visit the Users » Capabilities page to configure plugin settings.

Select Editor user role to edit

Next, you need select the Editor user role under ‘Select Role to View/Edit’ box and click on the ‘Load’ button to continue.

The plugin will now load the Editor user role and display all the permissions and capabilities of the role.

Default capabilities of Editor user role in WordPress

At the top, you will notice editing and deletion capabilities for posts and pages.

You need to uncheck the ‘Edit Others’ and ‘Delete others’ option for pages. Unchecking these options will stop editors from editing or deleting pages created by other users.

Modify editor user role

Don’t forget to click on the ‘Save Changes’ button at the bottom to save your settings.

Now editors will not be able to edit any page that’s not published or created by them.

To make sure that editors are not able to edit pages, you need to assign an administrator user to be the author of those pages.

You can do this by going to the Pages » All Pages screen and clicking the check box to select all pages. After that you need to select ‘Edit’ under the ‘Bulk Actions’ drop down menu and then click on the ‘Apply’ button.

Bulk edit pages

This will load the bulk edit box where you can change the author of all selected pages. As an administrator, you can assign yourself as author of all pages or another user with administrator user role.

Change author of all pages

Don’t forget to click on the update button to save your changes.

If you have more than 20 pages, then you may need to click on the next button to load the next 20 pages and repeat the process to bulk change author for all pages.

Step 2. Allowing Editors to Edit Specific Pages

So far you have stopped editors from editing any pages on your WordPress site. If you want, then you can still allow editors to be able to edit specific pages.

Simply edit the page where you want the editor to be able to make changes. Next, click on the ‘Screen Options’ button at the top right corner of the screen and make sure that the checkbox next to ‘Author’ option is checked.

Display Author meta box on page edit screen

Now scroll down to the author meta box and select the user you want to be able to edit the page.

Change page author

Don’t forget to click on the update button to save your changes.

We hope this article helped you learn how to allow WordPress editors to only edit certain pages. You may also want to see our ultimate step by step WordPress security guide for beginners.

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 Allow Editors to Only Edit Certain Pages in WordPress appeared first on WPBeginner.