NW Orchard Core
*SuperAdmin*
Orchard Core Resources
Official docs: https://orchardcore.net/
Step-By-Step initial theme creation (my tutorial): Theming Orchard Core. Part 1: Introduction & Project Creation | Medium
Links to references used in the tutorial:
- Theme creation video (painful to watch, but helped me a lot)
- Playlist walking through various Orchard Core development tasks - useful for getting to grips with terminology, debugging methods and general structure but many actual code examples no longer valid.
- Code generation templates - To assist in scaffolding the minimal files required for creation of new websites, themes and modules from the command shell
Debugging Tips
When using .liquid templates (which I've found are usually easier), there are a few tricks to help with debugging, since you cannot set breakpoints as you can in .cshtml files.
One aspect I find challenging is locating where in the model structure the content I need to display is.
{{ Model | console_log }} will output the object in the first portion (left of the | ) to the console in browser devtools.
<pre> {{ Model }} </pre> will render the object on the page.
These work both when working with file-based templates and also when working with templates within the OC templating module.
{
"LandingPage": {},
"AliasPart": {
"Alias": "Welcome!"
},
"AutoroutePart": {
"Path": "home",
"SetHomepage": false,
"Disabled": false,
"RouteContainedItems": false,
"Absolute": false
},
"BagPart": {
"ContentItems": []
},
"FlowPart": {
"Widgets": [],
"html": {
"Html": "\u003Ch1\u003EOrchard Core Resources\u003C/h1\u003E\u003Cp\u003EOfficial docs: \u003Ca href=\u0022https://orchardcore.net/\u0022 target=\u0022_self\u0022\u003Ehttps://orchardcore.net/\u003C/a\u003E\u003C/p\u003E\u003Cp\u003EStep-By-Step initial theme creation (my tutorial):\u0026nbsp;\u003Ca href=\u0022https://egoplacebo.medium.com/theming-orchard-core-d78c5cab1336\u0022\u003ETheming Orchard Core. Part 1: Introduction \u0026amp; Project Creation | Medium\u003C/a\u003E\u0026nbsp;\u003Cbr\u003ELinks to references used in the tutorial:\u003Cbr\u003E\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\u0022https://www.youtube.com/watch?v=wtAIgn4gYXc\u0026amp;t=2274s\u0022 target=\u0022_blank\u0022\u003ETheme creation video (painful to watch, but helped me a lot)\u003C/a\u003E\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022https://www.youtube.com/watch?v=cQJeS21wZHw\u0026amp;list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO\u0022 target=\u0022_self\u0022\u003E\u003C/a\u003E\u003Ca href=\u0022https://www.youtube.com/watch?v=cQJeS21wZHw\u0026amp;list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO\u0022 target=\u0022_self\u0022\u003EPlaylist walking through various Orchard Core development tasks\u003C/a\u003E\u0026nbsp;- useful for getting to grips with terminology, debugging methods and general structure but many actual code examples no longer valid.\u0026nbsp;\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022https://docs.orchardcore.net/en/latest/getting-started/templates/\u0022 target=\u0022_blank\u0022\u003ECode generation templates\u003C/a\u003E\u0026nbsp;- To assist in scaffolding the minimal files required for creation of new\u0026nbsp;websites, themes and modules from the command shell\u003Cbr\u003E\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003E\u003Cbr\u003E\u003C/p\u003E\u003Ch2\u003EDebugging Tips\u003C/h2\u003E\u003Cp\u003EWhen using .liquid templates (which I\u0027ve found are usually easier), there are a few tricks to help with debugging, since you cannot set breakpoints as you can in .cshtml files.\u003Cbr\u003EOne aspect I find challenging is locating where in the model structure the content I need to display is.\u003C/p\u003E\u003Cp\u003E{{ Model | console_log }}\u003Cspan style=\u0022font-weight: bolder\u0022\u003E\u0026nbsp;\u003C/span\u003Ewill output the object in the first portion (left of the | ) to the console in browser devtools.\u003Cbr\u003E\u003Cspan style=\u0022font-weight: bolder\u0022\u003E\u0026lt;pre\u0026gt;\u0026nbsp;\u003C/span\u003E{{ Model }}\u0026nbsp;\u003Cspan style=\u0022font-weight: bolder\u0022\u003E\u0026lt;/pre\u0026gt;\u003C/span\u003E\u0026nbsp;will render the object on the page.\u003C/p\u003E\u003Cp\u003E\u003C/p\u003E\u003Cp\u003E\u003Ci\u003EThese work both when working with file-based templates and also when working with templates within the OC templating module.\u003C/i\u003E\u003C/p\u003E"
}
},
"PreviewPart": {},
"TitlePart": {
"Title": "Home"
},
"ImageCarousel": {
"ContentItems": [
{
"ContentItemId": "42x7ezhstys2b52729352ckdd5",
"ContentItemVersionId": null,
"ContentType": "CarouselImage",
"DisplayText": "",
"Latest": false,
"Published": false,
"ModifiedUtc": "2025-09-05T07:34:43.2268972Z",
"PublishedUtc": null,
"CreatedUtc": null,
"Owner": "49yr1adg1hvvnzmk1m3brhdem1",
"Author": "SuperAdmin",
"CarouselImage": {
"Image": {
"Paths": [
"Stock/ze-maria-X4oKP1E2puY-unsplash.jpg"
],
"MediaTexts": [
""
]
}
}
},
{
"ContentItemId": "4ek9vvtredfv908vvtvqgfrbw3",
"ContentItemVersionId": null,
"ContentType": "CarouselImage",
"DisplayText": "",
"Latest": false,
"Published": false,
"ModifiedUtc": "2025-09-05T07:34:43.2278354Z",
"PublishedUtc": null,
"CreatedUtc": null,
"Owner": "49yr1adg1hvvnzmk1m3brhdem1",
"Author": "SuperAdmin",
"CarouselImage": {
"Image": {
"Paths": [
"Stock/tim-gouw-GdKxouPYLTU-unsplash.jpg"
],
"MediaTexts": [
""
]
}
}
},
{
"ContentItemId": "4dyd99d689r6r281hfhece2qcb",
"ContentItemVersionId": null,
"ContentType": "CarouselImage",
"DisplayText": "",
"Latest": false,
"Published": false,
"ModifiedUtc": "2025-09-05T07:34:43.2286383Z",
"PublishedUtc": null,
"CreatedUtc": null,
"Owner": "49yr1adg1hvvnzmk1m3brhdem1",
"Author": "SuperAdmin",
"CarouselImage": {
"Image": {
"Paths": [
"Stock/christian-von-koenig-lHurf0DjaYw-unsplash.jpg"
],
"MediaTexts": [
""
]
}
}
}
]
},
"HtmlBodyPart": {
"Html": "\u003Cstyle\u003E* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}.row{display:table;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;width:100%;}.cell{width:8%;display:table-cell;height:75px;}.heading{padding-top:5px;padding-right:0px;padding-bottom:0px;padding-left:15px;}#i25g{margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;font-family:Calibri;font-size:11pt;text-align:center;}#iix0j{margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;font-family:Calibri;font-size:11pt;text-align:center;}#i8czy{padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;background-color:rgb(255, 209, 209);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;margin-top:0px;margin-right:10px;margin-bottom:0px;margin-left:10px;border-top-width:1px;border-top-style:solid;border-top-color:rgb(109, 19, 19);border-right-width:1px;border-right-style:solid;border-right-color:rgb(109, 19, 19);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(109, 19, 19);border-left-width:1px;border-left-style:solid;border-left-color:rgb(109, 19, 19);border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;}#iewig{margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;font-family:Calibri;font-size:11pt;}#ihm4j{direction:ltr;unicode-bidi:embed;margin-top:0in;margin-bottom:0in;font-family:Calibri;font-size:11pt;}#is8xc{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#ionfg{font-size:11pt;}#i5oxp{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#i4tka{font-size:11pt;}#ihjzz{direction:ltr;unicode-bidi:embed;margin-top:0in;margin-bottom:0in;}#i5dm5{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#i3v8v{font-size:11pt;}#id5gu{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#i7wh5{font-size:11pt;}#iekmg{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#ivz5g{font-size:11pt;}#izvrl{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#i2xql{font-size:11pt;}#i9nd{border-top-width:1px;border-top-style:solid;border-top-color:black;border-right-width:1px;border-right-style:solid;border-right-color:black;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:black;border-left-width:1px;border-left-style:solid;border-left-color:black;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-top-left-radius:10px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:10px;background-color:rgb(255, 242, 230);}#ii3gv{border-top-width:1px;border-top-style:solid;border-top-color:black;border-right-width:1px;border-right-style:solid;border-right-color:black;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:black;border-left-width:1px;border-left-style:solid;border-left-color:black;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-top-left-radius:0px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:0px;background-color:rgb(255, 255, 246);}#indnhp{padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;background-color:rgb(246, 253, 234);border-top-width:1px;border-top-style:solid;border-top-color:rgb(38, 108, 25);border-right-width:1px;border-right-style:solid;border-right-color:rgb(38, 108, 25);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(38, 108, 25);border-left-width:1px;border-left-style:solid;border-left-color:rgb(38, 108, 25);border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;}#io47yi{margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;font-family:Calibri;font-size:11pt;}#i56csq{direction:ltr;unicode-bidi:embed;margin-top:0in;margin-bottom:0in;font-family:Calibri;font-size:11pt;}#ivt8kw{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#i0il0j{font-size:11pt;}#i1cr2m{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#i7rs91{font-size:11pt;}#iy3k39{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#ivo874{font-size:11pt;}#iedrf7{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#iwhq3g{font-size:11pt;}#ijx99e{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#iqgtv7{font-size:11pt;}#ifn80z{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#ib9ocm{font-size:11pt;}#i5qh5g{margin-top:0px;margin-bottom:0px;vertical-align:middle;}#iooh6j{font-size:11pt;}#ibxsg5{padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;}@media (max-width: 768px){.cell{width:100%;display:block;}}\u003C/style\u003E\u003Cbody\u003E\u003Cp id=\u0022i25g\u0022\u003ECreate a Content\r\n Type \u0026quot;Page\u0026quot; which includes Flow with HTML WYSI\r\n \u003Cspan id=\u0022ijed7\u0022\u003E\u003C/span\u003EWYG input (as a\r\n \u0026quot;Basic Page\u0026quot;)\r\n\u003C/p\u003E\u003Cp id=\u0022iix0j\u0022\u003E(assuming both\r\n widget \u0026amp; Page does not already exist) within the OC UI.\r\n\u003C/p\u003E\u003Cdiv id=\u0022iipq\u0022 class=\u0022row\u0022\u003E\u003Cdiv id=\u0022i9nd\u0022 class=\u0022cell\u0022\u003E\u003Csection class=\u0022bdg-sect\u0022\u003E\u003Ch1 class=\u0022heading\u0022\u003EBasic Page\r\n \u003C/h1\u003E\u003Cp class=\u0022paragraph\u0022\u003E\r\n \u003C/p\u003E\u003C/section\u003E\u003Cdiv id=\u0022i8czy\u0022\u003E\u003Cp id=\u0022iewig\u0022\u003E\u003Cb\u003ECreate the Parent\r\n Con\r\n \u003Cspan id=\u0022ib4p6j\u0022\u003E\u003C/span\u003Etent Type: Page\r\n \u003C/b\u003E\u003C/p\u003E\u003Col type=\u00221\u0022 id=\u0022ihm4j\u0022\u003E\u003Cli value=\u00221\u0022 id=\u0022is8xc\u0022\u003E\u003Cspan id=\u0022ionfg\u0022\u003ECreate new Type (give it a\r\n name: Basic Page)\u003C/span\u003E\u003C/li\u003E\u003Cli id=\u0022i5oxp\u0022\u003E\u003Cspan id=\u0022i4tka\u0022\u003EAdd Parts\u003C/span\u003E\u003C/li\u003E\u003Cul type=\u0022circle\u0022 id=\u0022ihjzz\u0022\u003E\u003Cli id=\u0022i5dm5\u0022\u003E\u003Cspan id=\u0022i3v8v\u0022\u003EAutoroute (if it needs an\r\n URL)\u003C/span\u003E\u003C/li\u003E\u003Cli id=\u0022id5gu\u0022\u003E\u003Cspan id=\u0022i7wh5\u0022\u003EFlow\u003C/span\u003E\u003C/li\u003E\u003Cli id=\u0022iekmg\u0022\u003E\u003Cspan id=\u0022ivz5g\u0022\u003ETitle (optional)\u003C/span\u003E\u003C/li\u003E\u003C/ul\u003E\u003Cli id=\u0022izvrl\u0022\u003E\u003Cspan id=\u0022i2xql\u0022\u003ESave\u003C/span\u003E\u003C/li\u003E\u003C/ol\u003E\u003C/div\u003E\u003C/div\u003E\u003Cdiv id=\u0022ii3gv\u0022 class=\u0022cell\u0022\u003E\u003Csection class=\u0022bdg-sect\u0022\u003E\u003Ch1 class=\u0022heading\u0022\u003EHTML WYSIWYG Widget\r\n \u003C/h1\u003E\u003Cp class=\u0022paragraph\u0022\u003E\r\n \u003C/p\u003E\u003C/section\u003E\u003Cdiv id=\u0022indnhp\u0022\u003E\u003Cp id=\u0022io47yi\u0022\u003E\u003Cb\u003ECreate the HTML\r\n Widget Content Type\r\n \u003C/b\u003E\u003C/p\u003E\u003Col type=\u00221\u0022 id=\u0022i56csq\u0022\u003E\u003Cli value=\u00221\u0022 id=\u0022ivt8kw\u0022\u003E\u003Cspan id=\u0022i0il0j\u0022\u003ECreate new Type (give it a\r\n name: Html WYSIWYG)\u003C/span\u003E\u003C/li\u003E\u003Cli id=\u0022i1cr2m\u0022\u003E\u003Cspan id=\u0022i7rs91\u0022\u003EAdd Part: HtmlBody\u003C/span\u003E\u003C/li\u003E\u003Cli id=\u0022iy3k39\u0022\u003E\u003Cspan id=\u0022ivo874\u0022\u003EOptionally give it a\r\n description\u003C/span\u003E\u003C/li\u003E\u003Cli id=\u0022iedrf7\u0022\u003E\u003Cspan id=\u0022iwhq3g\u0022\u003ESet the Stereotype as\r\n \u0026quot;Widget\u0026quot;\u003C/span\u003E\u003C/li\u003E\u003Cli id=\u0022ijx99e\u0022\u003E\u003Cspan id=\u0022iqgtv7\u0022\u003EEdit the HtmlBody Part\u003C/span\u003E\u003C/li\u003E\u003Cli id=\u0022ifn80z\u0022\u003E\u003Cspan id=\u0022ib9ocm\u0022\u003ESet the Editor to WYSIWYG\u003C/span\u003E\u003C/li\u003E\u003Cli id=\u0022i5qh5g\u0022\u003E\u003Cspan id=\u0022iooh6j\u0022\u003ESave, Save\u003C/span\u003E\u003C/li\u003E\u003C/ol\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003Cdiv id=\u0022ibxsg5\u0022\u003EThis content was created using GrapesJS\r\n\u003C/div\u003E\u003C/body\u003E"
}
}