06. PMB Pro Print HTML Structure

194 February 9, 2022

The HTML file generated by PMB Pro Print (called the “Print Page”) has an HTML head and footer elements very similar to the front end of the website. It should contain the CSS, JavaScript, and other elements added by your site’s active plugins. Usually, you will want to exclude the theme’s styles (selectable from your design’s customization step) because they usually conflict with the design’s styles and are usually ill-suited for paged media.

Inside the HTML file’s body, you’ll see an HTML structure very similar to your projects table of contents: the entire project’s content is wrapped in a div element with the CSS class pmb-project. Inside that are divs with CSS classes pmb-front-matter, pmb-main-matter, and pmb-back-matter.

The body of the PMB Pro Print Page has 3 main divs pmb-front-matter, pmb-main-matter, and pmb-back-matter
Actual HTML of a PMB Pro Print Page with front matter, main matter, and back matter.

The main matter’s structure depends on how many levels of nested content it contains.

No Parts, Just List of Articles

A project containing just a list of articles (no parts)

If there is no nested content (ie, just one layer of sections), there will just be a list of divs with class pmb-article-wrapper, each containing a tag with the class pmb-article.

The HTML structure of a PMB Pro Print Page with no nested content, only a list of posts. For each post there is a div with the CSS class pmb-article-wrapper which contains an element with CSS class pmb-article.
Actual HTML of a PMB Pro Print Page with no nested content.

At first, the pmb-article-wrapper divs appear unnecessary. But you’ll see how they’re consistent with what’s coming up…

Parts, Each Containing Articles

If your project’s contents are divided into parts, ie has 1 level of nested content, it builds on the HTML structure from before.

A project whose content is divided into parts (“About Print My Blog” and “Getting Started”). Each part has several articles.

For each part, there will be a div with the CSS class pmb-part-wrapper containing an element with the CSS class pmb-part (very similar to before). What follows is the exact same as a project with no parts: a series of divs with the class pmb-article-wrapper, each containing an element with the CSS class pmb-article.

The HTML structure of the PMB Pro Print Page with parts. There is a list of pmb-part-wrappers, each containing a pmb-part, then a list of pmb-article-wrappers which each contain a pmb-article.
The actual HTML of a PMB Pro Print Page with parts.

“Volumes” Divided into Parts Divided into Articles etc

More levels of nesting are possible, depending on the design. The next level up are “volumes”, which are divided into parts. The next level up from that is “anthologies” which are divided into volumes.

The HTML structure repeats with each of these higher levels: for each volume there is a pmb-volume-wrapper which contains a pmb-volume and then a list of pmb-part-wrapper, etc. Likewise, for each anthology there is a pmb-anthology-wrapper which contains a pmb-anthology followed by a list of pmb-volume-wrappers.

Jaggedly-Divided Content

What if you have some articles organized into projects, but some outside of projects? What HTML structure will that have? Will the content that’s not nested be considered a “part” or an “article”? An “article”. Whether a section is an article, part, volume, or anthology is determined by how many levels of content there are below it.

A project with “jagged” content: notice that “Introduction” has no sub-sections whereas “PDF Designs” does. In this example, “Introduction” will be an article, and “PDF Designs” will be a part.
Actual HTML for a project where some articles are inside parts, others aren’t. Notice the direct children of the div with CSS classes pmb-main-matter is first a pmb-article-wrapper, followed by a pmb-part-wrapper (which itself contains a pmb-part and several pmb-article-wrappers).

As always, if you have further questions, please contact us.