Add new google fonts to Visual Composer Custom Heading

100%

Add new google fonts to Visual Composer Custom Heading

✓ Published0🌍 Public

Last edited Sep 19, 2016

Created on Jul 18, 2020

This example shows how to extend Visual Composer’s built-in Google Fonts list by registering a custom font family through a WordPress filter. The code defines a `helper_vc_fonts` function that constructs a font object with properties like `font_family`, `font_types`, and `font_styles`, then appends it to the existing `$fonts_list` array. It relies on the `vc_google_fonts_get_fonts_filter` hook and the `esc_html_e` localization function. The implementation uses PHP only, with no JavaScript libraries, and returns the modified list to add Poppins with multiple weights to the editor’s font selector.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist e8b9d80ee94b66b0f0841e786da0d172

This visualization demonstrates how to extend WordPress’s MIME type validation to support WebP image uploads. It shows a code snippet that defines a custom function, `webp_upload_mimes`, which adds the `webp` extension with its associated MIME type to the existing allowed upload types. The example relies on WordPress’s `add_filter` function and the `mime_types` filter hook to modify the system’s default behavior. The code is written in PHP and presents a direct, filter-based approach for integrating WebP support into a WordPress media library.

KKopylovVitalik

54% match

Loading thumbnail…

Gist 23705f481029d7e1cb22973540188d19

This snippet demonstrates a WordPress performance optimization technique by filtering the `style_loader_tag` hook to modify how stylesheet links are rendered. It shows the `add_rel_preload` function, which replaces standard `<link>` tags with preload directives that include an `onload` handler to swap `rel='preload'` to `rel='stylesheet'`, enabling asynchronous CSS loading. The code uses WordPress PHP APIs (`add_filter`, `is_admin`) and outputs a heredoc string with the HTML. It explicitly avoids altering output in the admin panel, targeting front-end performance only.

KKopylovVitalik

49% match

Loading thumbnail…

CSS Neon Text with Google Font

A neon sign effect renders the text "Hello HTML" in large, glowing letters using CSS text shadows and the Google Font "Bungee Inline." The page sets a dark background and applies layered text-shadow values to create a multi-colored glow, with pink and blue hues. The example demonstrates styling text purely through CSS properties, including font-family, letter-spacing, and text-shadow, without any JavaScript. It loads the font via the Google Fonts API and uses inline CSS in a single HTML file.

RRussell Watson

49% match

Loading thumbnail…

Gist ad405e427fedfdfff3b391b2488371c8

This example demonstrates how to dynamically replace Yoast SEO title placeholders with actual post data for display in a visualization. It shows the process of retrieving a custom title from post metadata, falling back to default SEO title settings or the post title if none exists, then applying variable substitution. The code uses WordPress functions like `get_post_meta()`, `wpseo_replace_vars()`, and `get_option()` to handle the logic, ultimately echoing the final processed title. The rendering approach relies on server-side PHP within a WordPress environment, not on client-side visualization libraries.

KKopylovVitalik

48% match

Loading thumbnail…

Base CSS document with google fonts, Eric Meyer's reset.css, Ethan Schoonover's solarized palette and some basic responsive code.

This example demonstrates a clean, typography-focused HTML/CSS foundation for a data-visualization project. It imports the "Roboto Slab" and "Exo 2" fonts via Google Fonts, resets default browser styling with Eric Meyer's reset.css, and applies Ethan Schoonover's Solarized color palette. The code uses standard CSS properties, including a responsive `.container` class with a media query for narrow screens, and sets up basic typography and spacing for a chart area. It does not implement any JavaScript or dynamic visualizations, serving only as a base stylesheet for future graphical work.

AAbsarF

48% match

Loading thumbnail…

Gist a3008238e5a13ba6b6d46e0c53687342

This example demonstrates WordPress SEO canonical URL handling for paginated pages through a PHP snippet. It shows how to enforce the first page URL as the canonical link for all paginated views, overriding the default per-page canonical generated by Yoast SEO. The implementation uses the `wpseo_canonical` filter with a callback function, while conditionally applying it via `is_paged()` and registering it through `wpseo_head`. The code relies on WordPress core functions like `get_pagenum_link()` and the `add_filter()` API to modify SEO output.

KKopylovVitalik

47% match

Loading thumbnail…

Gist bd978df74840af0f424ab50974f8489a

This example demonstrates how to integrate a specific version of jQuery with WordPress and Webpack. It shows two configuration steps: first, deregistering the default WordPress jQuery in `functions.php` via `wp_deregister_script` and an `init` action, and second, excluding jQuery from the bundle using `externals` in `webpack.config` while injecting it with `webpack.ProvidePlugin`. The code also references registering a newer jQuery version through WordPress hooks.

KKopylovVitalik

47% match

Loading thumbnail…

Gist 1b1889baaec2adffe574

This example demonstrates a WordPress theme’s strategy for optimizing CSS delivery by inlining critical styles and asynchronously loading the full stylesheet. It shows how PHP hooks like `wp_head` and `wp_footer` conditionally inject scripts, styles, and a cookie-based cache check. The code uses `file_get_contents` to embed JavaScript files such as `loadCSS.js` and `onloadCSS.js`, alongside a `<style>` block for critical CSS. A `noscript` fallback ensures the full stylesheet loads without JavaScript. The implementation relies on the `Roots\Sage\Assets` namespace and functions like `asset_path()` to resolve file paths.

GGolodhros

46% match