# WordPress ## Getting Started ## Create a connection 1. Sign in to [OpenGraph+](/) 2. Go to your website's **Meta Tags** page 3. Create a new connection and copy your connection URL Your connection URL looks like `https://$OGPLUS_KEY.ogplus.net`. ## Find your theme header Open your theme's `header.php` file. You can find it at: - **Appearance → Theme File Editor** → select `header.php` - Or edit the file directly at `wp-content/themes/your-theme/header.php` ## Add Open Graph meta tags Add the following inside the `` tag in `header.php`: ```php ``` Replace `https://$OGPLUS_KEY.ogplus.net` with your actual connection URL. ### Tag reference | Tag | Value | Source | |-----|-------|--------| | `og:title` | Current page/post title, falls back to site name | `wp_title()` / `get_bloginfo('name')` | | `og:description` | Post excerpt (trimmed to 30 words) or site tagline | `get_the_excerpt()` / `get_bloginfo('description')` | | `og:url` | Full canonical URL of the current page | `home_url()` + `$_SERVER['REQUEST_URI']` | | `og:site_name` | Your WordPress site name | `get_bloginfo('name')` | | `og:type` | `article` for posts/pages, `website` for archives/home | `is_singular()` | | `og:image` | Dynamic social card image from OpenGraph+ | Connection URL + page path | | `twitter:card` | Always `summary_large_image` for large preview cards | Static value | ## What each function does - **`wp_title('', false)`** - returns the current page or post title without echoing it - **`get_the_excerpt()`** - returns the post excerpt, or auto-generates one from the content - **`wp_trim_words()`** - trims text to a word count (30 words keeps descriptions concise) - **`is_singular()`** - returns true on single posts and pages, used to set `og:type` to `article` - **`home_url()` + `$_SERVER['REQUEST_URI']`** - builds the full canonical URL - **`get_bloginfo('name')`** - your site name from Settings → General - **`get_bloginfo('description')`** - your site tagline from Settings → General ## Child theme recommended If you're using a third-party theme, create a [child theme](https://developer.wordpress.org/themes/advanced-topics/child-themes/) first so your changes survive theme updates. ## Remove conflicting plugins SEO plugins like Yoast, All in One SEO, and RankMath set their own Open Graph tags. If you have one installed, you may get duplicate meta tags. Either: - Disable the social/Open Graph feature in your SEO plugin - Add the OpenGraph+ meta tags through the plugin's custom meta tag feature instead ## Verify Open the preview tool in your OpenGraph+ dashboard and paste a URL from your site. View your page source and confirm all Open Graph meta tags are present with correct values. ## Customize OpenGraph+ captures your page in a headless browser and renders it as an image. You control what gets captured using meta tags in your theme and CSS in your stylesheets. All of the rendering options below are standard HTML meta tags and CSS, so they work the same regardless of framework. The [HTML, CSS, & HTTP guide](/docs/html-css) covers each one in detail. This page shows how to wire them into a WordPress site. ## Meta tags Add these to your theme's `header.php` inside the `` tag alongside your `og:image` tag. They're all optional. ```php ``` See the [Rendering](/docs/html-css/rendering) guide for what each meta tag does and how they interact. ## CSS styling OpenGraph+ adds a `data-ogplus` attribute to your `` element during capture. Use it in your stylesheets to hide navigation, adjust spacing, or restyle anything for the social card without affecting your actual site. Add the following to your theme's `style.css` or via **Appearance > Customize > Additional CSS**: ```css html[data-ogplus] { .site-header { display: none; } .site-footer { display: none; } .sidebar { display: none; } .entry-content { padding: 60px; } } ``` If you're using Tailwind, there's a plugin that gives you `ogplus:` variants like `ogplus:hidden` and `ogplus-twitter:bg-sky-500`. See [CSS Styling](/docs/html-css/data-attributes) for plain CSS examples and [Tailwind setup](/docs/html-css/data-attributes#tailwind-css). ## Templates For fully custom social card layouts that pull content from your page, use `