One place for hosting & domains

      Custom

      How to Add Custom Fields to Your WordPress Posts


      As you become comfortable with WordPress, you may want to start pushing its boundaries. This means experimenting with some of the platform’s more advanced options, which includes learning how to create custom fields.

      Adding a custom field to your WordPress post enables you to assign extra data to it. In turn, this helps you add specific information or features only to particular posts. As an example, you could use a custom field to tell WordPress which of your posts are sponsored, then add some code to your theme file that will display a disclosure statement only on those posts.

      An Introduction to Custom Fields

      The WordPress Block Editor is pretty flexible by default and enables you to customize your content to the Nth degree. You can add just about anything you like to your posts. However, the more content you have, the more you may start wishing for better ways to organize and manage it.

      Custom fields are a somewhat more advanced WordPress feature that lets you add extra information to specific posts. That information is called ‘metadata’. Custom fields and metadata are of particular use to developers, who can use them to extend posts with all sorts of additional coding. However, they can still be beneficial for the more general WordPress users.

      For example, let’s say you wanted to indicate which of the posts on your blog are sponsored to ensure you’re being transparent with your audience. You could add a short disclosure statement to each relevant post individually. Alternatively, you could save time by using a custom field that displays a relevant message. Then, you could add code to your theme file to make your disclosure statement appear on the correct posts.

      If this sounds complex, don’t worry. Using custom fields is more straightforward than it looks. In fact, we’ll show you exactly how to implement this example below. If you’re interested in other potential applications for custom fields and metadata, you may also want to check out the WordPress Codex entry on the topic.

      How to Add Custom Fields to Your WordPress Posts (In 2 Steps)

      The concept of custom fields might seem a bit abstract, so let’s walk through an example to see exactly how this feature works in action. This general custom field process can be used for a wide variety of applications. You could add status updates to your posts, include a disclosure notice on sponsored content, and much more.

      However, you’ll first want to take a moment and back up your website. If you’re following these instructions, you’ll be implementing changes to your theme’s primary file, and you don’t want to risk making any permanent mistakes. For extra security, creating a child theme and using it instead of your base theme is also advisable.

      Step 1: Enable Custom Fields and Assign New Metadata to Your Post

      The first thing you’ll need to do is open up a post to which you would like to add a custom field. It can be an old post or a new one.

      Click on the three dots in the top right corner and select Preferences from the dropdown list:

      Accessing Preferences from the WordPress Block Editor

      Then, select Panels from the popup menu and enable Custom fields. You’ll now be prompted to Enable & Reload:

      Enabling custom fields with the WordPress Block Editor

      Now, if you scroll down below the post, you’ll find a new section:

      Adding custom fields to a post in WordPress

      Under Name and Value, you’ll add some metadata describing the information you want to add to this post. Depending on the themes and plugins you have installed, you may already have some options listed under Name. Regardless, you’ll want to create new metadata in this instance.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      Choose a name for your metadata. It can be anything, although it’s best to keep it short and descriptive. Continuing our example from above about displaying a disclosure statement on specific posts, we’ll call it Sponsored Post. Then we’ll add a simple “Yes” to the Value box, indicating that this particular post is sponsored:

      Click on Add Custom Field, and this metadata will now be assigned to your post. Don’t forget to save or update the post itself too.

      Step 2: Add Conditional Code to Your Theme File

      The previous step told WordPress a critical piece of information about your post: whether or not it is sponsored content. Now, you need to add directions so that your site knows what to do about that. As we mentioned earlier, this does involve a bit of coding. However, don’t let that scare you off. Even if you aren’t a developer, you should find the process relatively straightforward.

      Within WordPress, you’ll want to navigate to Tools > Theme File Editor. Here, you can look through and make changes to the files that make up your site. You’ll want to check out the sidebar on the right-hand side and find the Single Post file (also known as single.php):

      This is where you’ll add the code that will tell WordPress what to do in response to your custom fields. The exact code you’ll use will vary somewhat, depending on what you want to do. In our example, you’d want to add this snippet:

      <?php
      $meta = get_post_meta( get_the_ID(), 'Sponsored Post' );
      if( $meta[0] == 'Yes' ) {
      ?>
      <p>This post is sponsored content, and we received a free copy of the product in order to conduct our review.</p>
      <?php } ?>

      Then, click on the Update File button. This code tells WordPress to check and see if a post has the Sponsored Post custom field and if the value is set to “Yes”. If so, it will display the message. If there is no custom field or the Sponsored Post value is set to “No”, nothing extra will be added to the post.

      Also, where you place the code will determine when it appears in the post. For example, to get it to appear at the top of the page, you would add it before this line in the single.php file:

      while ( have_posts() ) : the_post();

      Hopefully, you are beginning to see how custom fields can be useful. There are a lot of possibilities when using this feature, so don’t be afraid to play around a little and see what you can accomplish with it.

      Using Plugins to Manage Your Custom Fields

      You now know how to add custom fields and metadata to your WordPress posts. However, what if you want to get more flexibility from this feature or just want to simplify the process?

      This is WordPress we’re talking about, so of course, there are plugins that can help you out. There may not be a lot of plugins related to custom fields, but you can find a few quality options. For a great example, check out Advanced Custom Fields:

      Advanced Custom Fields plugin.

      This very popular, free plugin streamlines the process of adding custom fields to WordPress. It also gives you more choices for where metadata can be added, such as users, media, and comments. Finally, it adds tools to provide more options for displaying custom field values within your theme files. There’s even a premium version with even more functionality.

      If that plugin seems like overkill — and it can be for non-developers — Custom Field Suite is a solid alternative:

      Custom Field Suite WordPress plugin

      This tool is essentially a lightweight version of Advanced Custom Fields. It adds a handful of useful new custom field types to your site. Plus, it simplifies adding and managing custom fields without overwhelming you with too many new options.

      This can be a smart plugin to start with if you’re looking to get more out of your custom fields. What’s more, you can always switch to a more robust solution once you feel more confident with the process.

      Add Custom Fields to WordPress Content

      Custom fields and metadata are concepts that might seem a smidge confusing at first. However, with time and patience, you’ll find that they enable you to get even more out of the WordPress platform.

      Want a Free Theme?

      When you host with DreamHost you get access to our WP Website Builder tool and more than 200+ industry-specific starter sites for free!

      custom website design



      Source link

      Register Custom DNS Name Servers


      DNS name servers (also referenced as the single word nameservers) are the backbone of the Domain Name System. They are the servers that host a domain’s DNS records, which map human-readable domain names to IP addresses.

      When registering a new domain or configuring an existing domain, you must set the FQDN (fully qualified domain name) of each name server you intend to use. This is done through your domain’s registrar. You can typically chose to use your registrar’s name servers, a third party name server, or a self-hosted name server. If you decide to use your registrar’s DNS service or a third party DNS service, that service provides you with the FQDNs for its name servers. For example, the name servers for Linode’s
      DNS Manager are ns1.linode.com through ns5.linode.com.

      If you instead decide to use your own custom name servers, you first need to create glue records on your registrar for the FQDN you wish to use with each name server. In tandem with glue records, you must also set corresponding A records with your domain’s DNS records. The last step is to configure your domain to use your new custom name servers.

      1. Configure Glue Records
      2. Create A Records
      3. Change the Name Servers for Your Domains

      This guide covers how to register a custom name server and assumes you have already configured a self-hosted DNS software on each system you intend to use.

      Before You Begin

      • You must have at least one registered domain name and be able to access the domain’s registrar. Within this domain name, determine the FQDNs you’d like to use for your custom name servers. Many applications and registrars require at least two name servers and they are typically formatted as ns1.example.com, ns2.example.com, and so on, replacing example.com with the domain you’d like to use.

      • For each name server you wish to configure, deploy your preferred DNS software on a Compute Instance or any publicly accessible server. If you are using cPanel, Plesk, or other software that automatically configures your DNS software, make sure it is properly installed.

      Why Use Custom Name Servers?

      Third-party DNS services, like Linode’s DNS Manager, are very reliable, feature-rich, highly available, and protected against attacks. For most applications, these services are preferable to self-hosting custom name servers. As with many custom self-hosted solutions, the effort to build and maintain a custom DNS name server might not be worthwhile. That said, there are some compelling reasons to chose self-hosting your own custom name servers over utilizing an existing DNS service.

      • Software integration: Many popular self-hosted software solutions, including cPanel and Plesk, can deploy their own custom name servers to automatically manage DNS records. When a user makes a change in the software, the associated DNS records are automatically created or updated without a user needing to manually configure them.

      • Greater control: A primary reason for using any self-hosted solution is to gain more granular control over a system. In the case of name servers, you can use any
        name server software supported by your system and take advantage of all of its features.

      • Vanity/Branded domain: Some third-party DNS services allow you to use your own domain instead of their standard name server domains for branding purposes, but not all have this feature. When self-hosting your own name servers, you can use whichever domain name you wish.

      Configure Glue Records

      When a domain name is resolved, your system’s DNS resolvers first query the root name server. The root then provides the name servers for the domain’s top-level domain (TLD), such as .com or .net. Then, a query is sent to the TLD name servers, which returns the authoritative name servers for the domains. The DNS resolver can then finally query an authoritative name server for the DNS record it needs. This works fine for most domain queries, such as when the DNS records for example.com are hosted on the name server ns1.linode.com. But this breaks down for name server domain resolution, where the record for ns1.example.com is hosted on the ns1.example.com authoritative name server.

      To overcome this circular resolution, glue records are needed. Glue records are set within the domain’s registrar and can map the custom domain of a name server to the IP address of that name server. To configure glue records, follow the instructions below.

      1. Obtain the public IPv4 addresses for each of your custom name servers. If they are hosted on a Linode Compute Instance, see
        Managing IP Addresses on a Compute Instance.

      2. Log in to your domain’s registrar.

      3. Configure a glue record for each custom name server. This maps the full domain of a name server to the IPv4 address for that server. The name of this feature and the instructions for setting a glue record depend on the registrar you are using. Here are the instructions for a few popular registrars, though any registrar that supports glue records can be used:

        Some registrars may require you enter the entire FQDN of the custom name server (such as ns1.example.com), while others only need the subdomain (such as ns1). Additionally, registrars like Namecheap pre-populate a dropdown list with common name server hostnames. In this case, you can likely select from the predefined list or type your own.

      After this is complete, your registrar sends the glue records to the TLD name servers associated with your domain. This process can take up to 24 hours to complete, though it is generally finished within a few minutes to an hour. See
      Verify DNS Changes.

      Create A Records

      In tandem with setting up glue records at the registrar-level, you should also create A records within your custom name servers itself. Many self-hosted software applications that manage DNS records, such as cPanel and Plesk, do this automatically – provided they are configured to use a self-managed DNS service. If this is the case, you can skip this section – even if you have yet to install the software.

      1. Log in to the administration panel or terminal for your DNS software on your custom name server.

      2. Within the domain zone file, add an A record for each custom name server. This record should point the hostname of the custom name server (such as ns1.example.com) to the IPv4 address of the name server.

      Since these steps vary greatly depending on your DNS software, please reference the official documentation for that software. For instance, for users of BIND9 (the most popular DNS software), see
      Configurations and Zone Files.

      DNS records can take up to 24 hours to fully propagate, depending on several factors – including the TTL setting, the DNS service you are using, and the caching system on the DNS resolver. In general, you can expect to see the updates within 5 minutes to an hour. See
      Verify DNS Changes.

      Change the Name Servers for Your Domains

      Once the custom name servers have been successfully registered, you can begin using them to host DNS records for your domains. To do this, add the domain inside your custom name server and then update the domain’s registrar to reflect the new authoritative name servers.

      1. Log in to your domain’s registrar.

      2. Update the domain’s name servers to use your new custom name servers (such as ns1.example.com and ns2.example.com). The name for this setting various among registrars, but it is commonly called external or custom name servers.

      After configuring the new authoritative name servers for a domain, they are sent to the TLD name servers associated with that domain. This process can take up to 24 hours to complete, though it is generally finished within a few minutes to an hour. See
      Verify DNS Changes.

      Verify DNS Changes

      Once you’ve made the changes that are needed, you can verify that the records are correct and have propagated to the appropriate servers by following the instructions below.

      1. Obtain the TLD name servers by running the following dig command, replacing com with the TLD for your domain.

        dig +short com NS
        

        This returns a list of TLD name servers.

      2. View the DNS records a particular TLD name server has for your domain by using the command below. Be sure to replace a.gtld-servers.net. with whichever TLD name server you wish to query (leaving the @ and trailing .) and example.com with your domain.

        dig +norec @a.gtld-servers.net. example.com
        
      3. To verify the glue records, examine the output’s ADDITIONAL section. There should be an A record for each of the glue records you’ve configured, pointing your custom name server domain to your IP address.

        ;; ADDITIONAL SECTION:
        ns2.example.com.	3600	IN	A	192.0.2.36
        ns1.example.com.	3600	IN	A	192.0.2.37

        If you do not see a similar output, you can query other TLD name servers. It may be that the changes have not yet propagated to all of them.

      4. To verify your domain is using your new name servers, examine the AUTHORITY section of the output. This should be a list of all NS (name server) records, which map your domain to one or more name servers. All of the name servers configured for your domain should appear here, though they are typically displayed in a somewhat random order.

        ;; AUTHORITY SECTION:
        example.com.		3600	IN	NS	ns2.example.com.
        example.com.		3600	IN	NS	ns1.example.com.
      5. Both the glue records and name servers can also be verified by running a dig +trace command, as shown below. Replace example.com with your domain and ns1.example.com with your custom name server. Repeat this command as needed for each name server.

        dig example.com +trace +additional | grep ns1.example.com
        

        Within the output, you should see at least one NS record that defines your custom name sever and an A record for your name server that points to the correct IP address of your server.

      6. The A records for your custom name server’s domain can be verified by running the following dig command, which confirms the changes have propagated to the DNS resolver used by your system. Replace ns1.example.com with the domain of your name server.

        dig ns1.example.com A +short
        

        This should output the IP address configured within the A record for that domain.



      Source link

      How to Create a Custom Favicon in WordPress


      Whether you’re creating a podcast website or personal blog, making it memorable and user-friendly can be challenging. As you configure your website settings, it’s essential to establish your brand identity and start building a solid reputation.

      A simple way to create a professional online presence is by designing a custom favicon. When you add your logo to browser tabs and search results, you can increase brand recognition and Click-Through Rates (CTR).

      In this post, we’ll give you an overview of favicons and why you should consider adding one to your WordPress website. Then, we’ll show you how to create a custom favicon. Let’s get started!

      An Introduction to Favicons

      A favicon, or ‘favorite icon,’ is a 16×16 pixel image that helps brand your website content. It was created in 1999 to help differentiate between bookmarked web pages.

      Currently, you can see favicons at the top of a browser tab above the address bar. Here, visitors will see a small branding icon:

      custom favicon example

      If a website doesn’t have a designated favicon, users will see a generic browser icon instead. Therefore, many website owners use favicons to make their content more recognizable.

      You might also see favicons in bookmarks, your browser history, or among Google search results. Often, this icon shows users they’re about to click on a credible and well-known resource.

      Great. You’re all caught up on favicons. Now, let’s show you how to make one.

      How to Create a Custom WordPress Favicon (4 Methods)

      To start creating your first favicon, you’ll need to design the image you’re going to use. For this process, we recommend using Canva:

      Canva

      Canva is a beginner-friendly image editing software that can create a logo from scratch. Alternatively, you can browse its logo templates.

      Whatever option you choose, make sure you design a square image. Favicons typically display at 16×16 pixels, but WordPress requires a height and width of at least 512px.

      After you’ve designed your logo as a favicon, it’s time to add it to your website! Here are some of the best methods.

      1. Add a Favicon Using the WordPress Customizer 

      Since WordPress 4.3, you can use the Site Icon feature to create a custom favicon. This is one of the simplest ways to upload a favicon since you won’t have to make a favicon.ico file or modify your template file.

      Find the image you want to use as your favicon. Then, go to Appearance > Customize in your WordPress dashboard:

      WordPress Customizer

      This will open the WordPress Customizer. Next, navigate to Settings > Site Identity:

      WordPress Site Identity

      Here, you’ll see a section labeled Site Icon. Click on Select site icon and upload your favicon image:

      Select image

      Crop the image as needed. On the right-hand side, you can see a preview of the favicon:

      crop image in WordPress

      After you’re finished, click on Publish.

      Skip the line and get tips right in your inbox

      Click below to sign up for more how-to’s and tutorials just like this one, delivered to your inbox.

      marketing tips

      2. Add a Favicon with a WordPress Page Builder

      Many popular page builders can add a custom favicon in a similar process. For instance, Elementor has a Custom Icons feature in its Global Settings.

      First, you’ll need to sign up for Elementor Pro. This enables you to upload a custom favicon.

      Then, open up any post or page with the Elementor editor:

      Elementor

      Go to Site Settings > Site Identity. Here, you’ll see your site name and description. There will also be options for uploading a site logo and site favicon:

      Elementor

      Hover over the gray box beneath Site Favicon and click on Choose Image. Upload your favicon and select Insert Media:

      select image in WordPress

      After uploading your favicon, go to the bottom of the screen and click on Update.

      3. Install a Favicon Plugin

      One of the easiest ways to add a favicon to your website is with a favicon plugin. This option might be best for people who can’t access the Customizer or want a simpler option than coding.

      For this process, we recommend using Favicon Rotator. This free WordPress plugin enables you to add a favicon image in minutes:

      Favicon Rotator Plugin

      Install and activate the plugin. Now navigate to Appearance > Favicon:

      WordPress Customizer Favicon settings

      You’ll notice two different options for creating custom icons. Browser Icon places the favicon in browser tabs. The Touch Icon will customize favicons for mobile devices:

      Favicon Rotator Settings

      Click on Add Icon next to Browser Icon. Upload your favicon image:

      WordPress media library file upload

      If you need to crop, rotate, or flip the image, click on Edit Image. Here you can change the dimensions and thumbnail settings as required:

      crop favicon image in WordPress

      When you’re finished, select Add Browser Icon. Then, click on Save Changes.

      4. Manually Generate a Favicon

      If your website has an older WordPress version or theme, you might need to manually add a favicon using code. This method can also be beneficial when you want to limit the number of third-party plugins on your site.

      First, upload your image file into a tool such as Real Favicon Generator. Using this software, you can generate your favicon’s custom coding:

      Real Favicon generator

      Start by clicking on Select your Favicon image. After uploading your image file, Real Favicon Generator will create a preview of your favicon:

      Favicon Generator results

      On this page, you can check the box that says Use the original image as is if you like the way it looks. However, you can also continue to edit the image size, background color, and background radius as needed.

      After you’ve customized the image, scroll to the bottom of the page and click on Generate your Favicons and HTML code:

      Favicon Generator options

      This will show you the code for your favicon. Download the Favicon package and copy the HTML:

      favicon code

      Before you start editing your code, we’d recommend backing up your website. This step ensures you don’t lose any important information due to coding mistakes.

      Next, open your cPanel dashboard. Although every hosting provider has its own dashboard, you’ll need to find the Upload Files button.

      With DreamHost, this button lies in the lower left-hand corner:

      DreamHost cPanel

      Then, upload your favicon file. In some cases, this will allow browsers to update your favicon without adding code. However, you may need to update your header.php file.

      To do this, open wp_content and click on the header.php file. Then, select Edit:

      edit header.php file in DreamHost cPanel

      Paste the favicon code from the Favicon Generator. Then, you may need to clear your browser’s cache or restart your browser to see the new favicon on your website.

      Elements of a Strong Brand

      A good logo can be the key to making your business unique and memorable. When you turn this logo into a favicon, you can ensure that online visitors recognize your branded content.

      To review, here are the best methods for adding a favicon to your WordPress website:

      1. Add a favicon using the WordPress Customizer.
      2. Use a page builder such as Elementor.
      3. Install a favicon plugin like Favicon Rotator.
      4. Manually code a favicon.

      Do you need a hand building your website from scratch? At DreamHost, we provide Pro Services that include custom web design. Our professional designers can help you create an original website, so you don’t have to worry about small details like favicons!

      DreamHost Makes Web Design Easy

      Our designers can create a gorgeous website from SCRATCH to perfectly match your brand and vision — all coded with WordPress so you can manage your content going forward.

      custom website design



      Source link