- a theme partial you can drop into your theme and include anywhere, and
- a Block Pattern so editors can insert it from the block inserter.
Both use the compact no-JS card by default with a toggle that swaps to the official X timeline (loads widgets.js only after toggle).
1) Theme partial (drop-in)
Create template-parts/solveforce-on-x.php in your theme (or child theme) and paste:
<?php
/**
* Template Part: SolveForce on X — Compact Card + Timeline Toggle
* Usage: get_template_part('template-parts/solveforce-on-x');
*
* Props (filterable): sfx_args
*/
$args = [
'username' => 'solveforce',
'name' => 'SolveForce',
'bio' => 'Information Technology Solutions. Call (888) 765-8301 for price quotes on all products and services.',
'site' => 'https://solveforce.com',
'followers' => '870', // snapshot counts from your HTML
'following' => '873',
'posts' => '3502',
'avatar' => 'https://pbs.twimg.com/profile_images/1643156852463779840/AI0z5tX4_200x200.jpg',
'banner' => 'https://pbs.twimg.com/profile_banners/1573396622976815104/1703041773',
'height' => 650,
'theme' => 'light', // light|dark
'max_width' => '720px',
];
$args = apply_filters('sfx_args', $args);
$uid = 'sfx_' . wp_generate_uuid4();
?>
<div id="<?php echo esc_attr($uid); ?>" class="sfx-wrap" data-username="<?php echo esc_attr($args['username']); ?>" data-height="<?php echo esc_attr($args['height']); ?>" data-theme="<?php echo esc_attr($args['theme']); ?>">
<style>
#<?php echo $uid; ?> .sfx-card{border:1px solid #e9ecef;border-radius:14px;padding:18px;max-width:<?php echo esc_attr($args['max_width']); ?>;display:flex;gap:16px;align-items:center;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
#<?php echo $uid; ?> .sfx-media{position:relative;width:72px;min-width:72px}
#<?php echo $uid; ?> .sfx-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;border:1px solid #f0f0f0}
#<?php echo $uid; ?> .sfx-body{flex:1 1 auto}
#<?php echo $uid; ?> .sfx-name{font-weight:700;font-size:1.05rem;line-height:1.2}
#<?php echo $uid; ?> .sfx-handle{opacity:.6;font-weight:500;margin-left:.35rem}
#<?php echo $uid; ?> .sfx-bio{opacity:.9;margin:.4rem 0 .6rem}
#<?php echo $uid; ?> .sfx-meta{display:flex;gap:12px;opacity:.85;font-size:.95rem;flex-wrap:wrap}
#<?php echo $uid; ?> .sfx-meta span{white-space:nowrap}
#<?php echo $uid; ?> .sfx-actions{margin-top:.7rem;display:flex;gap:10px;flex-wrap:wrap}
#<?php echo $uid; ?> .sfx-btn{text-decoration:none;border:1px solid #1d9bf0;border-radius:999px;padding:.45rem .95rem;font-weight:600;font-size:.95rem;display:inline-block}
#<?php echo $uid; ?> .sfx-btn.secondary{border-color:#ced4da;color:#222}
#<?php echo $uid; ?> .sfx-embed{display:none;max-width:<?php echo esc_attr($args['max_width']); ?>}
#<?php echo $uid; ?> .sfx-toggle{cursor:pointer}
@media (prefers-color-scheme: dark){#<?php echo $uid; ?> .sfx-card{background:#fff}}
</style>
<div class="sfx-card" aria-label="SolveForce on X compact profile">
<div class="sfx-media">
<img class="sfx-avatar" src="<?php echo esc_url($args['avatar']); ?>" alt="<?php echo esc_attr($args['name']); ?> avatar">
</div>
<div class="sfx-body">
<div class="sfx-name">
<?php echo esc_html($args['name']); ?>
<span class="sfx-handle">@<?php echo esc_html($args['username']); ?></span>
</div>
<div class="sfx-bio"><?php echo esc_html($args['bio']); ?></div>
<div class="sfx-meta" aria-label="Account stats (snapshot)">
<span>Followers: <?php echo esc_html($args['followers']); ?></span>
<span>Following: <?php echo esc_html($args['following']); ?></span>
<span>Posts: <?php echo esc_html($args['posts']); ?></span>
</div>
<div class="sfx-actions">
<a class="sfx-btn" href="https://x.com/<?php echo esc_attr($args['username']); ?>" target="_blank" rel="noopener">Open on X</a>
<a class="sfx-btn secondary sfx-toggle" role="button" aria-expanded="false">Show Timeline</a>
<a class="sfx-btn secondary" href="<?php echo esc_url($args['site']); ?>" target="_blank" rel="noopener">Visit Website</a>
</div>
</div>
</div>
<div class="sfx-embed" aria-hidden="true">
<a class="twitter-timeline"
data-height="<?php echo esc_attr((int)$args['height']); ?>"
data-theme="<?php echo ($args['theme'] === 'dark') ? 'dark' : 'light'; ?>"
href="https://x.com/<?php echo esc_attr($args['username']); ?>">
Tweets by @<?php echo esc_html($args['username']); ?>
</a>
</div>
<script>
(function(){
var wrap=document.getElementById('<?php echo esc_js($uid); ?>'); if(!wrap) return;
var toggle=wrap.querySelector('.sfx-toggle'), card=wrap.querySelector('.sfx-card'), embed=wrap.querySelector('.sfx-embed'), loaded=false;
function loadWidgets(cb){
if (document.querySelector('script[src*="platform.twitter.com/widgets.js"]')) { cb && cb(); return; }
var s=document.createElement('script'); s.async=true; s.src='https://platform.twitter.com/widgets.js'; s.charset='utf-8'; s.onload=cb||null; document.body.appendChild(s);
}
function showEmbed(){ embed.style.display='block'; embed.setAttribute('aria-hidden','false'); toggle.textContent='Show Card'; toggle.setAttribute('aria-expanded','true'); if(!loaded){ loadWidgets(function(){loaded=true;}); } else if (window.twttr && twttr.widgets && twttr.widgets.load){ twttr.widgets.load(embed); } card.style.display='none'; }
function showCard(){ card.style.display='flex'; toggle.textContent='Show Timeline'; toggle.setAttribute('aria-expanded','false'); embed.style.display='none'; embed.setAttribute('aria-hidden','true'); }
toggle.addEventListener('click', function(e){ e.preventDefault(); (embed.style.display==='block') ? showCard() : showEmbed(); }, {passive:true});
})();
</script>
</div>
Use it anywhere in your theme:
<?php get_template_part('template-parts/solveforce-on-x'); ?>
Override defaults in one place (functions.php):
add_filter('sfx_args', function($a){
$a['theme'] = 'dark';
$a['height'] = 700;
return $a;
});
2) Block Pattern (one-click in the editor)
Drop this in functions.php (or a small mu-plugin). It registers a pattern named “SolveForce on X” that inserts the partial via a Shortcode block (if you prefer, swap the content to a Template Part block pointing at your partial).
add_action('init', function () {
if ( function_exists('register_block_pattern') ) {
register_block_pattern(
'solveforce/solveforce-on-x',
[
'title' => __('SolveForce on X', 'solveforce'),
'description' => __('Compact profile card with a toggle to the official X timeline embed.', 'solveforce'),
'categories' => ['widgets', 'embed'],
'content' => "<!-- wp:shortcode -->[solveforce_x]<!-- /wp:shortcode -->"
]
);
}
});
If you’d rather not use the shortcode, change
contentto a Template Part block:
'content' => '<!-- wp:template-part {"slug":"solveforce-on-x","theme":"YOUR_THEME_SLUG"} /-->',
and make sure the partial is saved as a Template Part (Site Editor → Template Parts → Add New) with slug
solveforce-on-x.
Already have the shortcode?
Great—your earlier shortcode plugin works as-is. The partial above mirrors it (no dependency), and the Block Pattern makes it truly one-click for editors.
Want me to auto-hydrate the snapshot stats from the JSON-LD in that HTML you pasted? I can add a tiny server-side parser that updates the snapshot daily (with a transients cache) while keeping the front-end no-JS.
Plugin Name: SolveForce on X — Profile Card + Embed Toggle – SolveForce Communications
Key terms in plain language
Open a term for a concise explanation of language used on this page.
VoIP
Voice over Internet Protocol carries phone calls over an IP network instead of a traditional analog phone line. Call quality depends on network stability, latency, and traffic management.
Unified Communications (UCaaS)
A cloud-based combination of business calling, messaging, meetings, presence, and collaboration tools managed as one communications service.
SIP Trunking
A service that connects a business phone system to the public telephone network using Internet Protocol, replacing or supplementing traditional phone lines.
Bandwidth
The amount of data a connection can carry in a given time, usually measured in Mbps or Gbps. More bandwidth supports more users, devices, and simultaneous applications.
Latency
The time it takes data to travel between two points. Lower latency improves voice, video meetings, cloud applications, gaming, and other real-time services.
Service-Level Agreement (SLA)
A provider’s written commitment covering service targets such as availability, response time, repair time, and sometimes financial credits when commitments are missed.