How to Display 3D Models on a WordPress Site Using a Sketchfab Embed

Why use Sketchfab with WordPress?

• Present 3D models interactively on your portfolio, gallery, or project site.
• Keep files hosted securely and optimized for web delivery.
• Add annotations or rotations to explain key features.
• Leverage WordPress plugins for enhanced functionality and customization.

Step 1. Create a Sketchfab account

1. Go to Sketchfab.
2. Click Sign Up in the top-right corner.
3. Choose Google, Apple, or email registration.
4. The free plan supports most personal and portfolio uses.

Step 2. Upload your 3D model

1. Once logged in, click your profile icon → Upload.
2. Drag and drop your .glb file, or browse to select it.
3. Add a title, description, and optional tags.
4. Choose whether to make the model public or private.
5. Click Continue—processing can take a few minutes depending on size.
6. When processing finishes, Sketchfab will generate an interactive preview of your model.

Step 3. Adjust the 3D viewer settings

1. Click Edit 3D Settings on your model page.
2. Experiment with the following settings:

3. Save your changes.

Step 4. Copy the embed code

1. From the model page, click Share → Embed.

2. Copy the <iframe> code. It looks similar to:

<div class="sketchfab-embed-wrapper">
<iframe 
  title="Potted Cactus" 
  frameborder="0" 
  allowfullscreen 
  mozallowfullscreen="true" 
  webkitallowfullscreen="true" 
  allow="autoplay; fullscreen; xr-spatial-tracking" 
  xr-spatial-tracking 
  execution-while-out-of-viewport 
  execution-while-not-rendered 
  web-share 
  src="https://sketchfab.com/models/3f89b0c4108f46738dee5915a72224d4/embed">
</iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
  <a href="https://sketchfab.com/3d-models/potted-cactus-3f89b0c4108f46738dee5915a72224d4?utm_medium=embed&utm_campaign=share-popup&utm_content=3f89b0c4108f46738dee5915a72224d4" 
     target="_blank" 
     rel="nofollow" 
     style="font-weight: bold; color: #1CAAD9;">
    Potted Cactus
  </a> 
  by 
  <a href="https://sketchfab.com/museumscan?utm_medium=embed&utm_campaign=share-popup&utm_content=3f89b0c4108f46738dee5915a72224d4" 
     target="_blank" 
     rel="nofollow" 
     style="font-weight: bold; color: #1CAAD9;">
    museumscan
  </a> 
  on 
  <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=3f89b0c4108f46738dee5915a72224d4" 
     target="_blank" 
     rel="nofollow" 
     style="font-weight: bold; color: #1CAAD9;">
    Sketchfab
  </a>
</p>
</div>

Step 5. Embed the model in WordPress

Method 1: Using the HTML Block (Gutenberg Editor)

1. In your WordPress admin, go to Posts or Pages → Add New.
2. Click the + button to add a new block.
3. Search for and select HTML block.
4. Paste the complete Sketchfab <iframe> code into the HTML block.
5. Click Preview to see how it looks, then Publish.

Method 2: Using the Classic Editor

1. In the Classic Editor, switch to Text mode (not Visual).
2. Paste the complete Sketchfab <iframe> code where you want the model to appear.
3. Switch back to Visual mode to see a preview.
4. Click Update or Publish.

Step 6. Customize the display

Responsive Design

.sketchfab-embed-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.sketchfab-embed-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}

Theme Integration

• Add the CSS above to your theme's style.css file or use the WordPress Customizer.
• For full-width layouts, wrap your embed in a container with appropriate margins.
• Consider adding captions or descriptions below the model for context.

Adjusting Embed Size

<div class="sketchfab-embed-wrapper" style="width: 60%; max-width: 100%; max-height: 100%; margin: 0 auto; position: relative; aspect-ratio: 16 / 9">
    <iframe 
      title="Potted Cactus" 
      frameborder="0" 
      allowfullscreen 
      mozallowfullscreen="true" 
      webkitallowfullscreen="true" 
      allow="autoplay; fullscreen; xr-spatial-tracking" 
      xr-spatial-tracking 
      execution-while-out-of-viewport 
      execution-while-not-rendered 
      web-share 
      src="https://sketchfab.com/models/3f89b0c4108f46738dee5915a72224d4/embed"
      style="width: 100%; height: 100%; display: block;">
    </iframe>

• width: 60% - Sets the container width (adjust percentage as needed)
• max-width: 100% - Prevents overflow on smaller screens
• aspect-ratio: 16 / 9 - Maintains consistent proportions
• margin: 0 auto - Centers the embed horizontally

Step 7. Publish and verify

1. Click Publish or Update in WordPress to save your changes.
2. Visit the live page and confirm the Sketchfab viewer loads correctly.
3. Test on different devices and browsers to ensure compatibility.
4. Rotate, zoom, and inspect the model—performance and lighting should match your Sketchfab preview.
5. If the viewer doesn't appear, check the following:

Advanced WordPress Integration

Using Custom Fields

1. Install Advanced Custom Fields (ACF) plugin.
2. Create a field group for 3D models.
3. Add fields for Sketchfab URL, title, description, and embed code.
4. Use ACF functions in your theme to display models consistently.

Creating a 3D Gallery

• Use WordPress's built-in gallery functionality with custom post types.
• Create a custom page template to display multiple models in a grid.
• Add filtering and search capabilities using plugins like Ivory Search.

Troubleshooting Common Issues

Model Not Displaying

• Security plugins: Some security plugins block iframe embeds. Whitelist sketchfab.com domains.
• Theme conflicts: Switch to a default theme temporarily to test.
• JavaScript errors: Check browser console for errors that might prevent loading.

Performance Issues

• Lazy loading: Use plugins like Lazy Load to defer 3D model loading until needed.
• Caching: Ensure your caching plugin doesn't interfere with dynamic content.
• Mobile optimization: Consider using lower-resolution models for mobile devices.

Summary checklist

• ✅ Upload your .glb file (2K recommended) to Sketchfab.
• ✅ Configure lighting and annotations.
• ✅ Copy the embed iframe.
• ✅ Choose embedding method (HTML block, Classic editor, or plugin).
• ✅ Add responsive CSS for mobile compatibility.
• ✅ Publish and test across devices.