Midwest Ceramic Coating
About This Project
Custom WordPress brochure website developed for Midwest Ceramic Coating, a ceramic coating business. The project focused on creating a modern, responsive marketing website with a custom WordPress theme, reusable Gutenberg blocks, interactive page elements, and a streamlined content editing experience.
Project Page Gallery
A visual walkthrough of the custom page layouts, before-and-after photography, reusable Gutenberg blocks, and responsive website components developed for Midwest Ceramic Coating.
Site Exploration
Home
Introduces the business and establishes its visual identity. When potential customers first visit the website, they’re immediately presented with an above-the-fold call to action that directs them to a Jetpack form, helping turn initial interest into new business leads.
About
This is a company storytelling page that highlight's Midwest Ceramic Coating's services and expertise.
404 Page
If someone tries to navigate to a page that does not exist, they are taken to a custom 404 page featuring a search bar, brief explanatory text, and a floating error icon from Font Awesome. I built the page using WordPress’s template part system and the built-in get_search_form() PHP function.
Responsive Design
The custom WordPress theme was developed with a responsive, mobile-first approach, ensuring layouts, imagery, and interactive components adapt seamlessly across desktop, tablet, and mobile devices.
Color Scheme
I had a lot of fun coming up with the color scheme for the website and settled on using mostly white and light colors. Green, blue, and brown accents were used too.
Image Collage
I challenged myself to move beyond my usual row-and-column layouts by creating an overlapping image collage with CSS Grid. The screenshot shows the underlying 8×8 grid in Chrome DevTools and how each image spans different areas of the grid. For instance, the first image occupies columns 4–8 and rows 1–4, while the second occupies columns 2–4 and rows 4–6, and the third occupies columns 5–8 and rows 5–8. This staggered positioning creates the collage effect while keeping each image tied to a predictable layout system.
Media/text block styling
I added a custom WordPress block style to the core Media & Text block using CSS pseudo-elements. I’m a fan of pseudo-elements because they’re a simple way to add extra visual flair without adding more HTML. Instead of a basic green background, I used them to create a triangle that points toward the image on mobile and a slanted panel on desktop.
Theme Architecture
The Midwest Ceramic Coating website was developed as a fully custom classic WordPress theme rather than being assembled with a page builder. Its architecture combines PHP templates, reusable Gutenberg blocks, modular Sass, and bundled JavaScript to provide a maintainable foundation for both visitors and future content editors.
Dart Sass is used to organize and compile the theme’s stylesheets, while esbuild bundles the JavaScript used by the navigation, image galleries, animations, and interactive content. WordPress editor styles help keep the editing experience consistent with how the front-end of the website looks too.
WordPress Development
The theme uses native WordPress APIs for theme setup, asset loading, navigation, editor styling, custom fields, and content rendering. The expandable examples below highlight selected portions of the implementation without displaying the complete project source code.
Theme Support and Navigation
Theme capabilities and editable menu locations are registered during WordPress initialization. This enables native support for document titles, featured images, custom logos, editor styles, and managed navigation menus.
View source PHP
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'custom-logo' );
add_theme_support( 'editor-styles' );
register_nav_menus( [
'primary' => __( 'Primary Menu', 'midwest-ceramic-coating' ),
] );Resilient Asset Loading
Stylesheets and scripts are loaded through the WordPress enqueue system. File modification timestamps are used for cache busting so visitors receive updated compiled assets after a deployment.
View source PHP
wp_enqueue_style(
'mwcc-style',
get_theme_file_uri( '/build/css/style.min.css' ),
[],
filemtime(
get_theme_file_path( '/build/css/style.min.css' )
)
);Editor Styling
A dedicated editor stylesheet brings the appearance of Gutenberg content closer to the front-end design, helping editors understand how their content will look before publishing.
View source PHP
add_theme_support( 'editor-styles' );
add_editor_style(
'build/css/editor.min.css'
);Centralized Site Settings
Reusable business information is stored as custom fields on a dedicated Site Settings page. Theme templates retrieve the saved values from one location rather than repeating contact information throughout the site.
View source PHP
$settings = get_page_by_path( 'site-settings' );
$email = $settings
? get_field( 'email', $settings->ID )
: '';Accessible Theme Templates
The templates use WordPress functions for document attributes, body classes, generated page assets, and navigation output. A skip link also allows keyboard users to move directly to the primary page content.
View source PHP
<html <?php language_attributes(); ?>>
<body <?php body_class(); ?>>
<a class="skip-link" href="#main">
<?php esc_html_e(
'Skip to content',
'midwest-ceramic-coating'
); ?>
</a>Extending Core Blocks
Custom visual styles extend native Gutenberg blocks so editors can apply branded layouts without requiring a new custom block for every design variation.
View source PHP
register_block_style(
'core/media-text',
[
'name' => 'angled-feature',
'label' => __(
'Angled Feature',
'midwest-ceramic-coating'
),
]
);Custom Gutenberg Blocks
Reusable Gutenberg blocks were developed as self-contained components with structured attributes, native editor controls, and PHP render templates. This allows specialized page layouts to be managed directly inside WordPress while keeping the front-end markup under the theme’s control.
Metadata-Based Registration
Each custom block is described through a block.json file and registered from its metadata. This keeps attributes, editor assets, styles, and rendering behavior organized within the block’s directory.
View source PHP
register_block_type_from_metadata(
get_stylesheet_directory()
. '/blocks/reveal'
);WordPress Media Library
Image-based blocks integrate with the native WordPress Media Library. Editors can select or replace images without entering file URLs, while attachment details are stored as structured block attributes.
View source JavaScript
onSelect: ( media ) => {
setAttributes( {
imageId: media.id,
imageUrl: media.url,
imageAlt: media.alt || ''
} );
}Native Content Controls
Editable headings and descriptions use Gutenberg’s native content components. Available formatting is intentionally limited to preserve the design while still allowing editors to add emphasis and links.
View source JavaScript
el( RichText, {
value: attributes.description,
allowedFormats: [
'core/bold',
'core/italic',
'core/link'
],
onChange: ( description ) =>
setAttributes( { description } )
} );Secure Server-Side Rendering
Dynamic blocks are rendered through PHP templates. Text, URLs, and HTML attributes are escaped according to their output context before being displayed on the front-end.
View source PHP
<h2>
<?php echo esc_html( $heading ); ?>
</h2>
<img
src="<?php echo esc_url( $image_url ); ?>"
alt="<?php echo esc_attr( $image_alt ); ?>"
>Before & After Reveal Block
A custom Before & After block was developed specifically for ceramic coating photography. Visitors can drag the comparison control to reveal the finished result while editors manage both images and descriptions within Gutenberg.
View source JavaScript
function updateReveal(value) {
value = Number(value);
$after.css(
"clip-path",
"inset(0 " + (100 - value) + "% 0 0)"
);
$handle.css("left", value + "%");
$hint.css("left", value + "%");
$block.toggleClass(
"is-all-before",
value <= 5
);
$block.toggleClass(
"is-all-after",
value >= 95
);
}
if (
!$range.length ||
!$after.length ||
!$handle.length
) {
return;
}
$range.on("input change", function () {
updateReveal($(this).val());
});
updateReveal($range.val() || 50);Progressive Enhancement
Gallery content is rendered by WordPress before JavaScript runs. Supported browsers receive an enhanced slider and lightbox experience, while a static image layout remains available as a fallback.
View source PHP
<noscript>
<div class="gallery__fallback">
<?php foreach ( $images as $image ) : ?>
<img src="<?php
echo esc_url( $image['url'] );
?>" alt="">
<?php endforeach; ?>
</div>
</noscript>Interactive Front-end Features
The front-end combines custom JavaScript behavior with focused third-party libraries to support responsive navigation, subtle animation, fullscreen image viewing, and touch-friendly galleries. These enhancements are kept separate from the core WordPress content so the underlying pages remain structured and maintainable.
Responsive Navigation
The custom navigation supports sticky positioning, multi-level dropdowns, responsive mobile controls, and updated accessibility attributes when the menu opens or closes.
View source JavaScript
$toggle.on( 'click', function () {
$navigation.toggleClass( 'is-open' );
$( this ).attr(
'aria-expanded',
$navigation.hasClass( 'is-open' )
);
} );Scroll Animations
Subtle entrance animations help guide visitors down the page. Animations run once and use consistent timing throughout the website. I used Animate On Scroll (AOS) for some of the scrolling animations.
View source JavaScript
AOS.init( {
duration: 700,
easing: 'ease-out',
once: true,
offset: 80
} );Touch-Friendly Galleries
Splide.js powers responsive image galleries that support touch gestures, keyboard navigation, configurable slide counts, and mobile-friendly browsing.
View source JavaScript
// Product slider
$(".product-galleryblock__slider").each(function () {
new Splide(this, {
type: "loop",
perPage: 3,
gap: "1.5rem",
autoplay: true,
interval: 3500,
pauseOnHover: true,
pauseOnFocus: true,
arrows: true,
pagination: true,
breakpoints: {
768: {
perPage: 1
}
}
}).mount();
});
$(".product-galleryblock__lightbox").on("click", function () {
$(this).blur();
});Fullscreen Image Viewing
GLightbox provides fullscreen viewing for completed projects and service photography, allowing visitors to inspect larger images without leaving the current page.
View source JavaScript
GLightbox( {
selector: '.glightbox',
touchNavigation: true,
loop: true
} );