Design Bites Theme for YOOtheme Pro

Susann
April 22, 2020
Themes

Curtain up for our new Joomla and WordPress theme package for YOOtheme Pro – Design Bites. It's our first demo website which makes use of all the new features of YOOtheme Pro 2.0 – dynamic content, custom fields and the template builder. Design Bites is a design resources directory filled with 140+ demo posts. Its trendy colorful blob shapes in the background give the site a playful creative look. With its material style, vibrant colors and bold typography, Design Bites is perfect for a resource or download directory as well as any creative website. Check it out yourself. We have also great news for WordPress users, the YOOtheme Pro 2.0 Stable release is available now 🥳🎉.

Page Layouts

Design Bites is a website for design resources which comes with 9 different layouts. Resources posts styled as cards give the site a clean, organized look, while a vibrant call to action newsletter at the end of every layout draws attention of the visitors.

Home

Resources

Resource Category

Resource Index

Resource Post

About

Post Index

Post

Imprint

Here is a detailed description of all layouts.

Page	Type	Description
Home	Page	Presents the latest and most popular design resources as well as all resource categories in different sections.
Resources	Page	Shows an overview of all resources categories and their latest resources in 4-column grids.
Resource Category	Template	Shows an overview of all sub categories as well as poster images of all design resources from a category in a 4-column grid layout.
Resource Index	Template	Shows an overview of all poster images of all design resources from a category in a 4-column grid layout.
Resource Post	Template	Shows the resource with further information about it, download link as well as related design resources.
About	Page	Introduces company's philosophy, license and FAQ.
Post Index	Template	Displays featured news in a 2-column layout followed by the rest of the news in a 4-column grid layout.
Post	Template	Introduces the post with a hero image. The meta data and the author's name appear right under the title of the post.
Imprint	Page	Shows legal information about Design Bites.

Styles

Our new theme has a modern material style with box shadows, rounded borders and a bold secondary color. Its vivid color scheme gives it a playful spring look. In addition, thick headlines and thin text typography with a sans-serif font make Design Bites a perfect fit for a creative website.

In addition to the default style, Design Bites comes with 5 other style variations, each with a different beautiful color scheme. They all have a white background with vivid foreground colors. You can switch the whole look and feel of your website with just a click. Choose the one that fits your website best!

White Green

White Yellow

White Turquoise

White Orange

White Lightgreen

Handmade Icons

We also handcrafted illustrations that are used as intro images for all categories of our Design Bites theme. You can change their color and use them with any style.

Background Blobs

Blobs are an absolute design trend right now, so we could not miss the chance to incorporate them in our new theme. Design Bites uses these playful, colorful blobs all over the site. Absolutely positioned in the background and with a slight parallax effect and gradients, blobs are an important part of the look and feel of our new theme.

Content Types and Custom Fields

In addition to the blog and its posts, Design Bites comes with pages and templates for design resources filled with 140+ demo posts. In Joomla this content type is created by assigning custom fields to the Resource category, while in WordPress a Resource custom post type is used.

Resources

Design resources are organized in a two-level category hierarchy. There are 120 design resources sorted into 6 main resources categories: Fonts, Brushes, Vectors, Graphics, Mockups and UI Kits. Each category has up to 5 subcategories.

The first-level resource categories have 2 custom fields which are dynamically mapped into the home page.

Category Field	Type (J)	Type (WP)	Description
Intro Image	media	image	The teaser icon used on the home page
Intro Image Alt Text	text	-	The teaser icon alt text

The resource post type has 8 custom fields which are dynamically mapped into category and single post templates.

Post Field	Type (J)	Type (WP)	Description
Intro Image	-	image	The intro image of the resource
Images	repeatable	repeater	Additional images shown after the full article/featured image with image and image alt text fields
Format	list	select	The format selected from a predefined list (`ttf`, `otf`, …)
Licence	list	select	The license selected from a predefined list (`CC0`, `CC BY`, …)
Creator Name	text	text	The creator name
Creator Image	media	image	The creator avatar
Download	media	file	A link to the download file
Related Resources	articles	relationship	A handpicked list of related resources

Blog Post

By the way, we added another custom field to the default post type that shows the intro image in the blog overview.

Field	Type (WP)	Description
Intro Image	image	The teaser image of the post

Free Quality Stock Images

Design Bites comes with 185+ lovingly curated and free-to-use images. Take a look at some of them below. These images can be found in the Design Bites collection in the Unsplash library.

More than 185 lovingly curated and free-to-use images

3rd Party Integrations

With the use of dynamic content, it got more important to us that our demo websites are fully functional solutions and are built the best way possible. This is why we put an extra effort, especially into the WordPress demo package. WordPress has great possibilities to organize content with custom post types and taxonomies but falls short in other features which Joomla has by default. Getting the best result took us a bit longer, but it is definitely worth the wait.

First, we converted articles and categories from Joomla to WordPress custom post types that have their own taxonomies and custom fields. That's the best way to organize your content. To add the missing features we also integrated popular WordPress plugins into YOOtheme Pro and the demo packages. But one thing is still missing. There is no option to show popular posts in WordPress, which is why the ordering is currently set to Id. But we are looking into some 3rd party plugins and will add support very soon.

Here is an overview of all pre-installed and activated plugins in the WordPress and Joomla demo packages.

Plugin	System	Feature	Documentation
Advanced Custom Fields	WordPress	Create custom fields	View
Custom Post Type UI	WordPress	Create custom post types and taxonomies	View
Advanced Posts per Page	WordPress	Define the number of posts per page for custom post types, taxonomies, the search, date and author archives	View
Category Order and Taxonomy Terms Order	WordPress	Manually sort terms, e.g. categories	View
Articles Field	Joomla	Tease related articles and link them	View

Important Notes

Currently, the Design Bites layouts are not available in the layout library. This is because their content is loaded dynamically, and most of the mapped custom fields, content sources or handpicked articles and categories will not be available in your installation. But we are working on a solution to convert these dynamic layouts to static layouts which we will add to the layout library.

The WordPress demo package also uses the Repeater field, which is only available in the Advanced Custom Fields Pro plugin. This is a commercial plugin and is not bundled with the demo package. You can install it afterwards, and the demo website will look just like on our demo server. If you don't have ACF Pro, the demo package will not look the same, but to achieve a similar result, you can create a fixed number of separate custom fields instead.

So these are the features of our new theme Design Bites. Now go ahead and explore it yourself. As always, let us know what you think in the comments below.