Reverie: A WordPress Introduction Theme based on Foundation Framework

Reverie is a WordPress introductory theme based on the ZURB Foundation framework, which provides a solid foundation for theme development, including responsive mesh, typography, button styles and other components. Its lightweight and minimalist design can improve website performance.

Customized Reverie

You can modify CSS and PHP files directly or use WordPress customizer to make simpler changes. This theme supports sub-themes, allowing you to make changes without affecting the original theme file, making it easier to update the theme without losing custom settings.

Reverie is very friendly to developers and beginners who are familiar with basic HTML and CSS. It supports WooCommerce out of the box, supports multilingual website translation, and is compatible with all modern browsers. The theme also supports custom post types and is updated regularly to be compatible with the latest versions of WordPress and Foundation frameworks.

Key Decision Making: Sub-Theme

When customizing any basic or introductory theme, you need to evaluate whether a sub-theme is needed. If you want to keep the topic updated, you absolutely need to use a sub-theme. The main reason is that when you update the main theme, all the changes you make may be lost. If you are building a website for your customers, this can easily cause disaster.

On the other hand, if you don't want your customers to update the topics themselves and break all your hard work, you can disable the update using simple code snippets. This will prevent the user from updating the topic from the backend. Updates to themes and plugins can end up breaking the entire website, so you can disable them by adding the following to the functions.php file:

function remove_core_updates() {
  global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}
add_filter('pre_site_transient_update_core','remove_core_updates');
add_filter('pre_site_transient_update_plugins','remove_core_updates');
add_filter('pre_site_transient_update_themes','remove_core_updates');

Step after first installation

After installing the Reverie theme, you can see that it comes with a "custom" feature that allows you to preview basic changes such as background colors, background images, and widgets from the front end. Many popular themes have made detailed customizations to this area, and even refined them to font colors, font series, etc.

Create Reverie sub-theme

sub-theme works is to save files in separate folders, so when you update the main theme, files in separate folders are not touched. This means that all your hard work and custom designs are not erased every time you update the main theme.

Setting a sub-theme for Reverie is roughly the same as other topics. In the theme directory, you need to create a folder called "reverie-child". In it, you need to place a style.css file and a functions.php file. This is typical of any sub-theme. These files are required if you want to add your own custom features and custom styles.

In the style sheet of the sub-theme, you only need to follow the basic settings of the sub-theme CSS file:

/*
Theme Name: Reverie Child Theme
Description: Child theme for Reverie 
Author: James George
Template: reverie
*/

@import url("../reverie/style.css");

/* Start child theme customization below */

You can now add custom functions and styles to the new Reverie sub-theme.

This is a typical look after installing Reverie. If you want to customize the appearance, you need to add your custom CSS to the style.css file in the sub-theme folder.

The best way is to open the main-index.php file and the single-page.php file and view the structure. Be sure to pay attention to any special categories you want to focus on. In most cases, everything should be very simple and straightforward.

Another approach (and the method I chose) is to use Firefox's Firebug Inspector and Chrome's Inspect tools. It doesn't matter which tool you choose, they have almost the same functions. I personally prefer Firebug in Firefox. I can check an element and it will tell me the div ID and any attribute class that styles a specific element.

This is another great way to see how you build it, and it highlights the element when you hover over an item in the breakdown at the top of the Firebug window. You can see how the divs are nested, which can help you narrow down any issues you are trying to solve.

In the image above, you can see that the area of ??code you are viewing is highlighted in light blue. If there is a purple area, there is any fill. Yellow indicates any margin value applied. This is a great way to fine-tune any spacing problem and diagnose why the design is not built the way you want it to.

In the above example, if I want to style the author name, change its color, I can hover over it, right-click and select "Check Element". Then, in the code below you can see the div and class name, which is actually the span class of byline author.

Since the author name is a link, I can add an a at the end and select the active element:

function remove_core_updates() {
  global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}
add_filter('pre_site_transient_update_core','remove_core_updates');
add_filter('pre_site_transient_update_plugins','remove_core_updates');
add_filter('pre_site_transient_update_themes','remove_core_updates');

This changes the author link to orange. It's simple, but these are the basics of styling themes. Also, it's much easier than starting with a page of PHP, div, and classes — and trying to organize everything in your mind.

In the next article in the series, we will explore adding features to the Reverie topic. There is a lot of flexibility here and the possibilities are endless. Understanding the overall structure of the Reverie theme and how to manipulate its appearance will help you understand how to successfully build on it.

Reverie FAQ

• How is Reverie different from other WordPress introductory themes? What makes Reverie different from other WordPress introductory themes is its integration with the Foundation framework. This means it comes with responsive mesh, typography, button styles, and other components that are available immediately. It also includes custom navigation menus, widget areas and page templates, providing a solid foundation for theme development. Unlike many other introductory themes, Reverie is designed to be lightweight and minimalist, helping to improve website performance.

• How to customize Reverie theme? Reverie is highly customizable. You can modify CSS and PHP files directly, or use the WordPress customizer to make simpler changes. The theme also supports sub-themes, allowing you to make changes without affecting the original theme file. This makes it easy to update the theme without losing custom settings.

• Is Reverie suitable for beginners? Although Reverie is designed for developers, it is also suitable for beginners who are familiar with basic HTML and CSS. The topic's concise, well-annotated code makes it easy to understand how it works, and integration with the Foundation framework provides a lot of resources to learn more about web development.

• Does Reverie support WooCommerce? Yes, Reverie supports WooCommerce out of the box. This means you can easily build an online store on your website without installing additional plugins or themes. The theme also includes custom templates for several WooCommerce pages to give your website a consistent look and feel.

• How does Reverie's performance compare to other introductory topics? Reverie is designed to be lightweight and fast, helping to improve website loading time and overall performance. The minimalist design of this theme means it does not contain unnecessary features or bloated code that may slow down your website. This makes it an excellent choice for performance-oriented developers.

• Can I use Reverie for multilingual websites? Yes, Reverie supports translation and supports multilingual websites. This topic contains .po and .mo files that you can use to translate the topic into any language. It also supports WPML plug-in, which makes it easy to manage and switch different languages ??on your website.

• Is Reverie compatible with all browsers? Reverie is designed to be compatible with all modern browsers, including Chrome, Firefox, Safari, and Edge. This theme uses progressive enhancements to ensure it works properly even on older browsers, although some advanced features may not be available.

• Does Reverie support custom article types? Yes, Reverie supports custom article types. This means you can create different types of content on your website, such as blog posts, products, reviews, and more. The topic also includes several custom templates that show different post types, giving your website a consistent look and feel.

• How often does Reverie update? Reverie is updated regularly to ensure compatibility with the latest versions of WordPress and Foundation frameworks. These updates also include bug fixes, performance improvements, and new features based on user feedback.

• Is there any support for Reverie? Yes, Reverie is powered through its GitHub repository. You can report issues, request features, or contribute to the development of the topic. There are also a large number of documentation and tutorials on the theme website, as well as a community of users who can help answer questions and provide suggestions.

The above is the detailed content of Reverie: A Foundation Based WordPress Starter Theme. For more information, please follow other related articles on the PHP Chinese website!