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:


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"
  }
}