<!--
	This source file is part of the open source project
	ExpressionEngine User Guide (https://github.com/ExpressionEngine/ExpressionEngine-User-Guide)

	@link      https://expressionengine.com/
	@copyright Copyright (c) 2003-2021, Packet Tide, LLC. (https://packettide.com)
	@license   https://expressionengine.com/license Licensed under Apache License, Version 2.0
-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>Template Layouts — ExpressionEngine 5.4.2 Documentation</title>

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />

		<link rel="stylesheet" href="../_assets/default.min.css?v=3">

		<!-- Favicons -->
		<link rel="apple-touch-icon" sizes="180x180" href="../_assets/images/favicons/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="../_assets/images/favicons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="../_assets/images/favicons/favicon-16x16.png">
		<link rel="manifest" href="../_assets/images/favicons/site.webmanifest">
		<link rel="mask-icon" href="../_assets/images/favicons/safari-pinned-tab.svg" color="#2e6abd">
		<link rel="shortcut icon" href="../_assets/images/favicons/favicon.ico">
		<meta name="msapplication-TileColor" content="#2e6abd">
		<meta name="msapplication-config" content="../_assets/images/favicons/browserconfig.xml">
		<meta name="theme-color" content="#ffffff">

		<style>.sidebar-toc { visibility: hidden; }</style>
		<noscript><style>.sidebar-toc { visibility: visible; }</style></noscript>
	</head>
	<body>

		<div class="header">
			<div class="header-content">
				<a href="https://docs.expressionengine.com/latest" class="header-logo"><img src="../_assets/images/ee-logo-white.svg" alt=""></a>
				<a href="https://docs.expressionengine.com/latest" class="header-title">ExpressionEngine Docs</a>

				<nav>
					<a href="https://u.expressionengine.com" class="hide font-monospace">{ee:u}</a>
					<a href="https://expressionengine.com/forums" class="hide">Forums</a>

					<div class="version-button-wrapper">
					<div class="dropdown">
							<a class="" href="#">v5<span class="i-arrow-down"></span></a>
							<div class="dropdown-menu">
								<div class="dropdown-menu-inner">
									<a href="https://docs.expressionengine.com/latest/">v6</a>
									<a class="active" href="https://docs.expressionengine.com/v5/">v5</a>
									<a href="https://docs.expressionengine.com/v4/">v4</a>
									<a href="https://docs.expressionengine.com/v3/">v3</a>
									<a href="https://docs.expressionengine.com/v2/">v2</a>
									<a href="https://docs.expressionengine.com/v1/">v1</a>
								</div>
							</div>
						</div>
						<a href="https://docs.expressionengine.com/downloads/v5" class="download-button"><img src="../_assets/images/download.svg" alt=""></a>
					</div>
				</nav>

				<div class="hamburger mobile-menu-button" onclick="toggleMobileMenu();">
					<span></span><span></span><span></span>
				</div>
			</div>
		</div>

		<div class="sidebar-container">
			<div class="sidebar">
				<div class="sidebar-search">
				<input type="text" class="search-input" id="docsearch-input" name="search" placeholder="Search">
					<!-- <div class="sidebar-sponsor">
						<p>Sponsored By:</p><img src="" alt="">
					</div> -->
				</div>

				<div class="sidebar-toc">
					<ul><li  class=""><a href="../index.html">Welcome</a></li><li  class=""><a >Installation & Updates</a><ul><li  class=""><a href="../installation/requirements.html">System Requirements</a></li><li  class=""><a href="../installation/installation.html">Installation</a></li><li  class=""><a href="../installation/best-practices.html">Best Practices</a></li><li  class=""><a href="../installation/updating.html">Updating</a></li><li  class=""><a href="../installation/changelog.html">Change Log</a></li></ul></li><li  class=""><a >Getting Started</a><ul><li  class=""><a href="../getting-started/the-big-picture.html">The Big Picture</a></li><li  class=""><a href="../getting-started/ten-minute-primer.html">10 Minute Primer</a></li></ul></li><li  class=""><a >General Information</a><ul><li  class=""><a href="../general/url-structure.html">URL Structure</a></li><li  class=""><a href="../general/404pages.html">404 Pages</a></li><li  class=""><a href="../general/database-backup.html">Backing Up Your Site</a></li><li  class=""><a href="../general/moving.html">Moving to Another Server</a></li><li  class=""><a href="../general/gdpr.html">GDPR Compliance</a></li><li  class=""><a href="../general/cookies.html">Cookies</a></li><li  class=""><a href="../general/date-localization.html">Date Localization</a></li><li  class=""><a href="../general/languages.html">Language Packs</a></li><li  class=""><a href="../general/system-configuration-overrides.html">System Config Overrides</a></li><li  class=""><a href="../general/text-formatting.html">Text Formatting</a></li><li  class=""><a href="../general/converting-to-innodb.html">Converting to InnoDB</a></li><li  class=""><a href="../general/bbcode.html">BBCode Reference</a></li><li  class=""><a href="../general/reserved-words.html">Reserved Words</a></li><li  class=""><a href="../general/member-import-xml-format.html">Member XML Format</a></li></ul></li><li  class="active"><a >Templates</a><ul><li  class=""><a href="../templates/overview.html">Overview</a></li><li  class=""><a href="../templates/language.html">Template Language</a></li><li  class=""><a href="../templates/conditionals.html">Conditional Tags</a></li><li  class=""><a href="../templates/embedding.html">Embedding Templates</a></li><li data-active-page="true" class="active"><a href="../templates/layouts.html">Template Layouts</a></li><li  class=""><a href="../templates/partials.html">Template Partials</a></li><li  class=""><a href="../templates/variable.html">Template Variables</a></li><li  class=""><a >Global Template Variables</a><ul><li  class=""><a href="../templates/globals/single-variables.html">Single Global Variables</a></li><li  class=""><a href="../templates/globals/stylesheet.html">Linking to Stylesheets</a></li><li  class=""><a href="../templates/globals/url-segments.html">URL Segment Variables</a></li><li  class=""><a href="../templates/globals/consent.html">Consent Variables</a></li><li  class=""><a href="../templates/globals/path.html">Path Variables</a></li><li  class=""><a href="../templates/globals/preload-replacement.html">Preload Text Replacements</a></li></ul></li><li  class=""><a href="../templates/variable-modifiers.html">Variable Modifiers</a></li><li  class=""><a href="../templates/date-variable-formatting.html">Date Variable Formatting</a></li><li  class=""><a href="../templates/routes.html">Template Routes</a></li><li  class=""><a href="../templates/pagination.html">Pagination</a></li><li  class=""><a href="../templates/engine.html">The Template Engine</a></li></ul></li><li  class=""><a >Channels</a><ul><li  class=""><a href="../channels/entries.html">Entries Tag</a></li><li  class=""><a href="../channels/info.html">Channel Information Tag</a></li><li  class=""><a href="../channels/entry-linking.html">Next/Previous Entries</a></li><li  class=""><a href="../channels/entry-spanning.html">Spanning Across Pages</a></li><li  class=""><a href="../channels/entry-tracking.html">Entry Views Tracking</a></li><li  class=""><a href="../channels/dynamic-parameters.html">Dynamic Parameters</a></li><li  class=""><a href="../channels/categories.html">Categories Tag</a></li><li  class=""><a href="../channels/category-archive.html">Category Archive Tag</a></li><li  class=""><a href="../channels/category-heading.html">Category Heading Tag</a></li><li  class=""><a href="../channels/archive-months.html">Archive Month Links</a></li><li  class=""><a href="../channels/sets.html">Channel Sets</a></li><li  class=""><a href="../channels/calendar.html">Calendar Tag</a></li><li  class=""><a >Channel Form</a><ul><li  class=""><a href="../channels/channel-form/overview.html">Channel Form Tag</a></li><li  class=""><a href="../channels/channel-form/examples.html">Examples</a></li><li  class=""><a href="../channels/channel-form/inputs.html">Form Inputs</a></li><li  class=""><a href="../channels/channel-form/fields.html">Other Fields</a></li><li  class=""><a href="../channels/channel-form/status.html">Status Selection</a></li><li  class=""><a href="../channels/channel-form/categories.html">Category Selection</a></li><li  class=""><a href="../channels/channel-form/development.html">Development</a></li></ul></li></ul></li><li  class=""><a >Comments</a><ul><li  class=""><a href="../comment/overview.html">Overview</a></li><li  class=""><a href="../comment/entries.html">Entries Tag</a></li><li  class=""><a href="../comment/form.html">Submission Form</a></li><li  class=""><a href="../comment/subscriptions.html">Subscriptions</a></li><li  class=""><a href="../comment/control-panel.html">Control Panel</a></li></ul></li><li  class=""><a >Add-Ons</a><ul><li  class=""><a href="../add-ons/overview.html">Overview</a></li><li  class=""><a href="../add-ons/blacklist.html">Blacklist / White List</a></li><li  class=""><a href="../add-ons/consent.html">Consent</a></li><li  class=""><a href="../add-ons/email.html">Email</a></li><li  class=""><a href="../add-ons/emoji.html">Emoji</a></li><li  class=""><a href="../add-ons/file.html">File</a></li><li  class=""><a >Discussion Forum</a><ul><li  class=""><a href="../add-ons/forum/index.html">Overview</a></li><li  class=""><a href="../add-ons/forum/setup.html">Setup</a></li><li  class=""><a href="../add-ons/forum/boards.html">Boards</a></li><li  class=""><a href="../add-ons/forum/themes.html">Themes</a></li><li  class=""><a href="../add-ons/forum/global-variables.html">Global Variables</a></li><li  class=""><a href="../add-ons/forum/user-management.html">User Management</a></li><li  class=""><a href="../add-ons/forum/channel-forum.html">Associating Channel Entries with Forum Topics</a></li><li  class=""><a href="../add-ons/forum/recent-topics.html">Recent Forum Topics</a></li><li  class=""><a href="../add-ons/forum/signatures.html">Signatures and Avatars</a></li><li  class=""><a href="../add-ons/forum/helper.html">Helper</a></li><li  class=""><a href="../add-ons/forum/other-features.html">Other Features</a></li></ul></li><li  class=""><a href="../add-ons/http-header.html">HTTP Header</a></li><li  class=""><a href="../add-ons/ip-to-nation.html">IP to Nation</a></li><li  class=""><a href="../add-ons/metaweblog-api.html">Metaweblog API</a></li><li  class=""><a href="../add-ons/moblog.html">Moblog</a></li><li  class=""><a href="../add-ons/pages.html">Pages</a></li><li  class=""><a href="../add-ons/query.html">Query</a></li><li  class=""><a href="../add-ons/rss.html">RSS</a></li><li  class=""><a href="../add-ons/rss-parser.html">RSS Parser</a></li><li  class=""><a href="../add-ons/rte.html">Rich Text Editor</a></li><li  class=""><a >Search</a><ul><li  class=""><a href="../add-ons/search/index.html">Overview</a></li><li  class=""><a href="../add-ons/search/simple.html">Simple Form Tag</a></li><li  class=""><a href="../add-ons/search/advanced.html">Advanced Form Tag</a></li><li  class=""><a href="../add-ons/search/results.html">Displaying Results</a></li></ul></li><li  class=""><a >Simple Commerce</a><ul><li  class=""><a href="../add-ons/simple-commerce/index.html">Overview</a></li><li  class=""><a href="../add-ons/simple-commerce/control-panel.html">Control Panel</a></li><li  class=""><a href="../add-ons/simple-commerce/email-templates.html">Email Templates</a></li><li  class=""><a href="../add-ons/simple-commerce/ipn.html">Instant Payment Notification</a></li><li  class=""><a href="../add-ons/simple-commerce/items.html">Managing Store Items</a></li><li  class=""><a href="../add-ons/simple-commerce/paypal-settings.html">PayPal Settings</a></li><li  class=""><a href="../add-ons/simple-commerce/purchases.html">Managing Store Purchases</a></li></ul></li><li  class=""><a href="../add-ons/spam.html">Spam</a></li><li  class=""><a href="../add-ons/statistics.html">Statistics</a></li><li  class=""><a href="../add-ons/emoticon.html">Emoticon (Deprecated)</a></li></ul></li><li  class=""><a >Fieldtypes</a><ul><li  class=""><a href="../fieldtypes/overview.html">Overview</a></li><li  class=""><a href="../fieldtypes/date.html">Date</a></li><li  class=""><a href="../fieldtypes/duration.html">Duration</a></li><li  class=""><a href="../fieldtypes/email-address.html">Email Address</a></li><li  class=""><a href="../fieldtypes/file.html">File</a></li><li  class=""><a href="../fieldtypes/file-grid.html">File Grid</a></li><li  class=""><a href="../fieldtypes/fluid.html">Fluid</a></li><li  class=""><a href="../fieldtypes/grid.html">Grid</a></li><li  class=""><a href="../fieldtypes/relationships.html">Relationships</a></li><li  class=""><a href="../fieldtypes/rte.html">Rich Text Editor</a></li><li  class=""><a href="../fieldtypes/select.html">Checkboxes, Radio Buttons, Select, Multiselect</a></li><li  class=""><a href="../fieldtypes/text.html">Text Input</a></li><li  class=""><a href="../fieldtypes/textarea.html">Textarea</a></li><li  class=""><a href="../fieldtypes/toggle.html">Toggle</a></li><li  class=""><a href="../fieldtypes/url.html">URL</a></li></ul></li><li  class=""><a href="../member/index.html">Member Management</a></li><li  class=""><a >Control Panel</a><ul><li  class=""><a href="../control-panel/index.html">The Control Panel</a></li><li  class=""><a href="../control-panel/overview.html">CP Overview</a></li><li  class=""><a href="../control-panel/create.html">Create</a></li><li  class=""><a href="../control-panel/channels.html">Channels</a></li><li  class=""><a href="../control-panel/entry-manager.html">Entry Manager</a></li><li  class=""><a href="../control-panel/file-manager.html">File Manager</a></li><li  class=""><a href="../control-panel/field-manager.html">Field Manager</a></li><li  class=""><a href="../control-panel/member-manager.html">Member Manager</a></li><li  class=""><a href="../control-panel/member-profile.html">Member Profile</a></li><li  class=""><a href="../control-panel/template-manager.html">Template Manager</a></li><li  class=""><a href="../control-panel/addons-manager.html">Add-On Manager</a></li><li  class=""><a href="../control-panel/categories.html">Categories</a></li><li  class=""><a href="../control-panel/utilities.html">Utilities</a></li><li  class=""><a href="../control-panel/system-logs.html">System Logs</a></li><li  class=""><a >System Settings</a><ul><li  class=""><a href="../control-panel/settings/index.html">Overview</a></li><li  class=""><a href="../control-panel/settings/general.html">General Settings</a></li><li  class=""><a href="../control-panel/settings/avatars.html">Avatar</a></li><li  class=""><a href="../control-panel/settings/captcha.html">CAPTCHA</a></li><li  class=""><a href="../control-panel/settings/comments.html">Comment</a></li><li  class=""><a href="../control-panel/settings/content-design.html">Content & Design</a></li><li  class=""><a href="../control-panel/settings/consents.html">Consents</a></li><li  class=""><a href="../control-panel/settings/debug-output.html">Debugging & Output</a></li><li  class=""><a href="../control-panel/settings/email.html">Outgoing Email</a></li><li  class=""><a href="../control-panel/settings/hit-tracking.html">Hit Tracking</a></li><li  class=""><a href="../control-panel/settings/members.html">Member</a></li><li  class=""><a href="../control-panel/settings/messages.html">Messaging</a></li><li  class=""><a href="../control-panel/settings/security-privacy.html">Security & Privacy</a></li><li  class=""><a href="../control-panel/settings/template.html">Template</a></li><li  class=""><a href="../control-panel/settings/throttling.html">Access Throttling</a></li><li  class=""><a href="../control-panel/settings/urls.html">URL and Path</a></li><li  class=""><a href="../control-panel/settings/word-censor.html">Word Censorship</a></li><li  class=""><a href="../control-panel/settings/html-buttons.html">HTML Buttons</a></li><li  class=""><a href="../control-panel/settings/menu-manager.html">Menu Manager</a></li></ul></li><li  class=""><a href="../control-panel/footer.html">CP Footer</a></li></ul></li><li  class=""><a >Security</a><ul><li  class=""><a href="../security/general-tips.html">Tips</a></li><li  class=""><a href="../security/captchas.html">Captchas</a></li><li  class=""><a href="../security/spam-protection.html">Spam Protection</a></li></ul></li><li  class=""><a >Optimization</a><ul><li  class=""><a href="../optimization/caching.html">Caching and Performance</a></li><li  class=""><a href="../optimization/handling-extreme-traffic.html">Handling Extreme Traffic</a></li><li  class=""><a href="../optimization/throttling.html">Throttling</a></li><li  class=""><a href="../optimization/new-relic.html">New Relic Performance Monitoring</a></li></ul></li><li  class=""><a >Multiple Sites</a><ul><li  class=""><a href="../msm/overview.html">Overview</a></li><li  class=""><a href="../msm/code.html">Variables and Parameter</a></li></ul></li><li  class=""><a >Troubleshooting</a><ul><li  class=""><a href="../troubleshooting/general.html">General</a></li><li  class=""><a href="../troubleshooting/installation.html">Installation</a></li><li  class=""><a href="../troubleshooting/templates.html">Templates</a></li><li  class=""><a href="../troubleshooting/control-panel.html">Control Panel</a></li><li  class=""><a href="../troubleshooting/channels-and-entries.html">Channels and Entries</a></li><li  class=""><a href="../troubleshooting/email.html">Email</a></li><li  class=""><a href="../troubleshooting/simple-commerce-module.html">Simple Commerce Module</a></li><li  class=""><a href="../troubleshooting/error-messages.html">Error Messages</a></li></ul></li><li  class=""><a >Add-On Development</a><ul><li  class=""><a href="../development/addon-setup-php-file.html">The addon.setup.php File</a></li><li  class=""><a href="../development/plugins.html">Plugins</a></li><li  class=""><a href="../development/modules.html">Modules</a></li><li  class=""><a href="../development/extensions.html">Extensions</a></li><li  class=""><a >Extension Hooks</a><ul><li  class=""><a >Global</a><ul><li  class=""><a href="../development/extension-hooks/global/core.html">Core Library</a></li><li  class=""><a href="../development/extension-hooks/global/email.html">Email Library</a></li><li  class=""><a href="../development/extension-hooks/global/filemanager.html">Filemanager Library</a></li><li  class=""><a href="../development/extension-hooks/global/functions.html">Functions Library</a></li><li  class=""><a href="../development/extension-hooks/global/grid.html">Grid Fieldtype</a></li><li  class=""><a href="../development/extension-hooks/global/input.html">Input Library</a></li><li  class=""><a href="../development/extension-hooks/global/member-model.html">Legacy Member Model</a></li><li  class=""><a href="../development/extension-hooks/global/output.html">Output Library</a></li><li  class=""><a href="../development/extension-hooks/global/pagination.html">Pagination Library</a></li><li  class=""><a href="../development/extension-hooks/global/relationships.html">Relationships Fieldtype</a></li><li  class=""><a href="../development/extension-hooks/global/session.html">Session Library</a></li><li  class=""><a href="../development/extension-hooks/global/template.html">Template Library</a></li><li  class=""><a href="../development/extension-hooks/global/text-helper.html">Text Helper</a></li><li  class=""><a href="../development/extension-hooks/global/typography.html">Typography Library</a></li></ul></li><li  class=""><a >API Libraries</a><ul><li  class=""><a href="../development/extension-hooks/api/channel-fields.html">Channel Fields API</a></li><li  class=""><a href="../development/extension-hooks/api/template-structure.html">Template Structure API</a></li></ul></li><li  class=""><a >Control Panel</a><ul><li  class=""><a href="../development/extension-hooks/cp/admin-content.html">Admin Content Controller</a></li><li  class=""><a href="../development/extension-hooks/cp/css.html">CSS Controller</a></li><li  class=""><a href="../development/extension-hooks/cp/design.html">Design Controller</a></li><li  class=""><a href="../development/extension-hooks/cp/javascript.html">Javascript Controller</a></li><li  class=""><a href="../development/extension-hooks/cp/login.html">Login Controller</a></li><li  class=""><a href="../development/extension-hooks/cp/members.html">Members Controller</a></li><li  class=""><a href="../development/extension-hooks/cp/menu.html">Control Panel Menu</a></li><li  class=""><a href="../development/extension-hooks/cp/myaccount.html">My Account Controller</a></li><li  class=""><a href="../development/extension-hooks/cp/publish.html">Publish Controller</a></li></ul></li><li  class=""><a >Models</a><ul><li  class=""><a href="../development/extension-hooks/model/category-field.html">CategoryField Model</a></li><li  class=""><a href="../development/extension-hooks/model/category-group.html">CategoryGroup Model</a></li><li  class=""><a href="../development/extension-hooks/model/category.html">Category Model</a></li><li  class=""><a href="../development/extension-hooks/model/channel.html">Channel Model</a></li><li  class=""><a href="../development/extension-hooks/model/channel-entry.html">Channel Entry Model</a></li><li  class=""><a href="../development/extension-hooks/model/channel-field-group.html">ChannelFieldGroup Model</a></li><li  class=""><a href="../development/extension-hooks/model/channel-field.html">ChannelField Model</a></li><li  class=""><a href="../development/extension-hooks/model/channel-form-settings.html">ChannelFormSettings Model</a></li><li  class=""><a href="../development/extension-hooks/model/channel-layout.html">ChannelLayout Model</a></li><li  class=""><a href="../development/extension-hooks/model/comment.html">Comment Model</a></li><li  class=""><a href="../development/extension-hooks/model/file.html">File Model</a></li><li  class=""><a href="../development/extension-hooks/model/template-global-variable.html">GlobalVariable Model</a></li><li  class=""><a href="../development/extension-hooks/model/member-field.html">MemberField Model</a></li><li  class=""><a href="../development/extension-hooks/model/member-group.html">MemberGroup Model</a></li><li  class=""><a href="../development/extension-hooks/model/member.html">Member Model</a></li><li  class=""><a href="../development/extension-hooks/model/site.html">Site Model</a></li><li  class=""><a href="../development/extension-hooks/model/template-snippet.html">Snippet Model</a></li><li  class=""><a href="../development/extension-hooks/model/template-specialty-template.html">SpecialityTemplate Model</a></li><li  class=""><a href="../development/extension-hooks/model/status.html">Status Model</a></li><li  class=""><a href="../development/extension-hooks/model/template-group.html">TemplateGroup Model</a></li><li  class=""><a href="../development/extension-hooks/model/template-route.html">TemplateRoute Model</a></li><li  class=""><a href="../development/extension-hooks/model/template.html">Template Model</a></li></ul></li><li  class=""><a >Modules</a><ul><li  class=""><a href="../development/extension-hooks/module/channel.html">Channel Module</a></li><li  class=""><a href="../development/extension-hooks/module/channel-form.html">Channel Form</a></li><li  class=""><a href="../development/extension-hooks/module/comment.html">Comment Module</a></li><li  class=""><a href="../development/extension-hooks/module/email.html">Email Module</a></li><li  class=""><a href="../development/extension-hooks/module/forum.html">Forum Module</a></li><li  class=""><a href="../development/extension-hooks/module/member.html">Member Module</a></li><li  class=""><a href="../development/extension-hooks/module/member-auth.html">Member Module Authorization</a></li><li  class=""><a href="../development/extension-hooks/module/member-register.html">Member Module Registration</a></li><li  class=""><a href="../development/extension-hooks/module/member-settings.html">Member Module Settings</a></li><li  class=""><a href="../development/extension-hooks/module/search.html">Search Module</a></li><li  class=""><a href="../development/extension-hooks/module/simple-commerce.html">Simple Commerce Module</a></li><li  class=""><a href="../development/extension-hooks/module/wiki.html">Wiki Module</a></li></ul></li></ul></li><li  class=""><a href="../development/fieldtypes.html">Fieldtypes</a></li><li  class=""><a href="../development/architecture.html">Architecture</a></li><li  class=""><a >Services</a><ul><li  class=""><a href="../development/services/addon.html">Addon Service</a></li><li  class=""><a href="../development/services/alert.html">CP/Alert Service</a></li><li  class=""><a href="../development/services/config.html">Config Service</a></li><li  class=""><a href="../development/services/consent.html">Consent Service</a></li><li  class=""><a href="../development/services/cookie.html">Cookie</a></li><li  class=""><a href="../development/services/csv.html">CSV Library</a></li><li  class=""><a href="../development/services/encrypt.html">Encrypt Service</a></li><li  class=""><a href="../development/services/event.html">Event Service</a></li><li  class=""><a href="../development/services/filepicker.html">CP/FilePicker Service</a></li><li  class=""><a href="../development/services/filter.html">CP/Filter Service</a></li><li  class=""><a >Format Service</a><ul><li  class=""><a href="../development/services/format.html">Format</a></li><li  class=""><a href="../development/services/format/number.html">Number Formatter</a></li><li  class=""><a href="../development/services/format/text.html">Text Formatter</a></li></ul></li><li  class=""><a href="../development/services/ipaddress.html">IP Address Service</a></li><li  class=""><a href="../development/services/live-preview.html">LivePreview Service</a></li><li  class=""><a href="../development/services/memory.html">Memory Service</a></li><li  class=""><a href="../development/services/modal.html">CP/Modal Service</a></li><li  class=""><a >Model Service</a><ul><li  class=""><a href="../development/services/model.html">Model</a></li><li  class=""><a href="../development/services/model/fetching.html">Fetching Models</a></li><li  class=""><a href="../development/services/model/relationships.html">Relationships</a></li><li  class=""><a href="../development/services/model/collection.html">Collections</a></li><li  class=""><a href="../development/services/model/building-your-own.html">Building your own Models</a></li><li  class=""><a href="../development/services/model/relating-models.html">Relating Models</a></li></ul></li><li  class=""><a href="../development/services/pagination.html">CP/Pagination Service</a></li><li  class=""><a href="../development/services/permission.html">Permission Service</a></li><li  class=""><a href="../development/services/sidebar.html">CP/Sidebar Service</a></li><li  class=""><a href="../development/services/spam.html">Spam Service</a></li><li  class=""><a href="../development/services/table.html">CP/Table Service</a></li><li  class=""><a href="../development/services/url.html">CP/URL Service</a></li><li  class=""><a href="../development/services/validation.html">Validation Service</a></li><li  class=""><a href="../development/services/view.html">View Service</a></li></ul></li><li  class=""><a href="../development/tree-datastructure.html">Tree Datastructure</a></li><li  class=""><a href="../development/shared-form-view.html">Shared Form View</a></li><li  class=""><a href="../development/rte-tools.html">RTE Tools API</a></li><li  class=""><a >Control Panel Javascript</a><ul><li  class=""><a href="../development/control-panel-js/events.html">Custom jQuery Events</a></li><li  class=""><a href="../development/control-panel-js/table.html">Table Plugin</a></li><li  class=""><a href="../development/control-panel-js/rich-text-editor.html">Rich Text Editor</a></li><li  class=""><a href="../development/control-panel-js/rangesandselections.html">Ranges and Selections</a></li><li  class=""><a href="../development/control-panel-js/wysihat-api.html">WysiHat API</a></li></ul></li><li  class=""><a href="../development/constants.html">Constants Reference</a></li><li  class=""><a href="../development/json-version-feed.html">JSON Version Feed</a></li><li  class=""><a >Legacy Reference</a><ul><li  class=""><a href="../development/legacy/common-functions.html">Common Functions</a></li><li  class=""><a href="../development/legacy/controllers.html">Controllers</a></li><li  class=""><a href="../development/legacy/drivers.html">Drivers</a></li><li  class=""><a href="../development/legacy/libraries/index.html">Libraries</a><ul><li  class=""><a href="../development/legacy/libraries/creating-libraries.html">Creating Libraries</a></li><li  class=""><a href="../development/legacy/libraries/benchmark.html">Benchmarking Class</a></li><li  class=""><a href="../development/legacy/libraries/cache.html">Cache Class</a></li><li  class=""><a href="../development/legacy/libraries/config.html">Config Class</a></li><li  class=""><a href="../development/legacy/libraries/cp.html">CP Class</a></li><li  class=""><a href="../development/legacy/libraries/database.html">Database Class</a></li><li  class=""><a href="../development/legacy/libraries/email.html">Email Class</a></li><li  class=""><a href="../development/legacy/libraries/file-uploading.html">File Uploading Class</a></li><li  class=""><a href="../development/legacy/libraries/form-validation.html">Form Validation Class</a></li><li  class=""><a href="../development/legacy/libraries/functions.html">Functions Class</a></li><li  class=""><a href="../development/legacy/libraries/image-lib.html">Image Manipulation Class</a></li><li  class=""><a href="../development/legacy/libraries/input.html">Input Class</a></li><li  class=""><a href="../development/legacy/libraries/javascript.html">Javascript Class</a></li><li  class=""><a href="../development/legacy/libraries/language.html">Language Class</a></li><li  class=""><a href="../development/legacy/libraries/layout.html">Layout Class</a></li><li  class=""><a href="../development/legacy/libraries/loader.html">Loader Class</a></li><li  class=""><a href="../development/legacy/libraries/localization.html">Localize Class</a></li><li  class=""><a href="../development/legacy/libraries/logger.html">Logger Class</a></li><li  class=""><a href="../development/legacy/libraries/mime-type.html">Mime Type Class</a></li><li  class=""><a href="../development/legacy/libraries/output.html">Output Class</a></li><li  class=""><a href="../development/legacy/libraries/pagination.html">Pagination Class</a></li><li  class=""><a href="../development/legacy/libraries/rss-parser.html">RSS Parser Class</a></li><li  class=""><a href="../development/legacy/libraries/security.html">Security Class</a></li><li  class=""><a href="../development/legacy/libraries/session.html">Session Class</a></li><li  class=""><a href="../development/legacy/libraries/table.html">Table Class</a></li><li  class=""><a href="../development/legacy/libraries/template.html">Template Class</a></li><li  class=""><a href="../development/legacy/libraries/typography.html">Typography Class</a></li><li  class=""><a href="../development/legacy/libraries/uri.html">URI Class</a></li><li  class=""><a href="../development/legacy/libraries/xmlparser.html">XML Parser Class</a></li></ul></li><li  class=""><a href="../development/legacy/database/index.html">Database Driver</a><ul><li  class=""><a href="../development/legacy/database/active-record.html">Active Record</a></li><li  class=""><a href="../development/legacy/database/results.html">Query Results</a></li><li  class=""><a href="../development/legacy/database/raw.html">Raw Queries and Metadata</a></li><li  class=""><a href="../development/legacy/database/utilities.html">Database Utility Class</a></li><li  class=""><a href="../development/legacy/database/forge.html">Database Forge Class</a></li><li  class=""><a href="../development/legacy/database/connecting-to-an-external-database.html">Connecting to an External Database</a></li></ul></li><li  class=""><a href="../development/legacy/helpers/index.html">Helpers</a><ul><li  class=""><a href="../development/legacy/helpers/array-helper.html">Array Helper</a></li><li  class=""><a href="../development/legacy/helpers/cookie-helper.html">Cookie Helper</a></li><li  class=""><a href="../development/legacy/helpers/directory-helper.html">Directory Helper</a></li><li  class=""><a href="../development/legacy/helpers/download-helper.html">Download Helper</a></li><li  class=""><a href="../development/legacy/helpers/file-helper.html">File Helper</a></li><li  class=""><a href="../development/legacy/helpers/form-helper.html">Form Helper</a></li><li  class=""><a href="../development/legacy/helpers/html-helper.html">HTML Helper</a></li><li  class=""><a href="../development/legacy/helpers/language-helper.html">Language Helper</a></li><li  class=""><a href="../development/legacy/helpers/number-helper.html">Number Helper</a></li><li  class=""><a href="../development/legacy/helpers/path-helper.html">Path Helper</a></li><li  class=""><a href="../development/legacy/helpers/security-helper.html">Security Helper</a></li><li  class=""><a href="../development/legacy/helpers/string-helper.html">String Helper</a></li><li  class=""><a href="../development/legacy/helpers/text-helper.html">Text Helper</a></li><li  class=""><a href="../development/legacy/helpers/url-helper.html">URL Helper</a></li><li  class=""><a href="../development/legacy/helpers/xml-helper.html">XML Helper</a></li></ul></li><li  class=""><a href="../development/legacy/api/index.html">Legacy API Library</a><ul><li  class=""><a href="../development/legacy/api/api-channel-categories.html">Channel Categories API</a></li><li  class=""><a href="../development/legacy/api/api-channel-fields.html">Channel Fields API</a></li><li  class=""><a href="../development/legacy/api/api-channel-structure.html">Channel Structure API</a></li><li  class=""><a href="../development/legacy/api/api-template-structure.html">Template Structure API</a></li></ul></li></ul></li><li  class=""><a >Guidelines</a><ul><li  class=""><a href="../development/guidelines/index.html">Overview</a></li><li  class=""><a href="../development/guidelines/checklist.html">Guidelines Checklist</a></li><li  class=""><a href="../development/guidelines/general.html">General Style and Syntax</a></li><li  class=""><a href="../development/guidelines/in-app-documentation.html">In-app Documentation</a></li><li  class=""><a href="../development/guidelines/performance.html">Performance Guidelines</a></li><li  class=""><a href="../development/guidelines/security.html">Security Guidelines</a></li><li  class=""><a href="../development/guidelines/view-php-syntax.html">View Files and PHP Syntax</a></li></ul></li><li  class=""><a href="../development/v4-addon-migration.html">v4 Add-on Migration</a></li><li  class=""><a href="../development/v3-add-on-migration.html">v3 Add-on Migration</a></li></ul></li><li  class=""><a href="../bugs-and-security-reports.html">Bugs and Security Reports</a></li><li  class=""><a href="../style-guide.html">Docs Style Guide</a></li></ul>
				</div>
			</div>
		</div>

		<section class="docs-content-wrapper">
			<div class="content" id="docsearch-content">
				<!--
    This source file is part of the open source project
    ExpressionEngine User Guide (https://github.com/ExpressionEngine/ExpressionEngine-User-Guide)

    @link      https://expressionengine.com/
    @copyright Copyright (c) 2003-2020, Packet Tide, LLC (https://www.packettide.com)
    @license   https://expressionengine.com/license Licensed under Apache License, Version 2.0
-->


		<h1>
		<span class="anchor" id="template-layouts"></span>
		<a href="#template-layouts">Template Layouts</a>
		</h1><div class="table-of-contents"><ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#simple-example">Simple Example</a></li>
<li><a href="#layout-variables">Layout Variables</a></li>
<li><a href="#expanded-example">Expanded Example</a></li>
<li><a href="#nesting-and-embeds">Nesting and Embeds</a></li>
<li><a href="#complex-example">Complex Example</a></li>
</ul>
</div>
		<h2>
		<span class="anchor" id="overview"></span>
		<a href="#overview">Overview</a>
		</h2><p>In addition to <a href="../templates/embedding.html">embedding</a> templates within each other, you can also create shared layouts for your templates. A layout can be thought of as a wrapping template or a reverse embed. To use a template you use the <code>{layout=&quot;&quot;}</code> tag at the top of your template:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"template_group/template"</span>}</span><span class="xml"></span></code></pre><p>Where “template_group” is the name of the group and “template” is the name of the template. You <strong>must</strong> include both the template group and the template name in the layout tag. For example:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"site/wrapper"</span>}</span><span class="xml"></span></code></pre><p>This uses the <code>wrapper</code> template in the <code>site</code> template group as a layout for the current template. In the layout itself, you must now specify a location where the template contents will be shown using the <code>layout:contents</code> tag:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout:contents</span>}</span><span class="xml"></span></code></pre><p class="alert alert--warn"> <strong>Note:</strong> The layout tag <strong>must</strong> come before any module or plugin tags.</p>
		<h3>
		<span class="anchor" id="watch-an-introduction-to-template-layouts"></span>
		<a href="#watch-an-introduction-to-template-layouts">Watch an introduction to template layouts:</a>
		</h3><div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/jzRIymlfU1w" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>


		<h2>
		<span class="anchor" id="simple-example"></span>
		<a href="#simple-example">Simple Example</a>
		</h2><p>The most common usage for layouts is to provide the skeleton structure of your site. With embeds, this can be done with using a header and footer embed on each template:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">embed</span>=<span class="hljs-string">"site/_header"</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">exp:channel:entries</span> <span class="hljs-attr">channel</span>=<span class="hljs-string">"news"</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">title</span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
  </span><span class="hljs-template-tag">{<span class="hljs-name">summary</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">exp:channel:entries</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">embed</span>=<span class="hljs-string">"site/_footer"</span>}</span><span class="xml"></span></code></pre><p>With a “site/_header” template:</p><pre><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>News Site<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></pre><p>And a “site/_footer” template:</p><pre><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre><p>As you add more code to your header and footer templates this approach can become a little messy. With layouts, we can define our header and footer in a single template called “site/_html-layout” in this example:</p><pre><code><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>News Site<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    </span><span class="hljs-template-tag">{<span class="hljs-name">layout:contents</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span></code></pre><p>You can now write the main template using a single layout tag instead of two embeds:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"site/_html-layout"</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">exp:channel:entries</span> <span class="hljs-attr">channel</span>=<span class="hljs-string">"news"</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">title</span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
  </span><span class="hljs-template-tag">{<span class="hljs-name">summary</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">exp:channel:entries</span>}</span><span class="xml"></span></code></pre><p>Notice that the layout is a <a href="../templates/overview.html#hidden-templates">hidden template</a>. This lets you prevent direct access to the layout template, which is most likely not useful to your users on its own.</p>
		<h2>
		<span class="anchor" id="layout-variables"></span>
		<a href="#layout-variables">Layout Variables</a>
		</h2>
		<h3>
		<span class="anchor" id="dynamic-variables--lists"></span>
		<a href="#dynamic-variables--lists">Dynamic Variables &amp; Lists</a>
		</h3><p>You can set variables in your templates that can later be used in your layouts. For instance you can set the contents of the page title tag, or breadcrumb navigation, sidebar content, etc. The content can be set in one of three ways, depending on how you need to use it in your layout:</p>
		<h4>
		<span class="anchor" id="layoutset"></span>
		<a href="#layoutset">{layout:set}</a>
		</h4><p><strong>Setting</strong> a variable works similarly to setting a string variable in a programming language, like JavaScript. The contents are set to the variable name you provide. In your template:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout:set</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'title'</span>}</span><span class="xml">My Page Title</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set</span>}</span><span class="xml"></span></code></pre><p>And then in the layout, wherever you need to use this variable, reference it by name, e.g. <code>{layout:title}</code>:</p><pre><code><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">layout:title</span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></span></code></pre>
		<h4>
		<span class="anchor" id="layoutsetappend"></span>
		<a href="#layoutsetappend">{layout:set:append}</a>
		</h4><p><strong>Appending</strong> a variable creates lists, and is similar to setting an array in a programming language, like JavaScript. Use this tag in a loop, when you want to capture the contents as individual items:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">exp:channel:entries</span> <span class="hljs-attr">channel</span>=<span class="hljs-string">'news'</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name">layout:set:append</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'titles'</span>}</span><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">title</span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set:append</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">exp:channel:entries</span>}</span><span class="xml"></span></code></pre><p>And then in the layout, wherever you want to display the variable, use a tag pair, and loop through the values with the <code>{value}</code> variable:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout:titles</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name">value</span>}</span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:titles</span>}</span><span class="xml"></span></code></pre><p>Like most pair variables, you have access to <code>{count}</code>, <code>{total_results}</code> as well:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout:titles</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name"><span class="hljs-keyword">if</span></span> count == <span class="hljs-number">1</span>}</span><span class="xml">
    <span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span>
  </span><span class="hljs-template-tag">{/<span class="hljs-name"><span class="hljs-keyword">if</span></span>}</span><span class="xml">

  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">value</span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>

  </span><span class="hljs-template-tag">{<span class="hljs-name"><span class="hljs-keyword">if</span></span> count == total_results}</span><span class="xml">
    <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span>
  </span><span class="hljs-template-tag">{/<span class="hljs-name"><span class="hljs-keyword">if</span></span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:titles</span>}</span><span class="xml"></span></code></pre>
		<h4>
		<span class="anchor" id="layoutsetprepend"></span>
		<a href="#layoutsetprepend">{layout:set:prepend}</a>
		</h4><p><strong>Prepending</strong> a variable works identical to <code>{layout:set:append}</code> above, except the new item gets pushed to the <strong>front</strong> of the list instead of added to the back.</p>
		<h4>
		<span class="anchor" id="using-layout-lists-together"></span>
		<a href="#using-layout-lists-together">Using Layout Lists Together</a>
		</h4><p>Sometimes it is helpful to be able to reference a specific item in a list, such as when you have set multiple layout variables with corresponding content. As a simple example, pairing URLs with titles:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">exp:channel:entries</span> <span class="hljs-attr">channel</span>=<span class="hljs-string">'news'</span> <span class="hljs-attr">limit</span>=<span class="hljs-string">'5'</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name">layout:set:append</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'titles'</span>}</span><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">title</span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set:append</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name">layout:set:append</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'urls'</span>}</span><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">url_title_path</span>=<span class="hljs-string">'news/story'</span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set:append</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">exp:channel:entries</span>}</span><span class="xml"></span></code></pre><p>Then you can use them in the layout like so:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout:urls</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-tag">{<span class="hljs-name">value</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">layout:titles</span> <span class="hljs-attr">index</span>=<span class="hljs-string">'{index}'</span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:urls</span>}</span><span class="xml"></span></code></pre><p>Notice how you only have to loop through one of the lists, and to output the correct counterpart from another list, we simply reference them by <strong>index</strong>. Every looping list will output its current index, and every list variable can reference a single item from its own list with the <code>index=</code> parameter:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout:list_variable</span> <span class="hljs-attr">index</span>=<span class="hljs-string">'3'</span>}</span><span class="xml"></span></code></pre>
		<h5>
		<span class="anchor" id="example-breadcrumbs"></span>
		<a href="#example-breadcrumbs">Example: Breadcrumbs</a>
		</h5><p>In this more verbose example, we use this basic idea to set a list of URLs and corresponding titles for use in HTML and JSON-LD breadcrumbs. In your template you might use:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout:set:append</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'breadcrumb_urls'</span>}</span><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">path</span>=<span class="hljs-string">'overlanding'</span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set:append</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{<span class="hljs-name">layout:set:append</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'breadcrumb_titles'</span>}</span><span class="xml">Overlanding</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set:append</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{<span class="hljs-name">layout:set:append</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'breadcrumb_jsonld_positions'</span>}</span><span class="xml">2</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set:append</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">layout:set:append</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'breadcrumb_urls'</span>}</span><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">path</span>=<span class="hljs-string">'overlanding/kitchens'</span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set:append</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{<span class="hljs-name">layout:set:append</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'breadcrumb_titles'</span>}</span><span class="xml">Kitchens</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set:append</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{<span class="hljs-name">layout:set:append</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'breadcrumb_jsonld_positions'</span>}</span><span class="xml">3</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set:append</span>}</span><span class="xml"></span></code></pre><p>We now have 3 items in each list, and the URL, titles, and JSON-LD ListItem position correspond to each other in each list. In our parent layout we can now use these lists to create both sets of breadcrumbs:</p><pre><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"crumbs"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"{homepage}"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  {layout:breadcrumb_urls}
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"{value}"</span>&gt;</span>{layout:breadcrumb_titles index='{index}'}<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  {/layout:breadcrumb_urls}
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"application/ld+json"</span>&gt;</span><span class="actionscript">
{
  <span class="hljs-string">"@context"</span>: <span class="hljs-string">"http://schema.org"</span>,
  <span class="hljs-string">"@type"</span>: <span class="hljs-string">"BreadcrumbList"</span>,
  <span class="hljs-string">"itemListElement"</span>: [
    {
      <span class="hljs-string">"@type"</span>: <span class="hljs-string">"ListItem"</span>,
      <span class="hljs-string">"position"</span>: <span class="hljs-number">1</span>,
      <span class="hljs-string">"item"</span>: {
        <span class="hljs-string">"@id"</span>: <span class="hljs-string">"{homepage}"</span>,
        <span class="hljs-string">"name"</span>: <span class="hljs-string">"Home"</span>
      }
    }
    {layout:breadcrumb_urls}
      ,{
        <span class="hljs-string">"@type"</span>: <span class="hljs-string">"ListItem"</span>,
        <span class="hljs-string">"position"</span>: {layout:breadcrumb_jsonld_positions index=<span class="hljs-string">'{index}'</span>},
        <span class="hljs-string">"item"</span>: {
          <span class="hljs-string">"@id"</span>: <span class="hljs-string">"{value}"</span>,
          <span class="hljs-string">"name"</span>: <span class="hljs-string">"{layout:breadcrumb_titles index='{index}'}"</span>
        }
      }
    {/layout:breadcrumb_urls}
  ]
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre><p>Resulting in:</p><pre><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"crumbs"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://example.com"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://example.com/overlanding"</span>&gt;</span>Overlanding<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://example.com/overlanding/kitchens"</span>&gt;</span>Kitchens<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"application/ld+json"</span>&gt;</span><span class="actionscript">
{
  <span class="hljs-string">"@context"</span>: <span class="hljs-string">"http://schema.org"</span>,
  <span class="hljs-string">"@type"</span>: <span class="hljs-string">"BreadcrumbList"</span>,
  <span class="hljs-string">"itemListElement"</span>: [
    {
      <span class="hljs-string">"@type"</span>: <span class="hljs-string">"ListItem"</span>,
      <span class="hljs-string">"position"</span>: <span class="hljs-number">1</span>,
      <span class="hljs-string">"item"</span>: {
        <span class="hljs-string">"@id"</span>: <span class="hljs-string">"https://example.com"</span>,
        <span class="hljs-string">"name"</span>: <span class="hljs-string">"Home"</span>
      }
    }
    ,{
      <span class="hljs-string">"@type"</span>: <span class="hljs-string">"ListItem"</span>,
      <span class="hljs-string">"position"</span>: <span class="hljs-number">2</span>,
      <span class="hljs-string">"item"</span>: {
        <span class="hljs-string">"@id"</span>: <span class="hljs-string">"https://example.com/overlanding"</span>,
        <span class="hljs-string">"name"</span>: <span class="hljs-string">"Overlanding"</span>
      }
    }
    ,{
      <span class="hljs-string">"@type"</span>: <span class="hljs-string">"ListItem"</span>,
      <span class="hljs-string">"position"</span>: <span class="hljs-number">3</span>,
      <span class="hljs-string">"item"</span>: {
        <span class="hljs-string">"@id"</span>: <span class="hljs-string">"https://example.com/overlanding/kitchens"</span>,
        <span class="hljs-string">"name"</span>: <span class="hljs-string">"Kitchens"</span>
      }
    }
  ]
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
		<h3>
		<span class="anchor" id="static-variables"></span>
		<a href="#static-variables">Static Variables</a>
		</h3><p>For static content, short words, etc. that are defined directly in the template, and not from a variable, there are two shortcuts available. In the layout tag itself you can use parameters to pass additional data to your layout template:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"site/_html-layout"</span> <span class="hljs-attr">login_required</span>=<span class="hljs-string">"yes"</span>}</span><span class="xml"></span></code></pre><p>In your layout this will be available as a <code>{layout:login_required}</code> variable:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name"><span class="hljs-keyword">if</span></span> layout:login_required == <span class="hljs-string">'yes'</span> &amp;&amp; logged_in_member_id == <span class="hljs-number">0</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name">embed</span>=<span class="hljs-string">'site/_login-modal'</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name"><span class="hljs-keyword">if</span></span>}</span><span class="xml"></span></code></pre><p>Or you can use the <code>{layout:set}</code> static-variable shortcut:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout:set</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'login_required'</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'yes'</span>}</span><span class="xml"></span></code></pre><p class="alert alert--warn"> <strong>Note:</strong> The <code>{layout:set}</code> tags are not output on the template itself, since they are intended to be output on the parent layout. If you need the contents to also display inside the <code>{layout:contents}</code>, you must output it separately.</p><p class="alert alert--warn"> <strong>Note:</strong> Using <code>{layout:set}</code> in a looping tag pair will set the layout variable with the last item in the loop. Layout variables can be intentionally overwritten this way, but is something to be mindful of.</p><p class="alert alert--warn"> <strong>Important:</strong> The name <code>contents</code> is reserved for the template data.</p>
		<h2>
		<span class="anchor" id="expanded-example"></span>
		<a href="#expanded-example">Expanded Example</a>
		</h2><p>The previous example can be made more dynamic by using layout variables. Your layout can now respond to the template that it is wrapping. For example, you could use variables to dynamically update the browser window’s title:</p><pre><code><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Site Name</span><span class="hljs-template-tag">{<span class="hljs-name"><span class="hljs-keyword">if</span></span> layout:title != <span class="hljs-string">''</span>}</span><span class="xml"> | </span><span class="hljs-template-tag">{<span class="hljs-name">layout:title</span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name"><span class="hljs-keyword">if</span></span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    </span><span class="hljs-template-tag">{<span class="hljs-name">layout:contents</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span></code></pre><p>By using a <a href="../templates/conditionals.html">conditional</a> we have made the title parameter optional. If the parameter is not given, or is blank, the title will simply be “Site Name”. Any template using this layout can choose to add to the output of the title tag using the parameter. You can even take it a step further. After setting a default section title in the parameter you can override it dynamically based on what your template is currently showing:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"site/_html-layout"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"News"</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">exp:channel:entries</span> <span class="hljs-attr">channel</span>=<span class="hljs-string">"news"</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">title</span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>

  </span><span class="hljs-template-tag">{<span class="hljs-name"><span class="hljs-keyword">if</span></span> total_results == <span class="hljs-number">1</span>}</span><span class="xml">
    </span><span class="hljs-template-tag">{<span class="hljs-name">body</span>}</span><span class="xml">
    </span><span class="hljs-template-tag">{<span class="hljs-name">layout:set</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"title"</span>}</span><span class="xml">News | </span><span class="hljs-template-tag">{<span class="hljs-name">title</span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name"><span class="hljs-keyword">if:else</span></span>}</span><span class="xml">
    </span><span class="hljs-template-tag">{<span class="hljs-name">summary</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{/<span class="hljs-name"><span class="hljs-keyword">if</span></span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">exp:channel:entries</span>}</span><span class="xml"></span></code></pre><p>Your title for this template will now show “Site Name | News” unless a single news entry is being displayed, in which case it will show a more user friendly title of “Site Name | News | Article Title”. Unlike header and footer embeds, this can all be done using a single <a href="../channels/entries.html">Channel Entries</a> loop which will improve the overall performance of this template.</p>
		<h2>
		<span class="anchor" id="nesting-and-embeds"></span>
		<a href="#nesting-and-embeds">Nesting and Embeds</a>
		</h2>
		<h3>
		<span class="anchor" id="nested-layouts"></span>
		<a href="#nested-layouts">Nested Layouts</a>
		</h3><p>Each template on your site can only specify a single layout. However, each layout can also use a layout, thus progressively nesting your template. For more complex sites this allows you to have a single HTML wrapper and still take advantage of layouts to build out the different sections of your site.</p>
		<h3>
		<span class="anchor" id="layouts-and-embeds"></span>
		<a href="#layouts-and-embeds">Layouts and Embeds</a>
		</h3><p>Layouts and embeds can be used together to create complex template hierarchies. When building nested template structures you should keep your layouts general and avoid nesting embeds or layouts too deeply. A good implementation will be easy to read and easy to follow. This will make your site more maintainable and it will help you spot performance bottlenecks more quickly.</p><p>It is important to understand how layouts and embeds can affect each other. Layouts are <a href="../templates/engine.html">processed before embeds</a>, so that setting a layout variable inside an embed cannot affect the layout of the embedding template. If an embed is using a layout, then the embed will be wrapped by that layout before being placed in the embedding template. Setting a layout variable inside the embed will be usable by the embed’s layout and that layout will have full access to the variables passed to the embed.</p><div class="table-wrapper"><table><thead><tr>
<th></th>
<th>Read Embed Variables</th>
<th>Set Embed Layout Variables</th>
<th>Set Parent Layout Variables</th>
</tr>
</thead><tbody><tr>
<td>Embedded Template</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>Parent Template</td>
<td>–</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>Embed Layout</td>
<td>Yes</td>
<td>–</td>
<td>No</td>
</tr>
<tr>
<td>Parent’s Layout</td>
<td>No</td>
<td>No</td>
<td>–</td>
</tr>
</tbody></table></div>
		<h2>
		<span class="anchor" id="complex-example"></span>
		<a href="#complex-example">Complex Example</a>
		</h2><p>Putting all of these together lets you create flexible page layouts with multiple dynamic sections. This example will add a sidebar and footer to the news example above.</p><p>We will keep the existing “site/_html-layout” from before, with a small addition to allow for additional JavaScript and CSS to be set from the template:</p><pre><code><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Site Name</span><span class="hljs-template-tag">{<span class="hljs-name"><span class="hljs-keyword">if</span></span> layout:title != <span class="hljs-string">''</span>}</span><span class="xml"> | </span><span class="hljs-template-tag">{<span class="hljs-name">layout:title</span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name"><span class="hljs-keyword">if</span></span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/assets/global.css"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> /&gt;</span>
    </span><span class="hljs-template-tag">{<span class="hljs-name">layout:css</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    </span><span class="hljs-template-tag">{<span class="hljs-name">layout:contents</span>}</span><span class="xml">
    </span><span class="hljs-template-tag">{<span class="hljs-name">layout:js</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span></code></pre><p>For the news section we will now have a separate layout that defines the structure of a given news page. Let’s call it “news/_layout”:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"site/_html-layout"</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{<span class="hljs-name">layout:set</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"title"</span>}</span><span class="xml">News</span><span class="hljs-template-tag">{<span class="hljs-name"><span class="hljs-keyword">if</span></span> layout:title != <span class="hljs-string">''</span>}</span><span class="xml"> | </span><span class="hljs-template-tag">{<span class="hljs-name">layout:title</span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name"><span class="hljs-keyword">if</span></span>}</span><span class="xml"></span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">layout:set</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"css"</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/assets/news.css"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> /&gt;</span>
</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set</span>}</span><span class="xml">

<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"wrapper"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"main"</span>&gt;</span>
    </span><span class="hljs-template-tag">{<span class="hljs-name">layout:contents</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">aside</span>&gt;</span>
    </span><span class="hljs-template-tag">{<span class="hljs-name">layout:sidebar</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;/<span class="hljs-name">aside</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre><p>Our news homepage “news/index” will use the news layout to show a list of recent entries and also provide a search box in the sidebar. We will use an embed for the search and come back to it later:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"news/_layout"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Recent"</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">exp:channel:entries</span> <span class="hljs-attr">channel</span>=<span class="hljs-string">"news"</span> <span class="hljs-attr">limit</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">dynamic</span>=<span class="hljs-string">"no"</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-tag">{<span class="hljs-name">url_title_path</span>=<span class="hljs-string">'news/article'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">title</span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
  </span><span class="hljs-template-tag">{<span class="hljs-name">summary</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">exp:channel:entries</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">layout:set</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sidebar"</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name">embed</span>=<span class="hljs-string">"news/_embed-search"</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set</span>}</span><span class="xml"></span></code></pre><p>We will use the “news/article” template to display the full article and change the sidebar to show an article list in addition to the search:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"news/_layout"</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">exp:channel:entries</span> <span class="hljs-attr">channel</span>=<span class="hljs-string">"news"</span> <span class="hljs-attr">require_entry</span>=<span class="hljs-string">"yes"</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name">layout:set</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{title}"</span>}</span><span class="xml">

  <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">title</span>}</span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>
  </span><span class="hljs-template-tag">{<span class="hljs-name">body</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">exp:channel:entries</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">layout:set</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sidebar"</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name">embed</span>=<span class="hljs-string">"news/_embed-search"</span>}</span><span class="xml">
  </span><span class="hljs-template-tag">{<span class="hljs-name">embed</span>=<span class="hljs-string">"news/_embed-recent-articles"</span>}</span><span class="xml">
</span><span class="hljs-template-tag">{/<span class="hljs-name">layout:set</span>}</span><span class="xml"></span></code></pre><p>For each element in the sidebar we will have a small piece of wrapping code in a layout, “news/_sidebar-layout”:</p><pre><code><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sidebar-item"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">layout:header</span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span>
  </span><span class="hljs-template-tag">{<span class="hljs-name">layout:contents</span>}</span><span class="xml">
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre><p>Now we can create “news/_embed-search” using the <a href="../add-ons/search/simple.html">Simple Search Form</a> tag:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"news/_sidebar-layout"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Search"</span>}</span><span class="xml">

</span><span class="hljs-template-tag">{<span class="hljs-name">exp:search:simple_form</span> <span class="hljs-attr">channel</span>=<span class="hljs-string">"news"</span>}</span><span class="xml">
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">maxlength</span>=<span class="hljs-string">"100"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Submit"</span>&gt;</span>
</span><span class="hljs-template-tag">{/<span class="hljs-name">exp:search:simple_form</span>}</span><span class="xml"></span></code></pre><p>And “news/_embed-recent-articles”:</p><pre><code><span class="xml"></span><span class="hljs-template-tag">{<span class="hljs-name">layout</span>=<span class="hljs-string">"news/_sidebar-layout"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Recent Articles"</span>}</span><span class="xml">

<span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
  </span><span class="hljs-template-tag">{<span class="hljs-name">exp:channel:entries</span> <span class="hljs-attr">channel</span>=<span class="hljs-string">"news"</span> <span class="hljs-attr">limit</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">dynamic</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">disable</span>=<span class="hljs-string">"custom_fields"</span>}</span><span class="xml">
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span></span><span class="hljs-template-tag">{<span class="hljs-name">title</span>}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  </span><span class="hljs-template-tag">{/<span class="hljs-name">exp:channel:entries</span>}</span><span class="xml">
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span></code></pre>

				<hr>

				<p class="docs-footer">
					<span>ExpressionEngine 5.4.2 Docs
					<br>
					<span class="copyright"><a href="https://packettide.com/">©2002–2021 Packet Tide,LLC.</a></span>
					</span>
					<a target="_blank" class="docs-contribute-to-page-button" href="https://github.com/ExpressionEngine/ExpressionEngine-User-Guide/blob/stability/docs/templates/layouts.md">Edit this page</a>
				</p>
			</div>
		</section>

		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
		<script type="text/javascript">
			docsearch({
				apiKey: 'ba20cc61ab2d8a0148041c98eeddd9c6',
				indexName: 'expressionengine',
				inputSelector: '#docsearch-input',
				algoliaOptions: { 'facetFilters': ["version:v5"] },
				debug: false
			});
		</script>

		<script src="../_assets/main.min.js"></script>
	</body>
</html>



