How Do I Wagtail?

How Do I Wagtail?

Blog Posts

Last Updated: Nov 30, 2023

For more help on writing a blog post, reference How to Blog on the Mozilla Blog for content guidelines!


Create new blog post

Update your blog post

Add new author profile

Add a CTA block (New!)

Add a newsletter signup block (New!)


Create a new blog post

  1. Start at the homepage
  2. Click “Pages” on the left panel.
  3. Select “Blog”.
  4. Then click the “...” next to Blog and click “+ Add Child Page”. This will take you to the “New blog page”

From here, fill in the areas.

  1. Add title
  2. Add an Author (reference below if you need to add an author)
  3. Check off relevant topics
  4. How to add to the BODY:
    1. For text-only entries, select “Paragraph
    2. Use the “+” button to add new sections and build out your blog post.
      1. Eg: Paragraph + image + paragraph
    3. You can move paragraph blocks, image blocks, etc. using the arrows in the top right of the box
  5. Images
    1. Add a Hero image and any supporting images
    2. You can upload an image or search the CMS for an image in the database
    3. After choosing your image, add alt text. Caption and caption URL are optional.
  6. Once you are done creating the blog post, save draft and preview your post
  7. Share the preview link if needed for approvals.
  8. Head over to the PROMOTE tab. (This info shows up on search engines and whenever we share a link online and will affects the SEO of the article)
    1. Check to make sure the URL looks okay under “Slug
    2. Give the page a title
    3. Add meta description
    4. Add an OG image
    5. Add tags (Optional, internal use)
  9. Remember to add some related blog posts!
  10. (Optional) If you want to schedule a post, on the top right click the “i” icon labeled Status. Click “Set Schedule” and then into “Go live date/time” and choose when the post will go live. Then “Save schedule” to confirm it
  11. NOW DOUBLE CHECK EVERYTHING! Look at the article’s preview to make sure everything is a-ok.

Final Step: Publish!

  1. When approved, hover over the arrow beside “Save draft” and select “Publish”.
Star Icon

Tip: Click the phone icon on the top right labeled “Preview” to be able to preview the post while you're editing. Click the arrow icon to preview the whole page.


How to update a blog post

  1. Go into the "Settings" tab and change the "Publication date"
  2. Add a note at the top and note at the bottom saying this blog post has been updated and the date.
  3. Then "Save draft" and "Publish" like usual!


How to add new author

If Author currently does not exist in the menu, add an author by going to the Left panel > select “Snippets” > “Profiles” > “Add profile” in top right corner > add their name, image, and a short bio under "Introduction" > “Save” (if you don't see this option then ping in #mofo-websites)

CMS UI of a profile

Make your profile visible on your blog post

Check the “Feature Author Details Section” box towards the bottom of the page to show your bio in the blog post itself. This feature requires you to have something written in the “Introduction” field and will not show up without it.

Author Profile
CMS - Feature Author


Add a CTA block

A CTA block can be used if you want to highlight important information or add tangential information. You can choose between a full-width or a left or right-aligned callout box.

For a left or right-aligned block:

  1. Add “CTA block with text” to your post
  2. Choose whether you want the callout box to sit left or right
  3. Add text for your callout box under “Body” and add your title if you have one. If you want a smaller title, add it to the body instead and change the styling to H4 or H5. As always, highlight the text to change the styling or add a hyperlink.
  4. Choose between what style you want:
    1. Filled: Use for additional information
    2. Outline: Use for secondary callouts
    3. Pop: Use for most important callouts
Filled

Filled Style

Outline

Outline Style

Pop

Pop Style

5. Add in text that continues the content of the post under “Paragraph”. Make sure it isn’t shorter than the callout text!

6. Add image or button link if needed

7. Make sure to preview what it looks like in context before you publish!

CTA CMS

CMS View

with image and button

w/ Image and Button

For a full-width block:

  1. Add "CTA card" to your post
  2. Choose between what style you want:
    1. Filled: Use for additional or supplementing information
    2. Outline: Use for secondary callouts
    3. Pop: Use for most important callouts
  3. Fill in text under “Body”
  4. Add optional image or button link
  5. Review what it looks like in context before you publish!
Filled

Filled Style

Outline

Outline Style

Pop

Pop Style

CTA Full CMS

CMS View

CTA block

w/ Image and Button


Add a newsletter signup block

  1. When you get to your blog post, click the + button to add a new “Newsletter Signup” block anywhere in your blog post, preferably in the middle or not too close to another signup box or call to action. (Max one per post)
  2. Select which blog signup you want to use
  3. Remember to review before publishing!
  4. You can always swap to another signup but if you need any text changes or want to create a new snippet, please reach out in the #mofo-websites channel or to someone on the tech platforms team.
Screenshot of CMS
Screenshot of CMS
Screenshot of newsletter block

To create a new blog signup (Restricted to tech platforms team):

  1. Go to the Snippets page, click Blog Signups and click “Add Blog Signup” on the upper right.
  2. Fill in a Name that would let you easily identify the signup
  3. Fill in what Newsletter you want the signups to go to
  4. Add the text you want to display under “Description”. We recommend not to use the Header field but write everything under “Description” with the following the format: “This is your title // This is your text for the newsletter”
  5. Click save and it should show up in the list of signups you can add.
Star icon

Feel free to ask any questions in the #mofo-websites channel!