PromptPress

 

Theme Overview

PromptPress is a clean, accessible WordPress theme for publishing and managing AI prompts. It pairs with the AI Prompt Manager plugin, which adds the prompt library itself, and styles every part of it: prompt cards, the search & filter bar, the prompt page, widgets and the command palette.

1. Light and dark mode with a visitor switcher in the header,
2. 13 color tokens per scheme, Google Fonts typography, four header layouts,
3. a two-column prompt “record view” with a properties sidebar and related prompts,
4. Elementor support (with the bundled Crafted Addons widgets), WooCommerce support,
5. menu icons and badges, five footer widget areas, Schema.org structured data,
6. accessible markup (WCAG 2.2 AA default colors), no jQuery on the front end, inline SVG icons.

Theme Installation

Installation via WP Dashboard:

1. Unzip/extract the main (downloaded) theme package – to get promptpress.zip file,
2. Go to Appearance > Themes,
3. click on “Add New Theme” > and “Upload Theme”,
4. click on ‘Browse’ button, find promptpress.zip file on your computer and press 'Install Now',
5. Activate theme,
6. Go to Appearance > Install Plugins after theme activation and install and activate the required plugins!
7. Refresh page and 'PromptPress - admin panel' button will appear;
8. Go to PromptPress - admin panel (theme options) and setup theme.

Installation via FTP:

1. Unzip/extract the main (downloaded) theme package / twice / to get theme folder ‘promptpress’,
2. Using FTP client (e.g. FileZilla) upload 'promptpress' folder into 'themes' folder in your WordPress installation ( YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/ ),
3. Go to Appearance > Themes, find PromptPress theme and activate theme,
4. Go to Appearance > Install Plugins after theme activation and install and activate the required plugins!
5. Refresh page and 'PromptPress - admin panel' button will appear;
6. Go to PromptPress - admin panel (theme options) and setup theme.

 

Required Plugins

The following message may be visible after theme activation:

Go to Appearance » Install Plugins and install and activate following plugins:

1. Redux Framework: powers the theme options panel. Without it the theme works with its default settings.
2. Elementor: You can skip the entire setup process after activation, there’s no need to sign up or log in.
3. Crafted Addons (bundled with the theme): Elementor blog widgets, a featured posts widget and post options. No setup needed.
4. AI Prompt Manager: the prompt library, no setup needed.

Recommended: Lightbox for Gallery & Image Block, Classic Widgets, Contact Form 7 and One Click Demo Import.

Default Setup

1. After theme activation go to Appearance > Install Plugins, and install and activate the required plugins! Then install AI Prompt Manager (see previous chapter).

2. Then go to PromptPress - admin panel

and hit "Save Changes" button to set default style settings:

You can change styling options later.

3. If yoursite.com/prompts/ shows a 404 error, go to Settings » Permalinks and just hit Save Changes.

4. IMPORTANT! It is possible that after theme activation are images wrongly cropped and look ugly! In this case use the following plugin: https://wordpress.org/plugins/regenerate-thumbnails/ to regenerate old thumbnails (from the previous theme).
After plugin installation, start regeneration in Tools > Regenerate Thumbnails. This process can take a while and you cannot close the tab/window until regeneration is done.

Demo Import

One Click Demo Import

1. Install and activate 'One Click Demo Import' plugin.
2. Go to Appearance > Import Demo Data and hit the 'Import' button of the 'Default Demo'.
3. Install the recommended plugins (if you want to import/use them) and hit 'Continue & Import'. Wait until the import is done (it can take few moments).

The import loads the demo content (pages, posts, prompts, menus), the widgets and the theme options. After the import it automatically:

1. assigns the “Main menu”, “Additional menu” and “Footer menu” to their locations,
2. sets the “Home” page as the front page and the “News” page as the posts page.

AI Prompt Manager settings (Prompts > Settings) are not part of the demo. Check them after the import, e.g. enable the command palette on the front end if you want it.

Homepage Setup

1. In 'Pages' section create new page > name it 'Home'
2. Select the 'Elementor Full Width (Transparent Header)' template for this page (the header sits transparently over your first, hero section) and publish the page. Alternatively, select 'No Sidebar Layout (Wide)' for a normal header.
   
3. Go to Settings > Reading and set the created 'Home' page as Static page > Homepage:
   
4. Empty homepage is created now! In next steps, we'll create homepage content using 'Elementor' page builder: open the 'Home' page and hit the 'Edit with Elementor' button.

Adding Hero Section

1. In 'Elementor edit mode' hit the 'Add new container' button:
   
2. Select the structure (e.g. one or two columns):
   
3. Edit the container, switch to the Style tab (a.) and add background image, gradient, video or slideshow (b.):
   
4. Then just click on + sign and drag e.g. Heading, Text Editor and Button widgets into it.
5. In the Advanced tab set the padding of the container. Set padding for tablet and mobile too (see Important below).

Adding Columns

1. Add a new container and select e.g. the 'two columns' structure:
   
2. Select the first container (column) and in the 'Layout' tab set the width in %:
   
3. Do the same with the second column; the sum of widths should be 100%. E.g. if the first column is 70% of width the second should be 30%.
4. Click on the + sign and drag widgets into the columns, e.g. 'TMNF Posts' or 'TMNF Blog' into the wide column and the 'Sidebar' widget into the narrow one.

Crafted Addons adds these Elementor widgets: TMNF Slider, TMNF Posts, TMNF Posts (List), TMNF Posts (Slider), TMNF Blog, TMNF Category and TMNF Authors.

Important

1. Adjust padding for desktop and responsive mode! When you are building any layout using 'columns' in Elementor; click on small 'Desktop' icon in the Advanced tab; 'Tablet' and 'Mobile' icons will appear. Then click on 'Tablet' and 'Mobile' icon and check your layout on small screens. If necessary, adjust padding/margin values for the responsive mode.
   
   

Adding Prompts to the Homepage

There are two ways to show prompts on an Elementor page:

1. Prompt widgets: in the Elementor panel search for “Prompt” – the AI Prompt Manager widgets are in the “WordPress” section: Prompt search & filters, Prompts (cards or list), Prompt categories and Single prompt.
2. Shortcode: drag the Shortcode widget and enter e.g.

   [apm_prompts per_page="6" filters="1"]

Both are described in the AI Prompt Manager documentation (shortcode options).

Blog Template

1. If you want to create News (or Blog) page, create empty page (Default template),
2. name it News (or Blog),
3. go to Settings > Reading and set this page as 'Posts page' (see screenshot above),
4. adjust number of posts.

The title, subtitle, header image and thumbnail size of the blog are set in PromptPress - admin panel > Blog.

Theme Setup - Admin panel

Theme comes with an options panel (PromptPress - admin panel) with functions divided to these sections:

General Settings:

1. Upload your Main Logo,
2. upload the Light Logo: used on the transparent header and in dark mode.

Without a logo, the site title is shown as text.

Colors & Dark Mode:

1. Default color scheme: Follow system, Light or Dark,
2. Light/dark switcher in header: on/off,
3. Elementor: keep light colors on sections with a background (see Dark Mode).

Light colors / Dark colors:

Each scheme has 13 colors (page background, surface, borders, field borders, body text, headings & navigation, muted text, links, links hover, accent, text on accent, inverse background/text/accent), plus optional Header colors and Button colors. Leave the optional ones empty to use the page / accent colors. Every color of the theme and of the prompt library is derived from these values.

Header:

1. Select the header layout: Full Width, Full Width (main menu centered), Boxed or Boxed (Floating) (default),
2. enable fixed header,
3. set the title/logo width and vertical spacing and the menu vertical spacing (empty = compact header).

Typography:

Select the Google Font, weight, size, letter spacing and text transform for: Body text, Headings, Site title, Navigation, Dropdown menus, Page titles, Post titles in lists, Small titles, Buttons, Meta and Headings inside posts.

The theme loads all selected fonts in one optimized request. Prompt text and code always use the bundled JetBrains Mono font.

Blog:

1. Upload the Header Image for the blog page (it also turns on the transparent header there),
2. add the title and subtitle of the blog page,
3. select the thumbnail size: Square, Vertical or Horizontal.

Posts:

1. Turn On/Off the Next/Previous, Tags and Related Posts sections,
2. hide the author, date or category info.

Footer:

1. Upload the footer logo and set its width and spacing,
2. add the footer text.

Social Networks Settings:

1. Enter the full URL of your profile (https:// included). Icons are shown in the footer for every filled field.

If you are finished click on "Save Changes" button!

Dark Mode

PromptPress has a light and a dark color scheme. Visitors switch between them with the button in the header; their choice is remembered in their browser. Visitors who didn't choose get the Default color scheme (Follow system = the visitor's operating system setting).

1. Set the colors of both schemes in Light colors and Dark colors,
2. upload the Light Logo (General Settings): it is used in dark mode,
3. to offer only one scheme, set the default scheme and turn the switcher off.

Elementor sections in dark mode

With “Elementor: keep light colors on sections with a background” on (default), Elementor sections with their own background color, gradient or image keep light-mode text colors, so a light section stays readable in dark mode. To force a scheme on any element, add the CSS class pp-scheme-light or pp-scheme-dark (Advanced tab > CSS Classes).

Prompt Library (Custom Posts)

The prompt library is provided by the AI Prompt Manager plugin. It adds the ‘Prompts’ custom post type:

1. prompts with {{variables}} that visitors fill in and copy,
2. three outputs (Text, Image, Code) with their own fields,
3. reusable Instructions (persona, context, rules),
4. Projects, Use Cases and AI Tools to organise and filter prompts,
5. Private / Team / Public visibility.

Create prompts in the main dashboard menu in the Prompts section. The library is at yoursite.com/prompts/ – add it to your menu as a Custom Link.

What PromptPress adds to the prompt library:

1. A two-column prompt page (“record view”): the prompt panel with word and variable count, Copy and Edit buttons, the Fill & copy form and the sample output on the left; a Properties sidebar (Output, Status, Visibility, Tools, Project, Use case, output fields, Tested with, Updated) and up to five Related prompts on the right:
   
2. Styled cards, search & filter bar, widgets, command palette and code highlighting in both color schemes,
3. highlighted {{variables}} and dark code panels,
4. image prompts show their result images in a grid that opens in a lightbox (Lightbox for Gallery & Image Block plugin).

Related prompts share the project or use case first, then the output. They only include prompts the visitor is allowed to see.

Note! The prompt library and prompt pages are archives generated automatically. They cannot be edited in any editor (Gutenberg, Elementor). To build a custom prompts landing page, use a normal page with the prompt widgets or the shortcode (see Adding Prompts).

Custom Templates

1. Create a page (or post).
2. In the right side section open Template and select a custom template:
   
3. Click the Publish button to publish your page/post.

Template	Layout
Default template	Content with the right sidebar.
Default template (with Hero Section)	Featured image as a hero header, content with sidebar.
Left Sidebar Layout	Content with the sidebar on the left.
Left Sidebar Layout (with Hero Section)	Hero header, sidebar on the left.
No Sidebar Layout (Wide)	Full width, no sidebar. Good for Elementor pages.
No Sidebar Layout (Boxed)	No sidebar, boxed width.
No Sidebar Layout (Narrow)	No sidebar, narrow reading column.
No Sidebar Layout (Narrow - Hero Section)	Hero header, narrow column.
Elementor Full Width (Transparent Header)	Pages only. Full width with the header over the first section of your content. Made for Elementor homepages.

Transparent header: the header is transparent on Elementor Full Width (Transparent Header) always, and on No Sidebar Layout (Wide), (Boxed), (Narrow - Hero Section) and Left Sidebar Layout (with Hero Section) when the page has a featured image.

Custom Widgets

Go to Appearance > Widgets and setup your widget areas: Sidebar, Footer 1 – Footer 5 (and Shop Sidebar with WooCommerce). We are using the 'Classic Widgets' plugin to achieve this look: https://wordpress.org/plugins/classic-widgets/.

Footer columns

On desktop the footer has five columns; Footer 1 is twice as wide. Empty areas keep their place, so leaving Footer 2 and 3 empty moves the next ones to the right (as in the screenshot). On tablets Footer 1 is full width and the others are in two columns; on phones everything is in one column.

Available widgets

1. AI Prompt Manager: Prompt search & filters, Prompts, Prompt categories, Single prompt – styled by the theme. See the plugin documentation.
2. Crafted Addons: TMNF Featured Posts Widget.
3. All WordPress core widgets.

Images

IMPORTANT! It is possible that after theme activation are images wrongly cropped and look ugly!

In this case use this plugin: https://wordpress.org/plugins/regenerate-thumbnails/ to regenerate old thumbnails from previous theme.
After plugin installation start regeneration in Tools > Regenerate Thumbnails. This process can take a while and you cannot close tab/window until regeneration is done.

Images and thumbnails are generated automatically.

To display thumbnails correctly upload images via WP interface using "Set featured image" button.

Featured Images - Minimal Sizes

1. Hero header (hero templates, transparent header): 1800×650px,
2. Single post/page (classic image): 807×500px,
3. Blog thumbnails: 768×1000px (Vertical), 768×768px (Square) or 768×480px (Horizontal), depending on the Blog option.

Result images of image prompts are added in the prompt itself (see Result Images).

Custom Menu

! Create own custom menus first! Please see following tutorial !

The theme has three menu locations: Primary Menu (main menu), Additional Menu (right side of the header) and Footer Menu:

Highlighted Menu Item (button)

1. Toggle 'Screen Options' on the top of the menu screen and enable 'CSS Classes' and 'Description':

2. Toggle any menu item and type special into the 'CSS Classes' field. This makes the item look like a button (e.g. “Get access” in the Additional menu):

Note: the newitem class shows a small ‘New’ label next to the menu item, the important class adds a small accent dot.

Menu Item Description

Type a short text into the 'Description' field of a menu item. In the Main and Additional menu it is shown under the item title, e.g. in dropdowns:

Menu Icons

1. Add the class pp-icon-{name} to a menu item in the Main or Additional menu, e.g. pp-icon-download. It can be combined with other classes: special pp-icon-rocket is a button with an icon.

2. Add pp-icon-only to show only the icon on the desktop menu bar (the label stays in the mobile menu and for screen readers).

3. All available icons can be found here ›

https://themnific.com/docs/promptpress/icons.html

4. One icon per item. Available names:

house, download, book, book-open, folder, folder-open, tag, tags,
wand-magic-sparkles, image, images, code, terminal, star, heart, user,
users, user-plus, envelope, paper-plane, cart-shopping, bag-shopping,
credit-card, circle-info, circle-question, gear, bolt, rocket, lightbulb,
layer-group, list, table-cells, comments, comment, newspaper, file-lines,
pen, arrow-right, arrow-up-right-from-square, lock, crown, gift, play,
calendar-days, phone, location-dot, chart-line, globe, robot, fire,
graduation-cap, briefcase, palette, brain, sliders

Unknown names show no icon. On phones the menu opens as a panel under the header bar:

Plugins

AI Prompt Manager

Adds the prompt library. Full documentation: AI Prompt Manager documentation.

Elementor

Elementor plugin will help you create awesome layouts for your pages. Go to Appearance » Install Plugins and install and activate it. The theme disables Elementor's default colors and fonts automatically, so the theme styles apply – no setup needed.

Crafted Addons

Bundled with the theme (Appearance » Install Plugins). Adds the TMNF Elementor widgets, the TMNF Featured Posts Widget, the ‘Themnific Post Options’ box (show or hide the featured image on a post) and social profile fields on the user profile screen (used in the author box).

Lightbox for Gallery & Image Block

Plugin page: Plugin Homepage. Opens result images of image prompts in a lightbox. No setup needed.

Contact Form 7

Plugin page: Plugin Homepage. Create your form(s) in the main wp menu > Contact and place them on any page using the shortcode. Form fields and buttons use the theme styles. Please read plugin documentation for more info.

MailChimp for WordPress

Plugin page: Plugin Homepage. Optional; it is offered by the demo importer. Use it to create a newsletter sign-up form.

WooCommerce

The theme supports WooCommerce (product gallery zoom, lightbox and slider). With WooCommerce active, a Shop Sidebar widget area appears in Appearance > Widgets.

SEO plugins

The theme prints Schema.org structured data. It switches it off automatically when Yoast SEO, Rank Math, SEOPress or All in One SEO is active, so there is no duplicate data.

Translation

This theme is translation/localization ready and comes with promptpress.pot file. File is located in ../promptpress/languages/ folder.

1. You need to use localized WordPress installation (Settings > General > Site Language) in the first place. If not, localization will be not successful.
2. .pot file is located in root theme folder inside 'languages' sub-folder: ../promptpress/languages/
3. Download Poedit software here, (or use the free Loco Translate plugin),
4. Install software and translate promptpress.pot file (line by line),
5. Once you have translated all the strings, you can save this as your .po file.

   The filename of your .po / .mo file is crucial! Gettext uses the ISO 639 standard for language abbreviations and ISO 3166 for locales. If your translation is written in Deutsch for example, your file name will look like de_DE.po. Capitalization is also important here. For a full list of language and country codes, check out these two links:

   • Gettext language codes
   • Gettext country codes

   Once you save, Poedit by default automatically creates a .mo file alongside your .po file. Put these files into wp-content/languages/themes/ named promptpress-de_DE.po / promptpress-de_DE.mo (so theme updates don't overwrite them).

Your internationalization is complete after uploading .po and .mo files on your server.

Note: the ‘New’ menu badge (newitem class) comes from the stylesheet and is not in the .pot file. Change its text in Appearance > Customize > Additional CSS:

.newitem > a::after, .new_item > a::after { content: 'Neu'; }

The AI Prompt Manager plugin is translated separately (see plugin documentation).

Developers

Always make changes in a child theme, so theme updates don't overwrite them.

1. Prompt page: the theme overrides the plugin template prompt-manager/content-single.php. Copy it to your child theme (your-child-theme/prompt-manager/content-single.php) to change it. Filters: promptpress_apm_properties (rows of the Properties sidebar), promptpress_apm_related (related prompts).
2. Colors: all colors are --pp-* CSS custom properties. Filters: promptpress_color_tokens, promptpress_color_switcher_enabled. JavaScript: window.promptpressColorScheme.set( 'light' | 'dark' | 'auto' ), event promptpress:color-scheme.
3. Fonts: promptpress_typography_fields, promptpress_google_fonts_url (return '' to disable Google Fonts, e.g. when a plugin hosts them locally).
4. Schema.org: promptpress_schema_enabled, promptpress_schema_publisher, promptpress_schema_article_types, promptpress_schema_graph.
5. Icons: promptpress_icon( $name ), add icons with the promptpress_icons filter.
6. Other: promptpress_hero_templates, promptpress_transparent_header, promptpress_light_scope_selectors, promptpress_wrapper_classes, promptpress_content_width.

Theme options are stored by Redux in the themnific_redux option. The full changelog is in readme.txt in the theme folder.

 

---

Once again, thank you so much for purchasing this theme.

Go To Table of Contents