News and blog posts
Jump to a component:
Archive pages
PCC News and various site blogs have archive pages that show a feed of all posts that meet certain criteria (all, by category, by date, by search term, etc.).
When users use the “Search PCC News” or “Search: Blog Name” form, the results show in the same format as an archive page with the search term highlighted in yellow. A second search form displays above the results, and provides the option to sort by relevance or date posted.
Styling
The feeds look like default features galleries but also include “posted” date for each post. There’s a simple back/next pagination below the feeds to navigate through the lists of posts. The back and next links have a large gray pawprint behind them.
The sidebar looks like a regular sidebar navigation, but is split into multiple sections:
- News: “What’s hot?”, archives, and search
- Blogs: archives, categories, and search
Responsive behavior for Archive pages
Same as default features galleries and sidebar pages.
How to use for Archive pages
Archive pages are automatically created by WordPress when a site’s first post is published. Learn about creating posts.
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Archive pages
Stylesheet location:
/_source/styles/components/_blogs.scss
You should never need to write HTML for post archives.
Example of Archive pages
Numbered components
- global header, global navigation
- site title
- breadcrumbs
- list of stories (similar to a default features gallery)
- back/next pagination (simpler than other pagination types)
- sidebar navigation – popular stories
- sidebar navigation – archives by month
- search form
- footer
Other
- typography
- any type of media
- any other component
News archive
Blog archive
Same as a news archive, but with the blog sidebar (see the blog post example below for details).
Search results
Stories and posts
PCC News stories and site blog posts resemble regular content pages that have a sidebar, but they have a bunch of different components that get added automatically around the posts’ content.
Styling
In addition to a title and content, posts have a byline (who published the post), social sharing links, and an about the author blurb. If comments for the post are turned on, they appear below the social links. If the post is more than a year old, an info callout across the top of the post warns readers the post is old and may have out-of-date information. The sidebar is the same as on archive pages.
Responsive behavior for Stories and posts
Same as default features galleries and sidebar pages.
How to use for Stories and posts
Everything outside the post content area is automatically generated by WordPress when the post is published. Learn about creating posts. Posts can use any of the media or components available on the rest of the website.
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Stories and posts
Stylesheet location:
/_source/styles/components/_blogs.scss
See the various component pages for details (editing the HTML shouldn’t be necessary).
Example of Stories and posts
Numbered components
News story
- global header, global navigation
- site title
- breadcrumbs
- story title
- byline
- story content
- photo with caption – see sizing and alignment
- quote (optional but common, callouts with buttons are also common)
- social media buttons
- about the author
- related stories (optional)
- sidebar navigation – popular stories
- sidebar navigation – archives by month
- search form
- footer
Blog post
- global header, global navigation
- site title
- breadcrumbs
- “old post” info callout
- post title
- byline
- post content
- social media buttons
- about the author
- comments (optional)
- sidebar navigation – archives by month
- sidebar navigation – categories
- search form
- footer
Other
- typography
- any type of media
- any other component
News story
Blog post
