One place for hosting & domains

      Pages

      The Beginner’s Guide to WordPress 404 Error Pages


      The content you post on your website — whether part of a page or post — is usually permanent. However, if an issue arises (either technical or otherwise), an item of content may not display. Instead, it triggers a 404 error, which isn’t good news for your website or its users.

      In a nutshell, a 404 error signifies that a web page is not found. However, unlike other errors, they’re usually displayed on dedicated pages. With a customized and optimized 404 error page, you can get visitors back on the right track.

      What is a 404 Error?

      Airbnb 404 error page example

      As we discussed, a 404 error is a response code indicating that although a user was able to connect to a website’s server, the page can’t be found. This occurs for a number of reasons, such as:

      • A page or post has been moved or deleted.
      • The server is having trouble loading the page.
      • The URL that leads to the page is incorrect.
      • The post or page never existed in the first place.

      Naturally, a 404 error can significantly reduce your website’s traffic. As such, it’s crucial that you find and fix these errors on your website fast. First, however, let’s look at what 404 error pages are used for.

      An Introduction to 404 Error Pages

      A 404 error page alerts visitors to a missing page or incorrect URL. Many websites use the default page provided by their theme, but 404 error pages can also be customized to improve User Experience (UX).

      Most commonly, an error page will note the issue and provide alternative options for the user to choose from: for example, a Return to the Home Page link, related content, or a Search box.

      A good 404 error page should contain a few essential elements. These include a link or navigation menu, an on-brand apology or explanation, and a Search box.

      For example, Cloud Sigma opted for a quirky explanation and an easy-to-find Back to Homepage button. This helps to lessen the frustration while also enabling the user to return to the main site with minimal interruption:

      404 error page example

      Repair Pal presents another good example of a well-implemented 404 error page. They opted to stick with their default theme — keeping the navigation menu intact — while also providing users with a way to interact immediately with the page.

      For example, visitors can choose to Get an Estimate or Troubleshoot Your Car:

      404 error page example

      As you can see, creating a functional page is a useful way of mitigating the effects of a 404 error. It can also ensure that your website has an air of professionalism, despite an error being present.

      Get Content Delivered Straight to Your Inbox

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

      How to Find and Fix 404 Errors on Your WordPress Website

      While 404 errors are bound to happen on occasion, frequent occurrences can mean more serious problems are present. For example, there could be issues with your website’s server or with incorrectly set permalinks.

      Fortunately, it’s possible to find these errors within WordPress. What’s more, once the issues are resolved, you can apply what you’ve learned to avoid the problem occurring in the future.

      How to Create a 404 Errors Report in GA4

      Google Analytics is great for rooting out 404 errors. Within the dashboard, go to Explore and choose Blank:

      Google Analytics 4 404 error report

      Name your report “404 Report” and click on the + sign next to Dimensions:

      Google Analytics 4 404 error report

      Select Page title and Page path + query string from the available dimensions and click on Import. Next, click on the + sign next to Metrics to find and import Sessions:

      Google Analytics 4 404 error report

      You’ll now need to drag your Dimensions under Rows and Metrics under Values:

      Google Analytics 4 404 error report

      Next, drag Page title under Filter. Then, choose contains from the dropdown menu and type “Page not found” into the Enter expression box:

      Google Analytics 4 404 error report

      Hit Apply, and you’ll see a report of all the 404 errors on your website. Regardless of whether there’s a wider problem on your site, WordPress makes this easy to fix.

      How to Deal With 404 Errors On Your Website

      Even if you do your best to avoid them, 404 errors are bound to happen from time to time. However, there are ways to minimize their disruption. Let’s take a look at two now.

      1. Create a Dedicated 404 Error Page

      404 error page example

      WordPress is flexible enough to let you edit practically all of your 404 error page’s elements. To create a custom 404 error page for your site, you have two options — manually or using plugins.

      Many themes include a 404.php template file by default. If this is the case for your theme, you can locate the file yourself and edit the message that’s currently in place.

      Before you do that, however, it’s a good idea to create a child theme to work with. That way, you won’t be making permanent changes to the parent theme.

      After creating a child theme, go to Appearance > Editor within WordPress and open 404.php in the file list to the right of the editor:

      WordPress 404 error page template file

      From here, look for the <div class=”page content”> line, and simply edit the message to your own requirements (saving your changes once you’re done).

      Note that if you’re using a WordPress block theme, you can edit its 404 page by navigating to Appearance > Editor > Templates:

      WordPress template editor

      Simply click on 404, and you’ll be taken to an editing screen where you can build a custom 404 page using WordPress blocks and template parts:

      404 error page example

      If you don’t have a 404.php file in your current theme, you can create your own using the guidelines found in the WordPress Codex. However, you’ll need access to an FTP client such as FileZilla.

      Open FileZilla, and enter your website credentials to gain access to your file directory. Double-click your website’s root folder (sometimes called public_html), and navigate to wp-content > themes > [themename] > 404.php. We’re using Twenty Thirteen’s 404 template, but you’re welcome to browse to another theme with a similar template.

      Next, right-click the 404.php file and select View/Edit:

      edit 404.php file via FTP client

      The file will open in your text editor. Highlight the entire code within, and copy it. Now return to FileZilla and navigate back to the themes directory. Select your current website theme and right-click. Select Create new file from the drop-down, and name it “404.php”.

      Click OK, then right-click the new 404.php file. Select View/Edit from the drop-down and paste the code that you previously copied. Of course, you can edit the content to your own requirements. Once you save the file, you’re all set!

      create a 404 error php file

      Alternatively, you can use WordPress plugins such as 404page and Custom 404 Pro to achieve the same goal. Once installed, they enable you to replace your theme’s default 404 page or create one if your theme doesn’t have one included. These plugins will be ideal if you’re wary about tinkering with your WordPress core file structure.

      2. Set Up an Automatic Redirect to a More Useful Page

      No More 404 Errors WordPress plugin

      An alternative to a 404 error page is to just redirect the visitor. Simply put, a page redirect is a way to send traffic from one web page (such as a 404 error page) to another. This is a good choice for a number of reasons.

      For example, if you’ve changed the URL of an old page or post or deleted any old content, you can redirect visitors to the new page. The good news is that there are a plethora of redirect plugins available, including Redirection and Safe Redirect Manager.

      Set Up a 404 Error Page on Your WordPress Site Today

      404 errors require a quick and professional response in order to prevent your website’s traffic from being negatively affected. Fortunately, WordPress makes it easy to manage 404 errors and redirect visitors.

      Do More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Managed WordPress Hosting - DreamPress



      Source link

      A Beginner’s Guide to WordPress Pages


      As one of the building blocks of any website, pages are an integral part of WordPress. The platform enables you to quickly add static pages that can act as part of the site’s overall architecture. If you’re new to WordPress, however, you may be unsure how pages work.

      A WordPress page differs from a post in many ways. For instance, it can display any content you want, not just articles. Additionally, pages are designed for more permanent content, while posts are typically organized by dates and categories.

      An Introduction to WordPress Pages

      Every website requires at least one page to be visible to the public, but WordPress enables you to create as many pages as you need. Pages are distinct from posts in three main ways:

      • Pages are designed for static content. This means they’re for content that rarely changes over time, like About Us and Contact Us sections.
      • By default, pages do not allow comments. Pages are a place to share information rather than encourage social engagement.
      • You can use a page to hold and display posts. While you can display posts on a page, you can’t do the opposite.

      Understanding the difference between pages and posts in WordPress is just the beginning, of course. Let’s dive a little deeper and discuss how to manage pages.

      Get Content Delivered Straight to Your Inbox

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

      How to Manage WordPress Pages

      WordPress makes it easy to manage your web pages. Out of the box, the platform comes with all the tools you need to create, edit, organize, and remove any pages on your site. Let’s address these tasks one by one.

      Adding and Editing Pages in WordPress

      Your first step is learning how to create pages and edit them. To get started, go to your WordPress admin dashboard. From the left menu, select Pages and then click on Add New:

      add a new WordPress page

      From here, you can start creating your page. Just add whatever content you’d like by inserting blocks. For instance, you can type text into a paragraph block or add photos with an image block:

      create a new WordPress page

      You can even use the pre-designed Block Patterns to automatically create a new layout. Once you’ve made your changes, you can publish the page or save it as a draft to continue working on it later.

      Organizing Your WordPress Pages

      When you add a new page to WordPress, it becomes a part of your navigation. Depending on your default installation settings, WordPress will either arrange your pages by date published or in alphabetical order. If you want to change this, you will need to use a hierarchy to organize them.

      First, click on Pages within WordPress:

      view all WordPress pages

      Here, you will see a list of all of the pages you’ve created so far. Hover over any page you want and click on Quick Edit:

      quick edit a WordPress page

      Then, find the drop-down menu for Parent. If you want to make this page a subpage or child of one of your other pages, you can do that here.

      Otherwise, you can simply use the Order box to determine how your pages will appear in your website menu. If you leave the number at 0, for example, the selected page will be the first one in the hierarchy. If all pages are set at 0, they will be organized alphabetically.

      Once you click on Update, all your settings will be saved. You’ll want to do this for each page on your site. If you add new pages later, you can follow the same steps to organize them within your existing hierarchy.

      Removing a WordPress Page

      Deleting a page is a very straightforward process. To do this, go to the Pages screen of your dashboard. Hover over the page you want to delete, and you’ll see the word Trash in red lettering:

      edit existing WordPress pages

      Once you click on that button, the page will be moved to your trash bin. If you need to delete multiple pages, you can select the checkbox to the left of each one. Then, go to the Bulk Actions menu just above the list of pages, and select Move to Trash.

      Deleted pages can be restored by clicking on the Trash link above the page listing. Hover over the page you want and select Restore. If you’d like to remove the page for good, click on the red Delete Permanently link.

      Create Your First WordPress Page

      WordPress enables you to quickly add, edit, and organize pages on your website. These pages are primarily used for static content and can be organized hierarchically as part of your site’s overall architecture.

      To get started, you’ll need to add a new page and customize it with blocks. For example, you might add text, images, buttons, and more. When you’re ready, you can publish the page or save it as a draft.

      Do More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Managed WordPress Hosting - DreamPress



      Source link

      How To Generate Pages from Markdown in Gatsby


      The author selected the Internet Archive to receive a donation as part of the Write for DOnations program.

      Introduction

      One of the key features of the popular static site generator Gatsby is its flexibility in consuming content sources. Gatsby can generate static pages from almost any data source, such as a Content Management System (CMS), API, database, or even a local file system.

      Markdown files are a popular file-based source to use with Gatsby. Markdown is a markup language that is lightweight and designed for readability, which makes it ideal for documentation projects, blog posts, or any text-heavy websites.

      In this tutorial, you will create a Gatsby-powered static site that builds itself from local Markdown source files, using the gatsby-source-filesystem plugin to collect the files and the gatsby-transformer-remark plugin to convert them into HTML.

      Prerequisites

      Before starting, here are a few things you will need:

      • A local installation of Node.js for running Gatsby and building your site. The installation procedure varies by operating system, but DigitalOcean has guides for Ubuntu 20.04 and macOS, and you can always find the latest release on the official Node.js download page.
      • Some familiarity with JavaScript, for working in Gatsby. The JavaScript language is an expansive topic, but a good starting spot is our How to Code in JavaScript series.
      • Some familiarity with React and JSX, as well as HTML elements, if you want to customize the user interface (UI) of your posts beyond what is covered in this tutorial.
      • A new Gatsby project named markdown-tutorial, scaffolded from gatsby-starter-default. To build a new Gatsby project from scratch, you can refer to Step 1 of the How To Set Up Your First Gatsby Website tutorial.

      This tutorial was tested on Node.js v14.16.1, npm v6.14.12, Gatsby v3.10.2, gatsby-source-filesystem v3.10.0, and gatsby-transformer-remark v4.7.0.

      Step 1 — Standardizing Your Markdown Content

      Given Markdown’s flexibility as a markup language, documents written in Markdown can take on various forms and levels of complexity. Gatsby does not require you to format all your Markdown files in the same way, but to make your site and URLs easier to organize, you will first standardize how you write and store your Markdown files within this project.

      For this tutorial, you will add blog posts to your site, and each post will have a title, customized URL, publication date, and post body. You will start with a single post, Learning About Gatsby, where you can share your experience of learning about Gatsby with the world.

      In preparation for storing this and future posts, create a new directory under src, named blog. If you prefer to do this from the command line, you can do so with mkdir from the root directory of the project:

      Next, create an empty Markdown file within that new directory. For the purposes of this tutorial, filenames do not control the published URL or SEO, so the naming conventions here are just to keep things organized. Give your new post a filename of learning-about-gatsby.md.

      You can either do this in your IDE, or use the terminal with touch:

      • touch src/blog/learning-about-gatsby.md

      Finally, fill in the actual content of the post. Open the file in your editor of choice and add the following:

      markdown-tutorial/src/blog/learning-about-gatsby.md

      ---
      title: "Learning about Gatsby"
      slug: "/blog/learning-about-gatsby"
      date: "2021-08-01"
      ---
      
      ## What I'm Working On
      
      Right now, I'm working through a [DigitalOcean tutorial](https://www.digitalocean.com/community/tutorials) on using [Gatsby](https://www.gatsbyjs.com/) with Markdown.
      

      The top section enclosed by --- is called frontmatter and consists of key-value pairs. It is written in YAML, which is a configuration language outside of Markdown. Property keys go on the left, and your values go on the right. In your frontmatter block, you have defined values for your post’s title, the publication date, and the slug. The slug is the customized portion of the post’s URL that comes after your domain name (also known as the path).

      Any text below the frontmatter will become the post body. Within that area, you have a heading of What I'm Working On, with two hash symbols (##) at the beginning of the line. In Markdown, this indicates a level-2 heading, which Gatsby will convert into <h2></h2> in HTML. Within the text below that heading, you have some links that are written using Markdown syntax: [link_text](link_destination).

      Save your changes to learning-about-gatsby.md and then close the file.

      You have just created your first post using Markdown and saved it within your project’s source code. You have also standardized the format, including specific property values in the frontmatter of the blog posts. This keeps your source code organized and will be important for later steps. For now, the next step is to install and configure the plugins that are required for Gatsby to process this new Markdown post.

      Step 2 — Installing and Configuring the Required Plugins

      With your Markdown file in place, it is time to tell Gatsby where to find them and process them. In this step, you will install the plugins that are required to achieve this and update the Gatsby configuration to load them.

      Two plugins are required to process Markdown in Gatsby: gatsby-transformer-remark and gatsby-source-filesystem. gatsby-transformer-remark will parse your Markdown and convert your frontmatter into fields that Gatsby can query, and gatsby-source-filesystem will allow you to bring data from your local filesystem into your application.

      Install both at the same time by running the following command in your Gatsby project directory:

      • npm install gatsby-source-filesystem gatsby-transformer-remark

      After you install both plugins, open up the main Gatsby configuration file that lives in the root of your project folder: gatsby-config.js. By editing this file, you are telling Gatsby how to use the newly installed plugins to read your Markdown files and begin processing them. Add the following code to your config file:

      markdown-tutorial/gatsby-config.js

      module.exports = {
      ...
        plugins: [
          `gatsby-plugin-react-helmet`,
          `gatsby-plugin-image`,
          {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `images`,
              path: `${__dirname}/src/images`,
            },
          },
          {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `blog`,
              path: `${__dirname}/src/blog`,
            },
          },
          `gatsby-transformer-remark`,
          `gatsby-transformer-sharp`,
      ...
      

      The first block loads the gatsby-source-filesystem plugin and passes it an options object telling it to scan the src/blog directory for files and use the blog name as a label for the collection. The final line loads the gatsby-transformer-remark plugin with all default options, since you don’t need to customize them for this tutorial.

      You have now configured Gatsby to load the two plugins that are necessary for scanning in and parsing your Markdown files. In the next step, you will create a page template file for Gatsby to combine with your Markdown content and render as web pages.

      Step 3 — Creating a Page Template File

      Gatsby will now scan your Markdown files and process them with gatsby-transformer-remark, but it still needs instructions on how to display them in the browser. This step covers how to give it those instructions by adding a page template file (also known as a page template component).

      First, create an empty file in src/pages with a filename of {MarkdownRemark.frontmatter__slug}.js. The filename needs to exactly match this, because it uses a Gatsby API called the File System Route API, in which filenames dictate the routes (URLs) created on your site.

      Note: The File System Route API is a newer feature in Gatsby, and you might still see other Markdown page tutorials that involve the createPages API in gatsby-node.js instead. Although it is not deprecated, that API is no longer necessary for the use case covered by this tutorial. However, if you have a project that involves creating arbitrary pages that don’t mirror the file system or exceeds the capabilities of the File System Route API in some other way, you might still need to use the createPages approach.

      To create your component, add the following code to the file:

      markdown-tutorial/src/pages/{MarkdownRemark.frontmatter__slug}.js

      import { graphql } from "gatsby";
      import * as React from "react";
      import Layout from "../components/layout";
      import Seo from "../components/seo";
      
      export default function BlogPostTemplate({ data: { markdownRemark } }) {
        const { frontmatter, html } = markdownRemark;
        return (
          <Layout>
            <Seo title={frontmatter.title} />
            <h1>{frontmatter.title}</h1>
            <h2>{frontmatter.date}</h2>
            <div className="post-body" dangerouslySetInnerHTML={{ __html: html }} />
          </Layout>
        );
      }
      
      export const pageQuery = graphql`
        query ($id: String!) {
          markdownRemark(id: { eq: $id }) {
            html
            frontmatter {
              date(formatString: "MMMM DD, YYYY")
              title
            }
          }
        }
      `;
      

      This code has two main sections. The one at the end of the file is pageQuery, which uses the Gatsby GraphQL tag to evaluate the GraphQL query that follows it. The results of that query are passed to the BlogPostTemplate function and give you access to properties of the post fetched over GraphQL.

      The BlogPostTemplate function is a React component that returns JSX. Within the BlogPostTemplate you display the values of each post’s standardized frontmatter fields, the title and the date, in header elements. The actual body of the post you have placed into a <div> with a class of post-body, using React’s dangerouslySetInnerHTML property to directly echo out the HTML into the rendered result.

      Finally, using export default before declaring the BlogPostTemplate function is necessary in your code, because Gatsby will expect the default export of each page template file to be the React component responsible for producing the final rendered page.

      Now that you have added the template code to the file, save the changes and close it.

      In completing this step, you added a brand new page template file to your Gatsby project. With a filename that uses the File System Route API, it dynamically creates routes and pages based on GraphQL results and your Markdown source files. This was the final step to get Gatsby to generate pages from Markdown. In the next step, you will see these pages in action, as well as add new ones.

      With all the code now in place to turn your Markdown blog posts into web pages, you can now preview your work and add more Markdown content to your site.

      To preview your new blog posts and all the work you have done so far, run this command in your project directory:

      Once Gatsby is ready, it will prompt you to open your project in your web browser, which you can do by navigating to localhost:8000. However, this will first only show you the homepage of your Gatsby application instead of the blog post. To see your new Markdown blog post, navigate to localhost:8000/blog/learning-about-gatsby/. You will find your Markdown file rendered as HTML:

      Blog post titled

      From now on, you can continue to add new blog posts by creating Markdown files in the src/blog directory. Each time you create a new post, remember to follow the conventions you set up for your frontmatter. This means making sure to start the slug value with /blog/ followed by the custom path you want, as well as providing the post with a title and date.

      To test this out, copy your learning-about-gatsby.md Markdown file to be the base of a new post named continuing-learning.md:

      • cp src/blog/learning-about-gatsby.md src/blog/continuing-learning.md

      Next, open the new file and make the following highlighted changes to the content:

      markdown-tutorial/src/blog/continuing-learning.md

      --- 
      title: "Continuing to Learn"
      slug: "/blog/continuing-learning"
      date: "2021-08-01" 
      --- 
      
      ## Update
      
      I'm continuing to learn Gatsby to build some fast static sites!
      

      In this file, you kept the formatting the same but changed the title and slug of the frontmatter and the content of the blog post. Save the file then exit from it.

      Once your server has rebuilt your Gatsby site, navigate to http://localhost:8000/blog/continuing-learning in your browser. You will find the new post rendered at this URL:

      Blog post titled

      Note: If you wanted to add Markdown pages outside of blog, you could do so by modifying the slug to whatever path you would like. If you do this, make sure to use folders to keep your files organized.

      You now have new pages generated from Markdown in Gatsby and have previewed the results.

      Conclusion

      By following the steps in this tutorial, you added Markdown content to your Gatsby project, configured Gatsby to find the files and process them, and created template code to render each post as a new page. Although some of these steps could be omitted by using a Markdown-specific Gatsby Starter template, going through the process manually allows you to customize your Markdown-powered Gatsby site exactly how you want it.

      Although you can link to any new post or page using the Gatsby Link component, if your site has a large amount of Markdown files that are rapidly changing you might want to explore adding a dynamic listing as a next step, so visitors to your site can quickly find all your most recent posts and navigate to each one. To do so, you could use a Gatsby GraphQL tag to query the Markdown posts you want to list, and then iterate over them and display them as links. You can read more about this in this Adding a List of Markdown Blog Posts tutorial.

      If you would like to read more on Gatsby, check out the rest of the How To Create Static Web Sites with Gatsby.js series.



      Source link