DEV3 Gazette: a magazine and news WordPress theme with live blogs, dark mode and a 3D globe

Requirements

• WordPress 6.0 or newer and PHP 7.4 or newer
• The DEV3 Theme Toolkit plugin (included and required)
• Recommended: Elementor (free) and WooCommerce (subscriptions and the shop). Elementor Pro is supported but not required. Contact Form 7 or WPForms are optional if you prefer them for forms.

What's in the download

Unzip the download from your DEV3 account first. Do not upload the download itself to WordPress.

• dev3-gazette.zip: the theme. Install this one.
• dev3-gazette-child.zip: an optional child theme for your own CSS and PHP.
• dev3-theme-toolkit.zip: the companion plugin (news widgets for Elementor and blocks, view counter, reading bar, structured data, motion controls, WooCommerce extras, demo importer).
• dev3-gazette-demo-content.zip: the demo package for reference. The importer already has a copy inside the theme.
• Documentation/index.html: the full guide. Open it in a browser.

Install the theme

1. Go to Appearance → Themes → Add New → Upload Theme, choose dev3-gazette.zip, click Install Now, then Activate.
2. The theme shows a notice until the DEV3 Theme Toolkit is active. Go to Plugins → Add New → Upload Plugin, choose dev3-theme-toolkit.zip and activate it.
3. Install and activate Elementor and WooCommerce from the notice.
4. Go to Settings → Permalinks and choose Post name.
5. Optional: if you plan to change code, upload dev3-gazette-child.zip the same way and activate DEV3 Gazette Child. The parent theme must stay installed.

Import the demo

1. Make sure you are logged in as an administrator. Elementor keeps every widget setting only when an administrator runs the import.
2. Go to Appearance → DEV3 Demo and click Import.
3. The import adds:
   • The Gazette Daily, a fictional newspaper: 38 stories across nine sections, 11 authors with bylines and bios, and reader comments
   • a live blog, three video explainers and three podcast episodes
   • the front page, About & masthead, Contact & tips, Subscribe, Newsletters and Advertise pages, menus, footer widgets and seven WooCommerce products
4. Story dates are set relative to the import time, so the front page always looks current.

Imported items are tagged, so Reset on the same screen removes only them. With WP-CLI you can run wp dev3tk demo import --user=admin.

After the import

• Replace the demo stories, authors, illustrations, videos and audio with your own. The newspaper, its staff, places and companies are fictional.
• Set up your real payment methods in WooCommerce → Settings → Payments before selling subscriptions.
• Add your logo under Appearance → Customize → Site Identity and your edition line under Customizer → Gazette: masthead & articles.

Updates

Download the new version from your DEV3 account and upload dev3-gazette.zip again. WordPress offers to replace the installed version. Changes you made in the child theme, the Customizer and your pages are kept.

Run the front page

1. Open the front page with Edit with Elementor. Every block is a widget.
2. Lead mosaic (Post Hero Grid → Mosaic, source "Sticky posts"): tick Stick to the top of the blog on the five stories you want at the top.
3. Most read (Post List → Numbered, source "Most read") is ranked by the built-in view counter.
4. Section blocks pair Gazette · Section Header with a Post Hero Grid in split, trio, grid or lead layout. Turn on Skip posts already shown above to avoid repeats.
5. The live banner is an HTML widget: link it to your live blog or delete it.
6. Without a static front page (Settings → Reading → Your latest posts), the theme builds one automatically: a lead mosaic beside most read, then one block per section.

Write an article

• The excerpt is the standfirst under the headline. The custom field dev3gz_label adds a label such as Analysis, Explainer, Review or Opinion.
• The drop cap is automatic on the first paragraph. The featured image caption comes from the image's caption; add dev3gz_credit on the attachment for a credit line.
• Stories with three or more H2 headings get a numbered contents list in the left rail (force it with dev3gz_toc set to 1 or 0).
• Block styles: Quote → Pull quote or Margin quote; Paragraph → Standfirst or Editor's note; Group → Fact box, Key points or Ink panel; List → Big numbers.
• An ad slot and a newsletter card are inserted after paragraphs 4 and 9 of longer stories. Change or turn them off (0) in Customizer → Gazette.

Run a live blog

1. Create a post and set Post → Template to Live blog.
2. Insert the Live blog starter pattern, then add a Live update pattern for each update, newest first: a time paragraph (for example 14:05), an H3 headline and text.
3. Add the class is-key to an update to include it in Key updates.
4. The theme adds anchors, "min ago" stamps, the key-updates filter, the latest-updates rail and LiveBlogPosting structured data.

Sections, authors, video and podcasts

• Sections are categories. Add a description and a Section image under Posts → Categories → Edit. Tags use the same layout as topics.
• Authors: Users → Profile → Gazette byline holds the role, beat, X, LinkedIn and Instagram links and a photo (Media Library ID). Without a photo the theme draws a monogram.
• Video and podcasts: use the Video and Audio post formats. Put a Video block at the top of a video story, or the toolkit Audio Player block with your MP3 for a podcast. The featured image becomes the poster.

Masthead, ticker and dark mode

• The nameplate uses your logo or the site title. Set the edition line, volume label and motto in Customizer → Gazette: masthead & articles.
• The breaking ticker shows the latest stories or only those with given tags (for example breaking), on every page, the front page only, or off.
• Dark mode: choose light, dark or the reader's system setting as the default, and show or hide the switch. Readers' choices are remembered in their browser.

Subscriptions, newsletters and ads

• The Subscribe page uses the Pricing widget with a billing toggle; its buttons link to ?add-to-cart=ID for each WooCommerce product. For automatic renewals, install a subscriptions extension.
• Newsletter Signup: card, inline or banner; store signups on the site, post to Mailchimp or Brevo, or use a form shortcode.
• Ad Slot: IAB sizes, a placeholder, an image and link, or an ad-plugin shortcode, with per-device visibility.

Change the 3D globe

1. Choose where it shows in Customizer → Gazette → 3D globe badge (front page, every page or off).
2. To place it elsewhere, add the 3D Scene widget with the preset Gazette · newsprint globe badge in Accent object mode.
3. Set the accent, ink and paper colours, pins, ring, "turn to a bureau", spin and scroll turn. Changes show live in the editor.
4. Customizer → 3D quality → Off shows a still image instead.

Motion and styling

• Select any widget or container and open Advanced → DEV3 Motion for reveals, stagger, split headings and more.
• Appearance → Customize: colour mode, ticker, globe, share, related stories, read counts, local avatars, colours, fonts, motion, shop and footer notes.
• Without Elementor, insert patterns from Patterns → DEV3 Gazette (23 of them); every DEV3 widget has a block twin.