Opened 6 years ago

Last modified 17 months ago

#3774 assigned enhancement

Create a Blog Page on

Reported by: chanthaboune's profile chanthaboune Owned by: ryelle's profile ryelle
Milestone: Priority: normal
Component: General Keywords: has-patch


The Consumer Growth Council has completed work on the Create a Blog page except for final content review. Can we get the pages + content staged so we can start the final review processes?


Attachments (6)

Screen_Shot_on_2018-08-15_at_15_21_50.png (157.8 KB) - added by obenland 6 years ago.
Screen Shot on 2018-08-29 at 13_13_02.png (114.0 KB) - added by cathibosco1 6 years ago.
Latest version as of Aug 29, 2018
Screen Shot on 2018-09-21 at 11_02_45.png (135.2 KB) - added by cathibosco1 6 years ago.
screenshot of prototype - final version (26.9 KB) - added by cathibosco1 6 years ago.
numeric icons - -svg's - could be further optimized I think
how-to-make-a-blog (1).sketch (901.3 KB) - added by cathibosco1 6 years ago.
Sketch File of How to Make a Blog Guides section…
3774-meta.diff (38.7 KB) - added by ryelle 6 years ago.

Download all attachments as: .zip

Change History (20)

#1 @obenland
6 years ago

Is there a public version of the prototype? Or do I need to create an account to see it?

This ticket was mentioned in Slack in #meta by obenland. View the logs.

6 years ago

#3 in reply to: ↑ 2 @obenland
6 years ago

Screen_Shot_on_2018-08-15_at_15_21_50.png is the best mockup I could find in the trello link that was shared in 2.

As I mentioned in Slack, the mockups seem to deviate pretty significantly from the existing design, is that on purpose?

For the site headers I'd welcome it if we could not start prepending dashicons, and continue with the bigger header for the parent page (see Get), and narrow header for child pages (see Source).

Rather than a bordered box, could we pick up the use of a parallelogram again here, something along the lines of the Hosting section on Get? That could also free us from having to include a graphic there. If you do want to use a graphic, we should probably avoid using the marketshare number in that—I'm afraid it'd be outdated in a couple of months.

For the three box'ed subnavigation, could we again pick up existing concepts rather than introducing a new one? Both the host blurbs on Get and the Technology/Details/People trifecta on the About page come to mind for me. I'd also vote for no dashicons here.

Could the heading with a blue background be just a regular heading? We don't have that anywhere else and it doesn't seem to take away much if it was.

I'm not sure how I feel about the six stars, are they supposed to be a reference to the six steps to start a blog? They feel a little disconnected there. Do they have a functionality that I'm missing?

The big footer graphics on the child pages, are they supposed to "stand" on the footer? I like that idea, definitely worth trying out!

#4 @obenland
6 years ago

In 7626:

Main: Add first Guide page templates with content

See #3774.

#5 @obenland
6 years ago

Based on the Google Doc linked in the ticket description I made the content available at

With a setup like this, where they are child pages of a Guides page, I think we can best take advantage of the page header setup on
It might be worth making (currently blank) a landing page, linking to the various guides that are going to be put up there.

#6 @cathibosco1
6 years ago

This feedback is very helpful - I am implementing the suggestions in the mock up. Thank you

6 years ago

Latest version as of Aug 29, 2018

#8 @cathibosco1
6 years ago

STATUS UPDATE! - We have had major breakthroughs with the presentation of this content - I was able to work with @melchoyce and Josepha at WCNYC - I will be posting the Sketch files in Trello here on the ticket so we can ship it! I am so excited to wrap this one up and get it into the Guides for the people! Yay!!

I have some .svg's for the numeric assets.

The hover states for the main page are an art board in sketch as well.

Eventually we may be able to add a graphic that features a grid of lovely screenshots of awesome websites using WordPress for their blogs too.

Link to the prototype:

Link to the copy


This looks like a copy/paste job to publish... feedback is always welcome.
The SVG's will need to be optimized likely. I think Kelly has a solid understanding of our workflow thus far...

6 years ago

screenshot of prototype - final version

6 years ago

numeric icons - -svg's - could be further optimized I think

6 years ago

Sketch File of How to Make a Blog Guides section...

#9 @melchoyce
6 years ago

@cathibosco1 Thank you for all of your tremendous work on this. It was amazing getting to talk with you in person on it at WordCamp NYC!!

Cathi, @chanthaboune, @ryelle, and I talked about this during the WordCamp NYC Contributor Day, and @ryelle is interested in building out this section.

#10 @chanthaboune
6 years ago

  • Owner set to ryelle
  • Status changed from new to assigned

6 years ago

#11 @ryelle
6 years ago

  • Keywords has-patch added

I've uploaded a patch for wporg-main to create the new design & update the copy on the existing pages. The page structure from a UI perspective is that "Create a Blog" is the first page, and "Adding a Blog", "Moving a Blog", and "First Time" are children of that. The First Time page wasn't created, so I couldn't update that, but it should be a matter of following the other child pages.

You can see full screenshots of these pages here:

This ticket was mentioned in Slack in #meta by netweb. View the logs.

6 years ago

#14 @ben.greeley
17 months ago

It looks like this ticket hasn't had activity for four years. Is it still relevant? Given the newer resources on, such as, I wonder if this content could/should be a tutorial as part of that website rather than a main landing page. It seems like it would fit the site structure a bit better if it were located there. Just a suggestion, but it would be good to know if this page would still be needed, as the work that was done will likely need to be redone to some extent with the redesign.

Note: See TracTickets for help on using tickets.