Renders a custom TrObjectSelector component inside the block The type we would use inside the schema’s field_meta property to render this field is “object_selector”: "type": "object_selector" If you haven’t already, we suggest you read the “model.json file” and...
Renders an Image Selector component inside the block. The type we would use inside the schema’s field_meta property to render this field is “image”: "type": "image" If you haven’t already, we suggest you read the “model.json file” and “Field Types” pages...
Renders a Classic Editor (WYSIWYG field) instance inside the block. We would use this Field Type for managing longer forms of textual data that will need formatting. An example use case would be a description part of the section, for which we want to allow dynamic HTML elements and formatting. The type we...
Renders Gutenberg’s ColorPalette component inside the block. The type we would use inside the schema’s field_meta property to render this field is “color”: "type": "color" If you haven’t already, we suggest you read the “model.json file” and “Field...
Renders a checkbox control inside the block. The type we would use inside the schema’s field_meta property to render this field is “checkbox”: "type": "checkbox" If you haven’t already, we suggest you read the “model.json file” and “Field Types” pages before...
Renders a number control inside the block. The type we would use inside the schema’s field_meta property to render this field is “number”: "type": "number" If you haven’t already, we suggest you read the “model.json file” and “Field Types” pages before...
Model.json is the most important and required file for creating blocks in the theme-redone framework. It is a JSON file that we use to write the Schema for the block we are working with. By Schema, we basically mean a configuration, that the framework will use to build the block and its fields. As said...
Renders a CTA component (with the URL & optional Title and Target fields) inside the block. The type we would use inside the schema’s field_meta property to render this field is “cta”: "type": "cta" If you haven’t already, we suggest you read the “model.json file” and...
Renders a text control inside the block. We would use this Field Type for managing simple textual data. The type we would use inside the schema’s field_meta property to render this field is “text”: "type": "text" If you haven’t already, we suggest you read the “model.json...
As briefly mentioned in the previous article (WordPress Template Files), we are not using default WP’s get_header() and get_footer() functions. Since we are using latte as a templating engine, we’ve created header.latte and footer.latte template parts that live /views/layout to stay consistent...
How do we handle WordPress template files: front-page.php, home.php, single.php, and all the remaining default WP template files? In theme-redone, we would handle these files very similarly as we’ve been always been doing it any other theme, with just one difference. The place where these files would...
Gutenberg Block in the context of WordPress It is a reusable UI block (section), that we can reuse, duplicate, and usually style differently to suit our needs. The days of the old Classic Editor have long passed, and we are now building websites in a component-based manner. This helps us create different...
{tr_posted_on($post_id, $with_last_updated)} Prints the publish date, and optionally the date when the post was modified as well Arguments: $post_id. If we are using this function inside our custom loops. We need to pass the ID of the post. Optional, Type: INT or false, Default: false. $with_last_updated....
tr_get_media is a helper function that makes it easier to render images and SVGs synchronously or asynchronously. It accepts two arguments: tr_get_media($media, $async) $media can be either a path string to the image/SVG or an associative array containing “src” and “alt” (alt is...
{tr_get_soc_name($soc_media_link)} Returns the social media name based on the URL provided, or false if nothing matches Supported platforms (return values) are: 'facebook' 'instagram' 'twitter' 'youtube' 'linkedin' 'pinterest' false Twitter example {tr_get_soc_name('https://twitter.com/webredone')} {*...
{tr_social_share($soc_name)} Generates a social media share link Takes one of these four string options: 'facebook' | 'twitter' | 'linkedin' | 'pinterest' | 'email' as an argument, and prints the link for sharing the current page. Example Here we are passing 'facebook' as an argument. (Let’s assume we...
{* $hexadecimal_color - type: string, example: '#ffffff', needs to have 6 characters *} {tr_hex_to_rgb($hexadecimal_color)} Converts HEX to RGB Takes a 6 characters hexadecimal color as an input and prints a string representation of its RGB format. For example: {tr_hex_to_rgb('#ffffff')}, would echo...
{tr_is_ie()} Detects if the browser is Internet Explorer and returns true/false. Even tho we don’t support IE, this function can still be useful if we want to show a message to a user to switch to a more modern browser, for...
Theme Redone uses a combination of Gulp, SASS, EsBuild, and WebPack to compile and bundle CSS and JS. Here’s how it’s set up. Gulp as a task runner We use Gulp 4 to define and run various front-end and back-end tasks such as compilation, bundling, minification, CSS injecting and page refreshing...
