October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PCOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk12 min

How to Build Custom Blocks With Genesis Custom Blocks

A practical, field-by-field guide to building Gutenberg blocks with Genesis Custom Blocks, including installation, PHP templates, Genesis Pro decisions, dynamic rendering, testing, and maintenance.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Genesis Custom Blocks lets you create Gutenberg blocks from WordPress administration, define the fields editors fill in, and render the result with a PHP template. You do not need React or the Genesis Framework. The practical workflow is: enable the block editor, install the plugin, create a block definition, add only the fields your content model needs, create its PHP template, style it, and test both editor and front-end output.

This guide covers the current plugin workflow, including which fields are available in the free edition, when Genesis Pro is needed, how templates and server-side rendering fit together, and how to keep blocks portable when a theme changes.

As an Amazon Associate I earn from qualifying purchases.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What Genesis Custom Blocks does

Genesis Custom Blocks is a WordPress administration interface paired with a templating system. Instead of hand-coding a block editor interface in JavaScript, you describe the block in the dashboard: its name, slug, description, and fields. Editors then complete those fields inside Gutenberg, while a PHP template turns the saved values into front-end markup.

StudioPress describes the process in four stages:

  1. Add a block in WordPress Admin.
  2. Configure the fields that appear in the editor.
  3. Build the block template.
  4. Insert and use the finished block in the editor.

The approach is especially useful for teams that want a controlled content form rather than a blank canvas. A testimonial card, staff profile, callout, product specification panel, or event summary can expose exactly the inputs its editors need while keeping the HTML and CSS under developer control.

#1 Best Overall
Sale
TOZO A1 Wireless Earbuds Bluetooth 5.3 Light Weight in Ear Headphones | IPX5 Waterproof,2 Mics for AI Calls,Immersive Premium Sound Bass Headset with Charging Case,32 EQ via App Black
  • [Ultra-Lightweight Ear Buds Designed for Small Ears] Each earbud weighs only 3.7g and features a compact, ergonomic in-ear design made especially for small ears. Secure, low-profile, and comfortable for workouts, all-day wear or overnight sleeping.The ultra-slim profile sits flush in your ear with no hard edges poking or rubbing, so you can even sleep on your side without discomfort.
  • [Immersive Stereo Sound with TOZO OrigX Technology] TOZO OrigX tuning delivers clear vocals, balanced mids, and natural stereo sound for music, podcasts, and videos.
  • [Long Battery Life for Daily Use] Get up to 7 hours of playtime on a single charge, with up to 32 hours total using the charging case—ideal for workdays, commuting, and extended listening sessions.
  • [Bluetooth 5.3 & Stable Connection] Bluetooth 5.3 provides fast pairing, stable wireless performance, and reduced dropouts as you move around home or office.
  • [Deep Bass with Clear Vocals] High-performance drivers produce punchy bass while keeping vocals clean and detailed for everyday listening.

Requirements and compatibility

Before installing, verify that the site meets the plugin’s current release requirements. The WordPress.org repository metadata lists WordPress 6.0 or newer, PHP 7.0 or newer, and stable tag 1.7.3. Those figures are release metadata accessed in 2026, not a guarantee that every future version will retain the same minimums; check the repository and the installed release notes before deploying.

Requirement What to verify Why it matters
Editor The WordPress block editor is enabled for the post type where the block will be used. The plugin creates Gutenberg blocks, so a classic-editor-only workflow cannot expose them.
WordPress Repository metadata lists version 6.0 or newer. Older core versions may lack APIs or editor behavior expected by the current plugin.
PHP Repository metadata lists PHP 7.0 or newer. The template executes on the server and must run on a supported PHP version.
Access An administrator account that can install plugins and configure blocks. Both installation and block-definition screens are administrative tasks.
Test site A staging copy or backup before introducing a new block to production. Template errors, CSS conflicts, or field changes can affect existing content.

Install Genesis Custom Blocks

  1. Sign in to WordPress with an account allowed to manage plugins.
  2. Open Plugins → Add New.
  3. Search for Genesis Custom Blocks.
  4. Select Install Now, wait for installation to finish, and choose Activate.
  5. For a manual installation, download the package from its WordPress.org listing, upload it through the plugin installer, and activate it from the Plugins screen.

After activation, look for the Genesis Custom Blocks administration area. If it is missing, confirm that the plugin is active, the account has the required capability, and the block editor is available for the post type you are editing.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Create the block definition

Choose a stable identity

Start with a name that describes the content rather than its appearance. “Staff profile” is more durable than “Blue box.” Set a clear slug and description as well. The slug becomes part of the block’s identity, so changing it later can complicate existing content and template maintenance. Decide on naming conventions before several blocks share the same project.

Use the editor-facing description to tell authors when the block belongs in a post. A short instruction such as “Use for one person; add a portrait, role, and biography” prevents editors from treating a structured block as a general-purpose text area.

Model only the data the editor needs

Every field increases the form editors must complete and the number of values your template must handle. Begin with the smallest useful model. Add a field when it represents content or a meaningful presentation choice, not merely because the plugin can store it.

Free field Good fit Implementation note
Text Short labels, names, headings, or one-line values. Use when line breaks and long formatting are not required.
Textarea Supporting copy or a short paragraph. Define how line breaks should be rendered in the template.
URL A destination for a button or text link. Pair it with a separate text field for the visible link label.
Image An image selected from the media library. Plan an alt-text policy and a fallback when no image is selected.
File A downloadable document or other media file. Output a meaningful label and validate that a file exists before linking.
Toggle or checkbox Boolean choices such as “featured” or “open in a new window.” Keep the meaning explicit so a checked value has one predictable effect.
Select, radio, or multi-select A controlled set of styles, categories, or display modes. Use fixed choices when arbitrary editor input would break the design.
Range or number Bounded quantities such as a column count or rating. Set sensible limits and handle missing values in the template.
Email An email address displayed or linked from the block. Validate and escape the value before output.
Color A controlled accent or background color. Restrict usage to approved design contexts instead of allowing unsafe markup.
Inner blocks Nested Gutenberg content that editors should compose themselves. Use this when a fixed list of fields would be less flexible than nested blocks.

When Genesis Pro fields are justified

The free plugin covers the basic field types above. Genesis Pro adds repeater, taxonomy, post, user, rich text, and classic text fields, along with block-level import/export and additional support features.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
Sale
Smart Watch for Men Women Compatible with iPhone Samsung Android Phone 1.69 inch Full Touch Screen IP68 Waterproof Bluetooh Fitness Tracker Heart Rate/Sleep Monitor (Black)
  • 【IP68 Waterproof Multifunctinal Smart Watch】Torjalph fitness activity tracker smart watch is IP68 waterproof technology ,you can wear it when swimming,handwashing,it's rain-proof which means that you perform multiple exercise modes outside without worrying about sweat or rain corroding your fitness smart watch,and this watch equipped with a 230 mAh large capacity battery magnetic charging ,and this sports activity tracker watch can be used 5-7 days If fully charged.
  • 【Larger 1.83'' Full Screen Watch & Multi-dial Selection】1.83 inch full HD color touch screen smart watch for men / women provides excellent 240*284 resolution image quality ,This Bluetooth smart watch offers a better touch experience and remarkable immersion and ,more than 200 watch faces for you to choose from App"Da Fit ", you can change the dial style according to your mood to wear keeping the world on your wrist
  • 【Accurate Activity Tracker Smart Watch 】sports watch activity tracker uses sweat and dust resistant breathable silicone strap, our Fitness Tracker Smart Watch for Android iOS Phones supports 12 sports modes,walking,running,bicycle,swimming,badminton,basketball,football,rope skipping. This bluetooth calls smart watch for men women is lightweight and stylish, bringing more convenient and relaxing sports experience while also providing more protection.
  • 【Your 24 Hour Personal Daily Health Monitor】Fitness watch for women men full touch screen IP67 waterproof bluetooth smartwatch for Android iOS Phones with heart rate blood pressure monitor multifunction Andriod smart watch with steps counter sleep monitor sports fitness watch, monitoring blood oxygen saturation allows you to understand your physical condition in real time to track fitness progress ,to know your health status in time.
  • 【More Functions Bluetooth Call Smart Watch】This fitness activity smart watch full screen for iPhone and Android phones includes a bunch of new features including:The bluetooth smart watch can hang up the phone, receive and display WhatsAPP /Text /Facebook /Twitter /Messenger reminder.Support sedentary reminder, alarm clock, stopwatch, timer,weather information,music control, remote camera control compatible with Android 5.0 and above or iOS 9.0 and above smartphones.
Pro capability Use it when Decision warning
Repeater The block contains a genuinely repeating unit, such as several speakers or product benefits. Repeating fields make the editor form longer; do not use one to imitate a flexible page builder.
Taxonomy The block should select terms from an existing taxonomy. Define what happens when a selected term is renamed or removed.
Post The block needs to reference one or more existing posts. Decide how drafts, trashed posts, and changed permalinks are handled.
User The content is tied to a WordPress user profile. Check that the selected user’s public information is appropriate to display.
Rich text Editors need formatted text inside a field rather than a plain textarea. Set output rules and sanitization expectations before allowing formatting.
Classic text A legacy content workflow requires the classic text field behavior. Use it for compatibility, not as a default replacement for structured fields.
Import/export You need to move block definitions between sites or environments. Keep exported definitions and templates versioned together.

Do not purchase or enable Pro merely to obtain a field that can be modeled cleanly with a free field or inner blocks. Choose it when the data relationship or repeated structure is central to the block.

Build the PHP template

Where the template belongs

Create a PHP template for the block using the naming convention documented by the installed plugin version. The repository FAQ refers to templates such as block-example.php. The exact directory can vary with the release and setup, so confirm the current Genesis Custom Blocks documentation rather than copying a path from an older tutorial. The filename and block slug must remain aligned with the convention the plugin expects; a correctly written file in the wrong location will not render.

Retrieve and render field values

Use Genesis Custom Blocks’ documented developer functions to retrieve each field value. Those functions are the supported alternative to relying only on the built-in editor and allow the PHP template to remain the source of front-end markup. Keep the template’s responsibilities clear:

  • Fetch the values for the current block instance.
  • Check whether optional fields are empty before emitting wrappers or links.
  • Escape text, URLs, attributes, and other context-sensitive output with the appropriate WordPress escaping function.
  • Render semantic elements such as headings, paragraphs, lists, figures, and links instead of a collection of anonymous containers.
  • Apply predictable classes that your stylesheet owns.
  • Provide a useful fallback when an image, relationship, or optional value is missing.

Do not assume that a field always contains a value simply because it exists in the definition. Existing posts may predate a newly added field, and editors can leave optional controls blank. A template that tests for empty values avoids empty headings, broken anchors, and unnecessary markup.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Keep presentation separate from data

The block definition should describe content and intentional choices; the template should decide the HTML structure; CSS should provide visual presentation. Avoid storing whole HTML fragments in a text field. Structured values are easier to validate, translate, redesign, and migrate.

Style and place the block

Add the block’s CSS in the theme or plugin that owns the block. A plugin-owned block should not depend on a particular theme’s stylesheet for basic readability. Theme-specific enhancements can be layered on top, but the block should remain usable if the theme changes.

Rank #3
New Bee Guitar Cable 10ft Electric Instrument Bass AMP Cord
  • [Low Noise High Fidelity] New bee guitar cord with 22AWG oxygen-free-copper center conductors provides enhanced signal transfer, the PVC insulation material and the high-density stranded copper double shield provide noise rejection for quiet operation
  • [Ideal for Choice] New bee 1/4 straight and right angle metal connectors, ensures a secure connection in any instrument, pedal, or amp jack. L shape great fro on stage guitar stands
  • [Wide Compatible] Suitable for mixer, power amplifier, microphone, effector, decoder, equalizer, electoronic organ, electric guitar, electric bass and other electronic equipments. Widely used in the installation of smart home, karaoke speaker, professional stage audio, etc
  • [Easy Disassemble] Making incidental repairs quick and easy! Very nice, flexible cable
  • [Dont Hesite to Order] 24 hours customer services and professional technology team are standing by

Insert the block in a post or page through the editor’s inserter, complete every required field, and preview both editor and front-end views. Check long headings, missing media, multiple instances on one page, narrow screens, keyboard navigation, and link focus states. If the block uses color or image choices, verify contrast and alternative text rather than judging only the editor preview.

Dynamic output and server-side rendering

Some blocks display values that can change after an editor saves the post: a current price, a related post title, a taxonomy label, or another server-side value. Treat that output as dynamic PHP rather than as permanently saved markup. WordPress’s dynamic-block guidance explains that a server-side rendering callback supplies the front-end HTML and that a dynamic block can use a null save function.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

In practice, keep the data lookup and conditional logic in the PHP rendering path, ensure the callback is registered for the block, and test what visitors see when the referenced object is edited, unpublished, or deleted. Do not cache a value in the block’s saved content if the block is supposed to reflect current data.

Keep the block portable

The official FAQ states that Genesis Custom Blocks can run without the Genesis Framework or another Genesis theme or plugin, provided the block editor is enabled. That makes it suitable for a site whose theme is not part of the Genesis product family.

For long-term portability, keep the block definition, PHP template, CSS, and any registration code in a plugin owned by the project. WordPress recommends registering custom blocks in a plugin so they remain available when a theme changes. A theme can still style the block, but the content model and rendering code should not disappear during a redesign.

Choosing an implementation approach

Decision Genesis Custom Blocks Hand-built JavaScript block
Authoring model Fields are configured in WordPress Admin and completed through a generated editor interface. The developer builds the editor controls and their behavior in JavaScript.
Rendering PHP templates retrieve field values and can render server-side output. The block commonly saves markup from the editor, or uses a custom server-side callback when dynamic behavior is required.
Data complexity Basic fields are available in the free plugin; Pro adds repeaters, relationships, taxonomy, users, posts, and richer text options. Any data model can be coded, but every control, validation rule, and migration path becomes part of the project.
Portability Definitions and templates can live in a plugin independent of the theme. Portability depends on where the custom registration and build output are maintained.
Maintenance Field names, slugs, and template conventions must stay synchronized as the block evolves. Editor code, saved markup, attributes, and migrations must stay compatible across releases.
Best fit Structured content forms that benefit from PHP and a small amount of custom code. Highly interactive editing experiences or controls that exceed a field-based model.

Neither model is automatically superior. Choose Genesis Custom Blocks when the editor experience can be expressed as fields and the team prefers server-rendered PHP. Choose a hand-built block when the editor itself requires complex interactions, custom state, or behavior that cannot be represented cleanly by configured fields.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #4
BSIMB 15.6" Digital Family Calendar & Chore Chart, No Subscription Fees
  • Digital Family Calendar: BSIMB digital calendar wall touch screen puts an end to your chaotic life. Designed for busy families, the digital calendar keeps you organised and in step with your family. Assign different colours and tasks to each family member to make family scheduling easier and more intuitive.
  • Easy Setup and Auto-Sync: Plug in, connect to WLAN and auto-syn your electric calendar in minutes. Digital wall calendar compatible with Google calendar, iCloud calendar, Outlook calendar, Cozi calendar and Yahoo calendar. Add events directly on the device or through the ecalendar app. Electronic calendar stays current whether you're at work or traveling—no manual updates needed.
  • All-In-One Home Assistant: Smart calendar builds habits and encourage independence with personalised chores. Display daily meal plan to reduce the daily ‘What's for dinner?’ stress. To-do lists keep track of everything you want. Turning chores into valuable achievements with stars and rewards, making life easier and more enjoyable.
  • Manage Anytime Anywhere: BSIMB electronic calendar for family stay connected with the powerful ecalendar app. Access and manage your digital wall calendar anytime, anywhere with free features like stars & rewards, photo screensaver, chore charts, meals plans, to-do lists etc. Electronic planner paid features like Magic Import tailor advanced tools for users with special needs.
  • Stay in Touch with Loved Ones: Share photos or videos from your phone to electronic wall calendar with app, instantly update your life moment, and keep in touch with your family, especially those who are far away; you can also surprise your smart calendar digital wall by sending him a wish card; it's also great for keeping tech-illiterate elders in touch with the youngsters.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Worked example: a staff profile block

A staff profile is a useful first block because its data model is clear and it exposes common edge cases.

  1. Create a block named “Staff profile” with a stable slug and an editor description.
  2. Add a text field for the person’s name and another for their role.
  3. Add an image field for the portrait and a textarea for the biography.
  4. Add an email field only if a public contact address is genuinely required.
  5. Add a URL field for a profile page and a separate text field for its link label.
  6. In the PHP template, render the name as the heading, the role as supporting text, the portrait only when an image is selected, and the biography only when it is non-empty.
  7. Escape every value in the context where it is printed, and omit the profile link when its URL is absent.
  8. Style the block in the owning plugin or a shared stylesheet, then test one complete profile, one profile without an image, and a page containing several profiles.

This example uses only free fields. A repeater becomes appropriate if one profile must contain a list of several offices, publications, or contact methods; otherwise, separate structured blocks or inner blocks may be easier for editors to understand.

Testing checklist before launch

  • Confirm the block appears in the inserter only where it is intended to be used.
  • Create a new instance with every field filled and verify the expected HTML.
  • Leave each optional field empty in turn and check that no empty wrapper or broken link remains.
  • Enter long text, unusual characters, and a URL containing query parameters to verify escaping and layout.
  • Test multiple instances on one page for class collisions and unintended shared state.
  • Check the editor preview, a saved front-end page, and a logged-out view.
  • Test keyboard navigation, focus visibility, heading order, image alternative text, and color contrast.
  • For relationship fields, edit, unpublish, and delete the referenced post, term, or user and observe the fallback.
  • Test the block after a theme switch on staging to confirm that plugin-owned rendering and baseline styles still work.
  • Back up production before changing a slug, removing a field, or moving a template.

Troubleshooting common failures

The block does not appear in the editor

Check that the plugin is active, the block editor is enabled for the current post type, and the block definition was saved. Clear any editor or object cache, then reload the editor. If the block is restricted by registration settings, verify that the current post type is allowed.

The block appears but shows no front-end output

Confirm that the template filename and location match the installed version’s convention and that the slug has not changed. Review the PHP error log on staging for syntax errors or calls to unavailable functions. A template that expects a field name different from the configured name can also produce empty output.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Values are empty or mismatched

Compare the field names used by the template with the names in the block definition, including capitalization and nesting. Existing content may not have values for fields added later. Add explicit empty-value handling instead of assuming every instance is complete.

An image or file link is broken

Check that the editor selected an attachment and that the template uses the value format returned by the documented field function. Verify the attachment still exists and that the output URL is escaped for an HTML attribute.

Dynamic data is stale

If the template reads a related post, term, user, or other changing value, ensure the block is rendered through the server-side path rather than relying on old saved markup. Purge page caches after confirming the rendering logic, and test again with the referenced object changed.

A redesign breaks the block

When markup disappears after a theme change, the implementation was probably tied to the old theme. Move the block definition, PHP template, and baseline CSS into a project plugin, then keep theme overrides limited to visual customization.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Maintaining blocks as they evolve

Treat a block’s slug and field names as an API. Before renaming or deleting one, search existing content and update the template and any migration code. Add new fields as optional first, supply sensible fallbacks, and only make them required after older instances have been accounted for.

Keep the definition, template, styles, and Pro import/export files under version control where possible. Document each field’s purpose, allowed values, default behavior, and whether it is safe to remove. Test plugin and WordPress updates on staging because editor APIs, PHP versions, and template conventions can change even when the block’s visible design has not.

Bottom line

Genesis Custom Blocks is a practical way to deliver structured Gutenberg blocks without building a React editor from scratch. Use the free fields for focused content models, add Genesis Pro only for repeaters or relationship-oriented data, keep templates and styles in a plugin for portability, and treat PHP output, escaping, dynamic references, and field-name stability as part of the block’s public contract.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
PC Slower Than It Used to Be?Free scan - under a minute
Crashes, No Sound, or Screen Glitches?Free driver scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.