{"id":1003,"date":"2015-11-18T18:35:24","date_gmt":"2015-11-18T18:35:24","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1003"},"modified":"2016-11-30T17:02:43","modified_gmt":"2016-11-30T17:02:43","slug":"cakephp-tutorial-part-3-working-with-elements-layout","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/","title":{"rendered":"CakePHP Tutorial Part 3: Working with Elements and Layout"},"content":{"rendered":"

In our previous tutorial, you have learned add, edit, and delete functionality in CakePHP<\/a>. Now we’ll show how can you integrate theme in CakePHP using your custom layout. CakePHP’s Element and Layout<\/b> feature helps you to customize your application layout. This tutorial is designed to help you for CakePHP theme integration by creating elements and layout.<\/p>\n

\"cakephp-tutorial-working-with-elements-layout-by-codexworld\"<\/div>\n

Elements<\/b> are the small and reusable bits of view code. Layouts<\/b> are the template files that contain presentational code together with rendered Elements. In this tutorial, we’ll divide the basic bootstrap template into elements and render those elements into our custom layout.<\/p>\n

As per our previous tutorial, we already listed the blog posts from the database and also implemented add, edit and delete operations. Now we’ll change the default template with our custom template.<\/p>\n

Assume that we have the following basic bootstrap template HTML:<\/b><\/p>\n

<!DOCTYPE<\/span> html>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>>\r\n<head<\/span>>\r\n    <meta<\/span> http-equiv<\/span>=\"Content-Type\"<\/span> content<\/span>=\"text\/html; charset=utf-8\"<\/span> \/>\r\n    <title<\/span>>CakePHP Tutorial by CodexWorld<\/title<\/span>>\r\n    <!-- Bootstrap Core CSS --><\/span>\r\n    <link<\/span> href<\/span>=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span>>\r\n    <!-- Bootstrap Core JavaScript --><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\"<\/span>><\/script<\/span>>\r\n<\/head<\/span>>\r\n<body<\/span>>\r\n    <!-- Navigation --><\/span>\r\n    <nav<\/span> class<\/span>=\"navbar navbar-inverse navbar-fixed-top\"<\/span> role<\/span>=\"navigation\"<\/span>>\r\n        <div<\/span> class<\/span>=\"container\"<\/span>>\r\n            <div<\/span> class<\/span>=\"navbar-header\"<\/span>>\r\n                <button<\/span> type<\/span>=\"button\"<\/span> class<\/span>=\"navbar-toggle\"<\/span> data-toggle<\/span>=\"collapse\"<\/span> data-target<\/span>=\"#bs-example-navbar-collapse-1\"<\/span>>\r\n                    <span<\/span> class<\/span>=\"sr-only\"<\/span>>Toggle navigation<\/span<\/span>>\r\n                    <span<\/span> class<\/span>=\"icon-bar\"<\/span>><\/span<\/span>>\r\n                    <span<\/span> class<\/span>=\"icon-bar\"<\/span>><\/span<\/span>>\r\n                    <span<\/span> class<\/span>=\"icon-bar\"<\/span>><\/span<\/span>>\r\n                <\/button<\/span>>\r\n                <a<\/span> class<\/span>=\"navbar-brand\"<\/span> href<\/span>=\"#\"<\/span>>CodexWorld<\/a<\/span>>\r\n            <\/div<\/span>>\r\n            <div<\/span> class<\/span>=\"collapse navbar-collapse\"<\/span> id<\/span>=<\/span>\"bs-example-navbar-collapse-1\"<\/span>>\r\n                <ul<\/span> class<\/span>=\"nav navbar-nav\"<\/span>>\r\n                    <li<\/span>>\r\n                        <a<\/span> href<\/span>=\"#\"<\/span>>Posts<\/a<\/span>>\r\n                    <\/li<\/span>>\r\n                <\/ul<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n    <\/nav<\/span>>\r\n    <!-- Page Content --><\/span>\r\n    <div<\/span> id<\/span>=<\/span>\"content\"<\/span> class<\/span>=\"container\"<\/span>>\r\n        <div<\/span> class<\/span>=\"row\"<\/span>>\r\n            <!-- Main contents will goes here --><\/span>\r\n        <\/div<\/span>>\r\n    <\/div<\/span>>\r\n    <footer<\/span>>\r\n        <div<\/span> class<\/span>=\"row\"<\/span>>\r\n            <div<\/span> class<\/span>=\"col-lg-12\"<\/span>>\r\n                <p<\/span>>Copyright &copy;<\/span> Your Website 2015<\/p<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n    <\/footer<\/span>>\r\n<\/body<\/span>>\r\n<\/html<\/span>>\r\n<\/pre>\n
Creating Element:<\/h2>\n
Based on the HTML we’ll create three elements head, header, and footer. In the src\/Template\/Element\/<\/code> directory create three files named head.ctp<\/code>, header.ctp<\/code> and footer.ctp<\/code>.<\/p>\n
head.ctp<\/code> file contains the following code:<\/b><\/p>\n
<?php
    <\/span>echo <\/span>$this<\/span>-><\/span>Html<\/span>-><\/span>charset<\/span>();
    echo <\/span>$this<\/span>-><\/span>Html<\/span>-><\/span>css<\/span>(<\/span>'https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css'<\/span>);
    echo <\/span>$this<\/span>-><\/span>Html<\/span>-><\/span>script<\/span>(<\/span>'https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js'<\/span>);
<\/span>?><\/span><\/span>\r\n<title<\/span>>CakePHP Tutorial by CodexWorld<\/title<\/span>>\r\n<\/pre>\n
header.ctp<\/code> file contains the following code:<\/b><\/p>\n
<!-- Navigation --><\/span>\r\n<nav<\/span> class<\/span>=\"navbar navbar-inverse navbar-fixed-top\"<\/span> role<\/span>=\"navigation\"<\/span>>\r\n    <div<\/span> class<\/span>=\"container\"<\/span>>\r\n        <div<\/span> class<\/span>=\"navbar-header\"<\/span>>\r\n            <button<\/span> type<\/span>=\"button\"<\/span> class<\/span>=\"navbar-toggle\"<\/span> data-toggle<\/span>=\"collapse\"<\/span> data-target<\/span>=\"#bs-example-navbar-collapse-1\"<\/span>>\r\n                <span<\/span> class<\/span>=\"sr-only\"<\/span>>Toggle navigation<\/span<\/span>>\r\n                <span<\/span> class<\/span>=\"icon-bar\"<\/span>><\/span<\/span>>\r\n                <span<\/span> class<\/span>=\"icon-bar\"<\/span>><\/span<\/span>>\r\n                <span<\/span> class<\/span>=\"icon-bar\"<\/span>><\/span<\/span>>\r\n            <\/button<\/span>>\r\n            <a<\/span> class<\/span>=\"navbar-brand\"<\/span> href<\/span>=\"#\"<\/span>>CodexWorld<\/a<\/span>>\r\n        <\/div<\/span>>\r\n        <div<\/span> class<\/span>=\"collapse navbar-collapse\"<\/span> id<\/span>=<\/span>\"bs-example-navbar-collapse-1\"<\/span>>\r\n            <ul<\/span> class<\/span>=\"nav navbar-nav\"<\/span>>\r\n                <li<\/span>>\r\n                    <?= $this<\/span>-><\/span>Html<\/span>-><\/span>link<\/span>(<\/span>'Posts'<\/span>, <\/span>'\/'<\/span>) <\/span>?><\/span><\/span>\r\n                <\/li<\/span>>\r\n            <\/ul<\/span>>\r\n        <\/div<\/span>>\r\n    <\/div<\/span>>\r\n<\/nav<\/span>>\r\n<\/pre>\n
footer.ctp<\/code> file contains the following code:<\/b><\/p>\n
<footer<\/span>>\r\n    <div<\/span> class<\/span>=\"row\"<\/span>>\r\n        <div<\/span> class<\/span>=\"col-lg-12\"<\/span>>\r\n            <p<\/span>>Copyright &copy;<\/span> Your Website 2015<\/p<\/span>>\r\n        <\/div<\/span>>\r\n    <\/div<\/span>>\r\n<\/footer<\/span>>\r\n<\/pre>\n
Creating Layout:<\/h2>\n
Layouts are stored into the src\/Template\/Element\/Layout\/<\/code> directory. Create your custom layout src\/Template\/Element\/Layout\/frontend.ctp<\/code>. In this file, elements would be rendered with the main content. frontend.ctp<\/code> file contains the following code.<\/p>\n
<!DOCTYPE<\/span> html>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>>\r\n<head<\/span>>\r\n    <?= $this<\/span>-><\/span>element<\/span>(<\/span>'head'<\/span>) <\/span>?><\/span>\r\n<\/head<\/span>>\r\n<body<\/span>>\r\n    <?= $this<\/span>-><\/span>element<\/span>(<\/span>'header'<\/span>) <\/span>?><\/span>\r\n    <!-- Page Content --><\/span>\r\n    <div<\/span> id<\/span>=<\/span>\"content\"<\/span> class<\/span>=\"container\"<\/span>>\r\n        <?= $this<\/span>-><\/span>Flash<\/span>-><\/span>render<\/span>() <\/span>?><\/span>\r\n        <div<\/span> class<\/span>=\"row\"<\/span>>\r\n            <?= $this<\/span>-><\/span>fetch<\/span>(<\/span>'content'<\/span>) <\/span>?><\/span>\r\n        <\/div<\/span>>\r\n    <\/div<\/span>>\r\n    <?= $this<\/span>-><\/span>element<\/span>(<\/span>'footer'<\/span>) <\/span>?><\/span>\r\n<\/body<\/span>>\r\n<\/html<\/span>>\r\n<\/pre>\n
Use Custom Layout:<\/h2>\n
You need to tell CakePHP to use your custom layout. In you controller (PostsController<\/code>) set the layout into the initialize()<\/code> function. Also you can use the different layout for different function by defining the layout into different functions.<\/p>\n
public function <\/span>initialize<\/span>(){
    <\/span>parent<\/span>::<\/span>initialize<\/span>();
    <\/span>\/\/ Set the layout
    <\/span>$this<\/span>-><\/span>viewBuilder<\/span>()-><\/span>layout<\/span>(<\/span>'frontend'<\/span>);<\/span>
}<\/span><\/pre>\n
Testing:<\/h2>\n
Open the posts listing page (http:\/\/localhost\/cakephp\/<\/code>) on the browser, you’ll see the post list with the custom layout.<\/p>\n
\"cakephp-tutorial-custom-layout-by-codexworld\"<\/div>\n","protected":false},"excerpt":{"rendered":"
In our previous tutorial, you have learned add, edit, and delete functionality in CakePHP. Now we’ll show how can you integrate theme in CakePHP using your custom layout. CakePHP’s Element and Layout feature helps you <\/p>\n","protected":false},"author":1,"featured_media":1004,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[12],"tags":[32,34,33,90,91],"class_list":["post-1003","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cakephp","tag-cakephp","tag-cakephp-3","tag-cakephp-3-x","tag-element","tag-layout","cat-12-id","has_thumb"],"yoast_head":"\nCakePHP Tutorial Part 3: Working with Elements and Layout - CodexWorld<\/title>\n<meta name=\"description\" content=\"CakePHP tutorial on Elements and Layouts - Integrate theme by creating elements and layout in CakePHP. Learn how to create custom CakePHP template.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CakePHP Tutorial Part 3: Working with Elements and Layout - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"CakePHP tutorial on Elements and Layouts - Integrate theme by creating elements and layout in CakePHP. Learn how to create custom CakePHP template.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-18T18:35:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-30T17:02:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/11\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"624\" \/>\n\t<meta property=\"og:image:height\" content=\"366\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"CakePHP Tutorial Part 3: Working with Elements and Layout\",\"datePublished\":\"2015-11-18T18:35:24+00:00\",\"dateModified\":\"2016-11-30T17:02:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/\"},\"wordCount\":276,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/11\\\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png\",\"keywords\":[\"CakePHP\",\"CakePHP 3\",\"CakePHP 3.x\",\"Element\",\"Layout\"],\"articleSection\":[\"CakePHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/\",\"name\":\"CakePHP Tutorial Part 3: Working with Elements and Layout - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/11\\\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png\",\"datePublished\":\"2015-11-18T18:35:24+00:00\",\"dateModified\":\"2016-11-30T17:02:43+00:00\",\"description\":\"CakePHP tutorial on Elements and Layouts - Integrate theme by creating elements and layout in CakePHP. Learn how to create custom CakePHP template.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/11\\\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/11\\\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png\",\"width\":624,\"height\":366,\"caption\":\"cakephp-tutorial-working-with-elements-layout-by-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cakephp-tutorial-part-3-working-with-elements-layout\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CakePHP Tutorial Part 3: Working with Elements and Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CakePHP Tutorial Part 3: Working with Elements and Layout - CodexWorld","description":"CakePHP tutorial on Elements and Layouts - Integrate theme by creating elements and layout in CakePHP. Learn how to create custom CakePHP template.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/","og_locale":"en_US","og_type":"article","og_title":"CakePHP Tutorial Part 3: Working with Elements and Layout - CodexWorld","og_description":"CakePHP tutorial on Elements and Layouts - Integrate theme by creating elements and layout in CakePHP. Learn how to create custom CakePHP template.","og_url":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2015-11-18T18:35:24+00:00","article_modified_time":"2016-11-30T17:02:43+00:00","og_image":[{"width":624,"height":366,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/11\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"CakePHP Tutorial Part 3: Working with Elements and Layout","datePublished":"2015-11-18T18:35:24+00:00","dateModified":"2016-11-30T17:02:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/"},"wordCount":276,"commentCount":11,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/11\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png","keywords":["CakePHP","CakePHP 3","CakePHP 3.x","Element","Layout"],"articleSection":["CakePHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/","url":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/","name":"CakePHP Tutorial Part 3: Working with Elements and Layout - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/11\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png","datePublished":"2015-11-18T18:35:24+00:00","dateModified":"2016-11-30T17:02:43+00:00","description":"CakePHP tutorial on Elements and Layouts - Integrate theme by creating elements and layout in CakePHP. Learn how to create custom CakePHP template.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/11\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/11\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png","width":624,"height":366,"caption":"cakephp-tutorial-working-with-elements-layout-by-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/cakephp-tutorial-part-3-working-with-elements-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"CakePHP Tutorial Part 3: Working with Elements and Layout"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/11\/cakephp-tutorial-working-with-elements-layout-by-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-gb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=1003"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1003\/revisions"}],"predecessor-version":[{"id":1988,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1003\/revisions\/1988"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/1004"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}