WordPress Development

Dynamic Templates: Build the Design Once, Let Your Posts Fill It In

You build the layout once, tell a few layers where to get their content, and from then on every post, product or page renders its own version.

Dynamic Templates: Build the Design Once, Let Your Posts Fill It In

I want to show you the thing that changed how I work more than any other single feature, and it is not a filter or a brush. It is the moment a design stops being a picture and becomes a form that fills itself in.

Here is the idea in one sentence: you build the layout once, you tell a few layers where to get their content, and from then on every post, product or page renders its own version. No copy and paste, no “let me just swap the headline”, no forty files called social-final-v3.

What a binding actually is

Take any text layer, open Properties and look for Dynamic content. Instead of typing words into the layer, you point it at a source. The post title. The excerpt. The category. The publish date. The author name and bio. The site name and tagline. If you run WooCommerce, the product price, the sale price, the discount, the product image. Every ACF field. And if none of those fit, any custom field at all through its meta key.

The layer keeps its font, its color, its effects, its position. Only the words change. That is the whole trick, and once it clicks you start seeing templates everywhere.

Image layers work the same way. Bind one to the featured image, the brand logo, or a generated background, and the picture arrives from the post instead of from your desktop.

A four step flow showing a text layer keeping its own styling while its content is bound to a source, with the final step showing an empty value hiding the layer entirely

The two problems everybody hits, and how they are solved

The first time people try this, two things go wrong within about a minute. I know because both of them went wrong for me.

Long titles break the layout

You design with a nice short headline. Then a real post arrives with fourteen words and the text runs off the canvas, or it wraps into five lines and eats the picture.

The fix is a minimum and a maximum font size on the bound layer. Draw the box the size the design needs, then say: this text may live anywhere between 34 and 72 pixels. Short titles get the big size and look confident. Long ones shrink until they fit. Anything that still overflows at the minimum gets shortened with an ellipsis rather than escaping the frame.

That single setting is the difference between a template that works on twenty posts and one that needs supervision on every single one. It is the least glamorous feature in the whole system and I would not give it up for anything.

Pictures arrive in the wrong shape

Featured images are portrait, landscape, square, and occasionally a panorama someone uploaded from a phone. Drop those into a fixed slot and you get squashed people.

Bound image layers have an Image Fit setting. Cover crops the incoming picture so it fills the box completely, keeping its proportions. Fit letterboxes it so nothing is lost. And an anchor decides which part survives the crop, so you can say “keep the top” and portraits stop losing their heads. The same setting doubles as a non-destructive crop on any ordinary image layer, which I use constantly.

The detail I love most: empty means invisible

A variable with no value hides its layer. That sounds like a footnote and it is actually a design tool.

Build a discount badge, bind its text to the discount percentage, and it appears only on products that are actually on sale. Everything else renders without it, automatically, with no conditional logic and nothing to maintain. Bind a subtitle to a custom field that only some posts fill in, and the layout closes up on the ones that do not.

Once you know this, you start designing templates with optional parts on purpose. One template quietly becomes four.

Preview with a real post while you design

Designing against dummy text is guesswork. View, then Preview with Post, drops actual content into your design while you keep working, so you can see what a genuinely long title does before you save anything.

It is non-destructive. Your placeholder text comes back the moment you leave the preview, and undo history is untouched. I flick it on and off constantly, usually against the worst post I can find, because a template that survives your ugliest headline survives everything.

When it holds up, File, then Save as Dynamic Template.

A table pairing the content that breaks a template, long titles, wrong shaped pictures and empty fields, with the setting that absorbs each one, followed by four figures for the size range and the run up from three posts to two hundred

The same idea works for anything with a shape and a list, not just posts. The merge below takes a template with placeholders and a table of values and produces one result per row.

Placeholders take defaults and filters, a block can be made to disappear when its field is empty, and the whole set comes back as one text block or as separate files in a zip. It is the paper version of what a binding does inside the editor.

Template and data merge

Build the layout once, put your rows underneath, and get one finished result for every row. Everything happens in this browser tab: a dropped file is read on your own machine and nothing is uploaded.

Filters after the name: upper, lower, title, trim, slug, number, date (2024-05-17 becomes 17 May 2024), escape, attr, raw. number groups the English way, so 1234567.5, 1234567,5 and 1.234.567,5 all come out as 1,234,567.5: the last separator in a value is the decimal point when one or two digits follow it or when it is the only one of its kind, every other separator is grouping and is dropped, and a value that does not read as a number is left as it stands. Anything else after the bar is the default value for an empty field, as in {{price|On request}}. {{#column}} keeps a block only when that field is filled, closed with {{/column}}, and {{#}} is the row number.

Drop a CSV or TSV file here
or press Enter to pick one. It is read in this tab and replaces the rows above.

Columns found: none yet.

Merge options

Detected: comma

One file per result in the ZIP.

The template looks like HTML, so values from the data are escaped.

Nothing merged yet
0Data rows
0Results
0Placeholders
0With a column
    Preview

    The rendered preview sits in a sandboxed frame with scripts and network access switched off, so markup that comes in with your data can only ever draw inside that frame.

    WunderPaint
    The Dynamic Design and Automation Studio
    WunderPaint is a layered image editor for your WordPress media library. WunderPaint Studio is the same thing in any browser, free and without an account.

    Then run it over everything you have

    This is where it stops being a nice idea and starts saving days. Automation, Images, Featured Images: search and filter your posts, pages or products, select as many as you like, pick a template, press Process. If your content already lives in a sheet rather than in WordPress, the same thing works from a CSV.

    The bulk run is the part that needs WunderPaint Pro. Building the template, binding the layers to your content and previewing it against a real post are in the free plugin.

    For each entry the placeholders resolve, the design renders, and the result is set as the featured image. If you want, a background is generated from the content of that specific post, optionally steered by a style description, a reference image and your brand colors, so a hundred posts do not end up with a hundred copies of the same stock photo.

    Three things about this run that I appreciate more every time I use it:

    • The output keeps its layers. A generated image opens from the media library as a full document, not a flattened JPEG. If one of a hundred needs a nudge, you nudge it.
    • Batches survive a reload. Progress is stored on the server, so closing the tab or a shaky connection does not mean starting over.
    • Per-category template mapping. Assign a template per category once and a bulk run picks the right one by itself, so your tutorials and your news posts can look related without looking identical.

    With Rank Math or Yoast active, the same run can set the image as the social preview and write an SEO title and description per post. And Also save as PDF drops a print-ready version next to the image, which turns out to matter more often than you would think.

    Where I would start

    Do not build the perfect template first. Build a plain one: a background, a bound title with a sensible size range, a bound featured image set to Cover, your logo. Preview it against three real posts, including the one with the longest headline on your site. Fix what breaks.

    Then run it over ten posts, look at the results, and adjust. By the time you point it at two hundred, you already know exactly what it will do.

    The payoff is not only speed. It is that your archive suddenly looks like it was designed by one person on one afternoon, because in a sense it was.

    Dynamic Templates: Build the Design Once, Let Your Posts Fill It In

    Table of Contents

    Learn it by building something

    Every week one thing you can make the same afternoon, from dynamic templates to 3D type. Written down step by step.

    One mail a week, and then it ends.
    Unsubscribe in one click.

    Security & Privacy

    Screenshots Worth Publishing: Capture, Frame, Annotate

    An enormous amount of what people need to see is a picture of a screen, and most of those pictures are worse than they need to be for reasons that take seconds to fix.

    Security & Privacy

    What Your Photos Tell Your Visitors: EXIF, GPS and WordPress

    WordPress keeps the file you uploaded exactly as it arrived, sitting next to the resized copies it actually serves. If that file came off a phone, it very likely still carries the coordinates of the room it was taken in.

    Developer Tools

    Encoding Forensics: How to Fix Mojibake Like ü

    ü is not corruption. It is one umlaut, two UTF-8 bytes, read by a program that believed they were Windows-1252, then saved again so the wrong reading became the content. Here is how to tell which wrong turn your text took, why copied replacement lists only half work, and what to check in the database before you clean anything.

    Photo Editing

    Remove an unwanted object from a photo without uploading it anywhere

    A clone tool copies pixels from elsewhere. An inpainting model predicts what should have been behind the thing you removed, which is a different question with a much better answer on grass, hedges and brickwork. It runs in your browser, and the rest of the photograph comes back byte for byte unchanged.

    Security & Privacy

    WordPress Salts and Passwords: The Eight Lines Nobody Rotates

    The eight define() lines in wp-config.php sign every admin cookie and every nonce your site issues. What each one does, why Math.random cannot be trusted to make them, what actually breaks when you rotate them, and an offline generator for the replacements.

    WordPress Images

    The WordPress Uploads Folder, and How to Move It Safely

    The year and month structure under wp-content/uploads comes from one boolean option, and the full path is recomputed on every request rather than stored. That is why repointing the folder is trivial and why moving the files is not.

    Download the free WunderPaint Plugin for WordPress

    The WunderPaint workspace with the layers panel, adjustment sliders, text style presets and the asset library along the bottom

    The Image Editor & Design Studio

    Everything described here can be done in the browser, on your own site. The live demo runs the full editor with nothing to install.

    Free

    Chaos Art

    Autonomous painters make one-of-a-kind abstract art in 3D space - gestures, art movements, painterly media, and embeds that paint a new original for every visitor.

    Pro

    Particle Strokes

    Paint with swarms of light: twenty-two movements, a stamp you draw yourself, and curves that give a stroke a shape - the swarm keeps painting for a few seconds after you let go.

    Pro

    City Diorama

    Any place on earth as a miniature you could hold: real streets, water and building footprints raised into a 3D diorama - or wrapped around a sphere as your own tiny planet.

    Free

    Papercut Art

    Layered paper pictures with real depth - a photo sliced along its actual depth into up to twenty layers, parametric landscapes, animals and clouds you can shape, letters with real counters, and a look that runs on three dials.

    Pro

    3D Earth Studio

    A hyperrealistic globe - day and night with city lights, live clouds, atmosphere halo, country borders and highlights, click-to-place markers with flight-route arcs, satellite orbits, seamless rotation video and a live website embed.

    Free

    Mystic Studio

    Turn a birth date into wall art - a real natal chart with houses and aspects, the moon of that night, zodiac and Chinese zodiac posters, numerology cards and a synastry wheel for two, in eight artful themes.

    Free

    Marble Bath

    Marble paper on a virtual water bath - drop, rake and comb real Ebru patterns with gestures, flowers and classic recipes, razor-sharp at any size and re-editable as a layer.

    Free

    Day Ring

    Turn a day into a beautiful circular schedule - colour-coded time blocks as arcs around a 24-hour clock, with concentric rings for overlaps, emoji, templates and a legend.

    Free

    Code Shot

    Turn code into a gorgeous, share-ready image - syntax highlighting, editor themes, window frames and diff highlighting - then drop it into your design as a re-editable layer.

    Pro

    3D Solar System Studio

    Build a date-accurate 3D solar system - real planet positions for any date, photoreal textures and one slider from artistic to true scale - then drop it into your design as an editable layer.

    Pro

    3D Molecule Studio

    Build a real 3D molecule - from a curated library, the periodic table or a SMILES string - then style it, measure it and drop it into your design as an editable layer.

    Pro

    3D Textile Studio

    Drop your design onto cloth that behaves like the material you pick: silk falls soft, felt holds its shape, flag fabric snaps in the wind. Hang it, blow it and drape it, then lay the finished drape back into your document as a picture.

    Pro

    3D Particle Studio

    Point the engine at any layer and it becomes a cloud of particles that keeps its colours, flowing through a sphere, a galaxy or your own outline. Keep the frame you like as a still, or embed the running engine so it keeps moving on your page.

    Free

    Origami

    Put your own picture on the paper and watch that very sheet fold itself into a crane or a box. Every step is a station you can stop at and turn around in 3D, which is exactly where printed diagrams leave you alone.

    Pro

    3D Flip Studio

    A hardcover you can leaf through, a limp magazine, a strewn pile of sheets, a sticker peeling off its backing. The curl is real geometry, so the print never slides across the paper.