Jeremy Felt

Happy Prime

slocker

philcable

<p>The Theme Image Block plugin allows you to register images from your theme and make them available as blocks in the WordPress editor. This is useful for logos, icons, and other images that are part of your theme’s design system.</p>
<h3>Usage</h3>
<h3>Registering Theme Images</h3>
<p>Theme images should be registered using <code>HappyPrime\ThemeImageBlock\register_theme_image()</code>. This is likely best done on the <code>init</code> or <code>after_setup_theme</code> action.</p>
<pre><code>HappyPrime\ThemeImageBlock\register_theme_image(
    'happy-prime-logo',
    [
        'title' => 'Happy Prime Logo',
        'description' => 'The Happy Prime logo.',
        'alt' => 'Happy Prime',
        'path' => 'images/happy-prime-logo.svg',
        'width' => '300',
        'height' => '',
        'variations' => [
            'small' => [
                'path'   => 'images/happy-prime-logo-small.svg',
                'width'  => '100',
                'height' => '100',
            ],
            'medium' => [
                'path'   => 'images/happy-prime-logo-medium.svg',
                'width'  => '200',
                'height' => '200',
            ],
            'large' => [
                'path'   => 'images/happy-prime-logo-large.svg',
                'width'  => '300',
                'height' => '300',
            ],
        ],
        'sizes' => '(max-width: 600px) 100vw, 300px',
    ]
);
</code></pre>
<h3>Registering Theme Image Styles</h3>
<p>Theme image styles should be registered using <code>HappyPrime\ThemeImageBlock\register_theme_image_style()</code>. This is likely best done on the <code>init</code> or <code>after_setup_theme</code> action.</p>
<pre><code>HappyPrime\ThemeImageBlock\register_theme_image_style(
    'hero',
    [
        'name'   => 'Hero',
        'width'  => 'clamp(10rem, 100vw, 60rem)',
        'height' => 'auto',
    ]
);
</code></pre>


Theme Image Block

Use images from your theme as blocks in content.

Ryan Hellyer

<p>This plugin has been actively maintained since 2012 and is used on over 20,000 websites worldwide.</p>
<h4>Features</h4>
<p>The <a href="https://geek.hellyer.kiwi/products/unique-headers/" rel="nofollow ugc">Unique Headers Plugin</a> adds a custom header image box to the post/page edit screen. You can use this to upload a unique header image for that post, or use another image from your WordPress media library. When you view that page on the front-end of your site, the default header image for your site will be replaced by the unique header you selected.</p>
<p>This functionality also works with categories and tags.</p>
<h4>Requirements</h4>
<p>You must use a theme which utilizes the built-in custom header functionality of WordPress. If your theme implement it’s own header functionality, then this plugin will not work with it.</p>
<h4>Paid WordPress development</h4>
<p>If you would like to pay for assistance, additional features to be added to the plugin or are just looking for general WordPress development services, please contact me via <a href="https://ryan.hellyer.kiwi/contact/" rel="nofollow ugc">my contact form</a>.</p>
<h3>Development</h3>
<p>This section is only relevant for developers building the plugin from source (e.g. cloning from GitHub). If you installed via WordPress.org, the plugin is ready to use — no build steps required.</p>
<p>The plugin uses Composer for PHP autoloading and dependencies, npm for JavaScript tooling, and TypeScript for admin JavaScript.</p>
<p>To set up a development environment:</p>
<ol>
<li>Install PHP dependencies: <code>composer install</code></li>
<li>Install JavaScript dependencies: <code>npm install</code></li>
<li>Compile TypeScript to JavaScript: <code>npm run build</code></li>
</ol>
<p>To run tests and analysis:</p>
<ul>
<li>PHPCS (PSR-12 coding standards): <code>composer phpcs</code></li>
<li>Auto-fix PHPCS violations: <code>composer phpcbf</code></li>
<li>PHP-CS-Fixer (dry-run): <code>composer cs</code></li>
<li>PHP-CS-Fixer (auto-fix): <code>composer cs:fix</code></li>
<li>PHPStan static analysis: <code>composer phpstan</code></li>
<li>PHPUnit unit tests: <code>composer test</code></li>
<li>TypeScript type checking: <code>npm run typecheck</code></li>
</ul>
<p>TypeScript source files are in <code>src/ts/</code>. The compiled output is written to <code>assets/admin.js</code> and is what WordPress loads on the admin side.</p>
<h4>Credits</h4>
<p>Thanks to the following for help with the development of this plugin:<br />
* <a href="http://www.redactsolutions.co.uk" rel="nofollow ugc">redactuk – Assistance with debugging.<br />
* </a><a href="http://www.datamind.co.uk/" rel="nofollow ugc">crabsallover – Assitance with debugging.<br />
* </a><a href="http://onmytodd.org" rel="nofollow ugc">Todd</a> – Assistance with implementing support for tags.<br />
* <a href="http://westoresolutions.com/" rel="nofollow ugc">Mariano J. Ponce</a> – Spanish translation.<br />
* <a href="http://www.graphicana.de/" rel="nofollow ugc">Tobias Klotz</a> – Deutsch (German) language translation.<br />
* <a href="http://nakri.co.uk/" rel="nofollow ugc">Nadia Tokerud</a> – Proof-reading of Norsk Bokmål (Norwegian) translation.<br />
* <a href="http://bjornjohansen.no/" rel="nofollow ugc">Bjørn Johansen</a> – Proof-reading of Norwegian Bokmål translation.<br />
* <a href="https://www.facebook.com/kaljam/" rel="nofollow ugc">Karl Olofsson</a> – Proof-reading of Swedish translation.<br />
* <a href="http://www.jennybeaumont.com/" rel="nofollow ugc">Jenny Beaumont</a> – French translation.</p>


Unique Headers

Great plugin!

Use it on every site. Why would soneone like to have the same header on every page? Should be in core. =)

Should have been core since .. ever?

Add unique custom header images to individual pages, posts, categories, or tags.

Theme Image Block vs Unique Headers