Sweet Life

$69

Cafe and Restaurant WordPress Theme

Show off your delicious products with this responsive theme optimized for restaurants, bars, and cafés.

Responsive Layout

The world is going mobile and whether it’s displayed on a tablet, smart phone, laptop, or a desktop, this theme will adjust its display and present your content in the best possible light. No more zooming in or out, no more scrolling left/right – just a smooth browsing experience.

Responsive Design

Features

Sweet Life allows you to customize your site title, custom header, background, and menu.

With the Custom Design upgrade, Sweet Life makes it easy to create your dream site by changing the fonts and colors, or adding your own custom CSS.

colors

Page Templates

To make it easy to add variety to your site, Sweet Life offers a homepage template, full-width template, and full-width template without the header.

colors

Post Formats

Sweet Life supports Post Formats and Sticky Posts. Style your website with aside, audio, gallery, image, link, quote, chat, status, and video post formats.

colors

Featured Images

Featured Images are displayed above the post title on the blog index and single pages.

colors

Widget Areas

Sweet Life comes with five widget areas – one overlaid on the header image for the circle text, one right sidebar, and three in the footer. The widget areas will activate once you add widgets to them in Appearance → Widgets.

colors

Quick Specs (all measurements in pixels):

  1. Custom header image should be at least 1920 in width.

Custom Menu

menu

You can set up a custom menu under Appearance → Menus. For detailed instructions, see Custom Menus.

menu

Custom Header

header image

Navigate to Customize → Header and upload your header image.

header

If you’d like to have some text within circles on top of the header image – like the words “COFFEE & CAKES” on top of the image of coffee beans and a cup of coffee in the screenshot above – follow these steps:

  • Go to Appearance → Widgets.
  • Remove any existing widgets from the Header Image Text – Circle Text sidebar.
  • Select a text widget from the left and add it to the Header Image Text – Circle Text sidebar.
  • Inside the text widget, add this code:
<span>C</span> <span>o</span> <span>f</span> <span>f</span> <span>e</span> <span>e</span> <span>&amp;amp;</span> <span>c</span> <span>a</span><span>k</span> <span>e</span><span>s</span>

If you want to write something else, just add each letter inside the span tags. For example if you want to write the word “Theme” it would look like this:

<span>T</span> <span>h</span> <span>e</span> <span>m</span> <span>e</span>

Front Page

home

Here’s you how we created the home page on the demo site:

  • Go to Pages and add a new new page called Home.
  • Content will be added within the page editor, using columns for the layout.
  • one_third column generates the left block (the Welcome to Sweet Life text you see above).
  • A two_third column generates the right block.
  • In the right block, two recipe shortcodes are added.
  • Publish your Home page and set it as a static front page by following the guide.

You can use this HTML code for the home content layout:

<div class="clearfix">
	<div class="one_third">
		Your content goes here.
	</div>
	<div class="two_third lastcolumn">
		Your content goes here.
	</div>
</div>

Replace “your content goes here” with your own content.

Left Column Content

home

We added text, a blockquote, and a Twitter follow button using this code:

<div class="one_third">
	<span class="drop-cap">W</span><strong>elcome to Sweet Life.</strong>
	Ne sit ipsum melius ponderum, an duo quem saperet deleniti, definitiones mediocritatem in qui. Ne sit ipsum melius ponderum, an duo quem saperet deleniti, definitiones mediocritatem in qui, definitiones mediocritatem. Ne sit ipsum melius ponderum, an duo quem saperet deleniti.
	<blockquote>Great job!
		<cite>by <a href="http://sethgodin.typepad.com/">SETH GODIN</a></cite>
	</blockquote>
	<hr>
	[twitter-follow screen_name='wordpressdotcom' show_count='yes']
</div>

Find out more about Twitter button shortcodes.

Right Column Content

home

We added a recipe shortcode within a two-column layout using this code:

<div class="two_third lastcolumn">
	<div class="one_half">
		[recipe title="Summer Pasta with Basil" servings="4-6" time="2hr 30mins" difficulty="easy"]
		<img class="alignnone size-full wp-image-41" alt="1" src="http://sweetlifedemo.files.wordpress.com/2014/03/11.jpg" width="1280" height="572" />- <strong>4</strong> slices white bread
		- <strong>9</strong> slices white bread
		- <strong>1</strong> slices white bread<h3><span style="text-decoration:underline;"><strong>45min</strong></span></h3>[/recipe]
	</div>
	<div class="one_half lastcolumn">
		[recipe title="Summer Pasta with Basil" servings="4-6" time="2hr 30mins" difficulty="easy"]
		<img class="alignnone size-full wp-image-41" alt="1" src="http://sweetlifedemo.files.wordpress.com/2014/03/11.jpg" width="1280" height="572" />- <strong>4</strong> slices white bread
		- <strong>9</strong> slices white bread
		- <strong>1</strong> slices white bread<h3><span style="text-decoration:underline;"><strong>45min</strong></span></h3>[/recipe]
	</div>
</div>

Page Columns

Here is some useful HTML you can use to split the page layout into five, four, three, or two columns:

Five-Column Layout

<div class="clearfix">
	<div class="one_fifth">This text inside the div code is what will appear in your first column!</div>
	<div class="one_fifth">This text inside the div code is what will appear in your first column!</div>
	<div class="one_fifth">This text inside the div code is what will appear in your first column!</div>
	<div class="one_fifth">This text inside the div code is what will appear in your first column!</div>
	<div class="one_fifth lastcolumn">This text inside the div code is what will appear in your first column!</div>
</div>

Four-Column Layout:

<div class="clearfix">
	<div class="one_fourth">This text inside the div code is what will appear in your first column!</div>
	<div class="one_fourth">This text inside the div code is what will appear in your first column!</div>
	<div class="one_fourth">This text inside the div code is what will appear in your first column!</div>
	<div class="one_fourth lastcolumn">This text inside the div code is what will appear in your first column!</div>
</div>

Three-Column Layout

<div class="clearfix">
	<div class="one_third_main">This text inside the div code is what will appear in your first column!</div>
	<div class="one_third_main">This text inside the div code is what will appear in your first column!</div>
	<div class="one_third_main lastcolumn">This text inside the div code is what will appear in your first column!</div>
</div>

Two-Column Layout

<div class="clearfix">
	<div class="one_half">This text inside the div code is what will appear in your first column!</div>
	<div class="one_half lastcolumn">This text inside the div code is what will appear in your first column!</div>
</div>

One_Third and Two_Third Column Layout

<div class="clearfix">
	<div class="one_third">This text inside the div code is what will appear in your first column!</div>
	<div class="two_third lastcolumn">This text inside the div code is what will appear in your first column!</div>
</div>

Two_Third and One_Third Column Layout

<div class="clearfix">
	<div class="two_third">This text inside the div code is what will appear in your first column!</div>
	<div class="one_third lastcolumn">This text inside the div code is what will appear in your first column!</div>
</div>

Footer

footer

  • Go Appearance → Widgets.
  • Select any widget from the left side and add it to First Column Footer Area, Second Column Footer Area, or Third Column Footer Area.

Blog

restaurant wordpress theme

Post Formats

Sweet Life supports Post Formats and Sticky Posts. Style your website with aside, audio, gallery, image, link, quote, status, chat, and video post formats.

Blog Sidebar

  • Navigate to Appearance → Widgets
  • Choose any widget you want and add it to Blog Right Sidebar.

Recipes

recipes

Add a new page and from the Page Attributes box, select the Full width – without header image template.

Recipes With Three-Column Layout

In the screenshot above, we added content using the recipe shortcode, within a three-column layout. You can see an example here.

Recipes With Masonry Layout

In this variation, we added content using the recipe shortcode and a special Masonry layout, which allows each recipe to have an adjustable height which is only as tall as the content of the recipe. Here’s an example.

This is the HTML code you can add to the Text editor to see the effect:

<div class="portfoliopage masonry">
	<div class="portfoliopage-item masonry-brick">
		Your content goes here.
	</div>
</div>

Complete content from the demo page:

<div class="portfoliopage masonry">
	<div class="portfoliopage-item masonry-brick">
		[recipe title="Summer Pasta with Basil" servings="4-6" time="2hr 30mins" difficulty="easy"]
		<img class="alignnone size-full wp-image-41" alt="1" src="http://sweetlifedemo.files.wordpress.com/2014/03/11.jpg" width="1280" height="572" />- <strong>4</strong> slices white bread
		- <strong>9</strong> slices white bread
		- <strong>1</strong> slices white bread<h3><span style="text-decoration:underline;"><strong>45min</strong></span></h3>
		[/recipe]
	</div>
	<div class="portfoliopage-item masonry-brick">
		[recipe title="Summer Pasta with Tomatoes" servings="4-6" time="2hr 30mins" difficulty="easy"]
		<img src="http://sweetlifedemo.files.wordpress.com/2014/03/2.jpg" alt="2" width="1280" height="572" class="alignnone size-full wp-image-37" />
		Put your recipe here. Tip: use ordered and unordered lists, headings, images, and links to improve the look of your recipe.- <strong>4</strong> slices white bread
		- <strong>9</strong> slices white bread
		- <strong>1</strong> slices white bread
		- <strong>6</strong> slices white bread<h3><span style="text-decoration:underline;"><strong>25min</strong></span></h3>
		[/recipe]
	</div>
	<div class="portfoliopage-item masonry-brick">
		[recipe title="Summer Pasta with Cheese" servings="4-6" time="2hr 30mins" difficulty="easy"]
		<img class="alignnone size-full wp-image-43" alt="imagepost2" src="http://sweetlifedemo.files.wordpress.com/2014/03/imagepost2.jpg" width="1280" height="572" />
		Put your recipe here. Tip: use ordered and unordered lists, headings, images, and links to improve the look of your recipe.- <strong>4</strong> slices white bread
		- <strong>9</strong> slices white bread
		- <strong>1</strong> slices white bread
		- <strong>6</strong> slices white bread<h3><span style="text-decoration:underline;"><strong>25min</strong></span></h3>
		[/recipe]
	</div>
	<div class="portfoliopage-item masonry-brick">
		[recipe title="Summer Pasta with Basil" servings="4-6" time="2hr 30mins" difficulty="easy"]
		<img class="alignnone size-full wp-image-41" alt="1" src="http://sweetlifedemo.files.wordpress.com/2014/03/11.jpg" width="1280" height="572" />- <strong>4</strong> slices white bread
		- <strong>9</strong> slices white bread
		- <strong>1</strong> slices white bread<h3><span style="text-decoration:underline;"><strong>35min</strong></span></h3>[/recipe]
	</div>
</div>