Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tutorial - How to add a blog or news page to a WordPress website #1506

Closed
15 of 17 tasks
wparasae opened this issue Apr 20, 2023 · 3 comments
Closed
15 of 17 tasks

Tutorial - How to add a blog or news page to a WordPress website #1506

wparasae opened this issue Apr 20, 2023 · 3 comments
Assignees

Comments

@wparasae
Copy link
Collaborator

wparasae commented Apr 20, 2023

Topic Description

There is a simple way to add a blog post to any theme--classic or block! You can also add a blog page with templates. This tutorial will cover both and is being written in conjunction with the related online workshop:

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

Guidelines

Review the team guidelines

Tutorial Development Checklist

  • Vetted by instructional designers for content idea
  • Provide feedback of the idea
  • Gather links to Support and Developer Docs
  • Review any related material on Learn
  • Define several SEO keywords to use in the article and where they should be prominently used
  • Description and Objectives finalized
  • Tutorial created and announced to the team for Q/A review
  • Tutorial reviewed and ready to publish
  • Tutorial submitted and published to WPTV
  • Tutorial published on WPTV
  • Tutorial captioned
  • Tutorial created on Learn.WordPress.org
  • Tutorial post reviewed for grammar, spelling, etc.
  • Tutorial published on Learn.WordPress.org
  • Tutorial announced to Marketing Team for promotion
@wparasae wparasae added [Content Type] Tutorial Awaiting Triage Issues awaiting triage. See Training Team handbook for how to triage issues. labels Apr 20, 2023
@wparasae wparasae self-assigned this Apr 20, 2023
@wparasae wparasae added [Audience] Users and removed Awaiting Triage Issues awaiting triage. See Training Team handbook for how to triage issues. labels Apr 20, 2023
@wparasae
Copy link
Collaborator Author

wparasae commented Apr 26, 2023

Script Rough Draft: (Ending is pretty rough -- I might just use option #1 for this whole tutorial, because the more I think about using templates for this effect, the more I realize how complicated that can be!)

Adding a blog or news page to your WordPress website comes with many advantages: it strengthens your brand, draws visitors to your website, and is great for search engine optimization if you consistently write new posts. Whether you are using a block theme or a classic theme, you can add a blog or news page to your website. Let's learn!

There are multiple ways to accomplish this task -- let's learn a few!

Option #1 for Classic and Block Themes:
Creating a Posts Page

The most straight forward way that works in both classic and block themes is to first head to your WordPress dashboard, select "Pages", and then "Add New". Title this page something like "blog" or "news" if you want to add shorter updates. From here, use your inserter to search for a "Query Loop" block. You can choose to start blank, but there are also a variety of patterns you can pick from.

Whether you prefer a standard blog setup or a grid layout, you have many options to choose from! Select whichever pattern resonates with you the most. From here, you can add or adjust a variety of theme blocks, such as how your post featured images will appear, whether or not to include a date, title, author, or excerpt. Before you save, there is one more setting you need to select! Using your inserter, select the Query Loop, then access your settings. Disable "Inherit query from template", then save. This will allow your Query Loop to function entirely independently on both classic and block themes. To learn more about advanced functions of Query Loops, please see the tutorial "Taking Advantage of Query Loops".

A Note: If you don't have any blog posts written to start, it may be hard to see what your options are. Consider using a plugin to generate dummy content that you can easily remove, or adding a few temporary blog posts to your website so you can see what your blog posts page will look like. For example, here I have used the FakerPress plugin to generate fake blog posts, which allows me to better see what this looks like.

Other ways to add themes:
Some themes--both block and classic--are appealing because they include blog posts and pages that have been pre-designed and include extra features and functionality. This is especially true with classic themes. To take advantage of some classic themes blog page designs, you'll also need to create a Home Page. I'll do that now.

Here, I've switched to the classic theme CLASSIC THEME NAME HERE.

Some classic themes come with pre-built blog layouts that you may want to utilize. These are not customizable the same way as block themes, but some designers have made some pretty cool layouts! In order to set a blog page on a classic theme, you'll want to create two pages: a home page and a posts page. Afterward, head to Settings > Reading. Select your home page that you just created, and select the posts page. Now, future blog posts you write will appear on your posts page.

A note about Block Themes: Did you know? You can set a blog or posts page using TEMPLATES as well. Once you have set your home page and your posts page, it's time to head to your templates and template parts. Your posts pages usually are set to display either as your index.html template or your X OTHER TEMPLATE (Sarah, google this) -- for example, in the 2023 theme, you can see that the posts page is in X TEMPLATE LOOK IT UP. Meanwhile, your FRONT PAGE (double check this) template is usually what displays your home page, though some themes may display them differently. You might need to explore your theme's templates before you can begin working with this. Now, repeat the same process you used on this template that you saw in the beginning; find a query loop, modify the page to your liking, and voila! You have added a blog page to your website. If you're brand new to WordPress, consider watching the tutorial about using templates to get a strong sense of how these work and what you can do with them. (What is the URL where people can find this? Maybe omit this.. we will see how we can do this.)

A note about Classic Themes:
Some classic themes offer different options than others, so head to Appearance > Customize in order to see options to make changes to how your posts and/or home page appear to readers.

There's a lot you can do with query loops! Please see the tutorial "taking advantage of query loops" to learn more advanced features you might be interested in utilizing with your blog or news page.

@wparasae
Copy link
Collaborator Author

wparasae commented May 4, 2023

Revised to keep it as simple as possible:

Adding a blog or news page to your WordPress website comes with many advantages: it strengthens your brand, draws visitors to your website, and is great for search engine optimization if you consistently write new posts. Whether you are using a block theme or a classic theme, you can add a blog or news page to your website with the same technique. Let's learn!

While there are multiple ways to accomplish this task -- let's learn the most basic one.

Creating a Posts Page

The most straight forward way to create a blog or news page that works in both classic and block themes is to first head to your WordPress dashboard, select "Pages", and then select "Add New". Title this page something like "blog", or use a title like "news" if you only want to writer shorter updates. From here, use your inserter to search for a "Query Loop" block. You can choose to start blank, but there are also a variety of patterns you can pick from.

A Note: If you don't have any blog posts written to start, it may be hard to see what your options are. Consider using a plugin to generate demo content that you can easily remove later, or by adding a few temporary blog posts to your website under the "posts" section. This will allow you to see what your blog posts page will look like. For example, here I have used the FakerPress plugin to generate fake blog posts, which allows me to better pick and adapt this query loop block.

You have many options to choose from! Select whichever pattern resonates with you the most.

From here, you can add or adjust a variety of theme blocks, such as how your post featured images will appear, whether or not to include a date, title, author, or excerpt. There's a lot you can do with Query Loop blocks -- to learn more advanced, please see the tutorial "Taking Advantage of Query Loops".

Before you save this page, there is one more setting you need to select! Using your inserter, select the Query Loop, then access your settings on the right. Disable the setting, "Inherit query from template", and then save. This will allow your Query Loop to function entirely independently on both classic and block themes. My theme automatically added this page to my menu, though you may need to add it depending on your theme's settings.

Now, any future post I write will appear on this posts page.

While there are multiple advanced ways to do this, this is the simplest that will work on both classic and block themes. To learn more about publishing and blog posts, please visit the publishing support guide

@wparasae
Copy link
Collaborator Author

Feedback collected and acted upon here: #1504

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: 📜 Published or Closed
Development

No branches or pull requests

2 participants