zgordon
/ alignwide.css
Created
February 12, 2018 07:41
This example shows how we can apply a width (and max-width) of 75% to any blocks that are set to wide width.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .alignwide { | |
| max-width: 75%; | |
| width: 75%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } |
zgordon
/ fixed-width-to-non-wide-and-full-width-blocks.css
Created
February 12, 2018 07:25
This example shows how you can select all elements within the main .entry-content area and set them to have fixed with and centered layout.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .entry-content > *:not( .alignwide ):not( .alignfull ) { | |
| max-width: 50%; | |
| width: 50%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } |
zgordon
/ twentyseventeen-setup-example.php
Last active
February 12, 2018 04:17
This example the twenty seventeen theme twentyseventeen_setup function that includes various add_theme_support options with add_theme_support( 'align-wide' ) included at the end.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Sets up theme defaults and registers support for various WordPress features. | |
| * | |
| * Note that this function is hooked into the after_setup_theme hook, which | |
| * runs before the init hook. The init hook is too late for some features, such | |
| * as indicating support for post thumbnails. | |
| */ | |
| function twentyseventeen_setup() { |
zgordon
/ add-theme-support-for-wide-and-full-width-blocks.php
Last active
February 12, 2018 03:48
This will add theme support for wide and full width blocks in the Gutenberg editor. This does not include the necessary CSS to style these blocks properly on the front end.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| add_theme_support( 'align-wide' ); | |
zgordon
/ wide-align-block-support.php
Created
January 11, 2018 02:16
Example of how to include wide align support for Gutenberg blocks in your WordPress Theme.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Wrapper function for add_theme_support setup | |
| function mytheme_setup_theme_supported_features() { | |
| // Add theme support for wide align blocks | |
| add_theme_support( 'align-wide' ); | |
| } | |
| // Hook wrapper function into WP once theme is ready |
zgordon
/ wp.i18n.__.js
Last active
November 8, 2018 21:06
How to work with the __() internationalization feature in Gutenberg.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Deconstruct just the __ function from wp.i18n global object | |
| const { __ } = wp.i18n; | |
| // Just pass in the text to make it available for translation | |
| __( 'This text can be translated', 'textdomain' ); | |
| // If used within JSX, you may need to do something like this | |
| { __( 'Translate my JSX string', 'textdomain' ) } |
zgordon
/ block-template.php
Last active
January 7, 2024 05:16
Example of how to add block templates to post types in WordPress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function mytheme_block_templates( $args, $post_type ) { | |
| // Only add template to 'post' post type | |
| // Change for your post type: eg 'page', 'event', 'product' | |
| if ( 'post' == $post_type ) { | |
| // Optionally lock templates from further changes | |
| // Change to 'insert' to allow adding other blocks, but lock defined blocks |
zgordon
/ adding-css-to-wordpress-theme.php
Created
January 1, 2018 23:42
A simple example of Adding CSS to WordPress Theme Via functions.php File
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Load the theme stylesheets | |
| function theme_styles() | |
| { | |
| // Example of loading a jQuery slideshow plugin just on the homepage | |
| wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' ); | |
| // Load all of the styles that need to appear on all pages | |
| wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' ); |
zgordon
/ gutenberg-tooltip-example.jsx
Last active
October 12, 2018 10:57
An example of how to use the Tooltip component in Gutenberg. Place the code inside of your block edit setting.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { | |
| Button, | |
| Dashicon, | |
| Tooltip, | |
| } = wp.components; | |
| // Wrap the Tooltip component around whatever you want to activate the tooltip on hover | |
| <Tooltip | |
| text={ __( 'Add Tooltip Text Here' ) } | |
| > |
zgordon
/ gutenberg-color-pallete-wide-images-theme.php
Last active
December 30, 2017 18:24
Add theme support and set a color palette for all blocks as well as include theme support for wide-images
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| add_theme_support( 'gutenberg', [ | |
| 'wide-images' => true, | |
| 'colors' => [ | |
| '#556270', | |
| '#4ECDC4', | |
| '#C7F464', | |
| '#FF6B6B', | |
| '#C44D58', | |
| ] |