{"id":4190,"date":"2017-08-15T14:49:10","date_gmt":"2017-08-15T12:49:10","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4190"},"modified":"2020-02-09T10:59:46","modified_gmt":"2020-02-09T09:59:46","slug":"organizing-files-functions-wordpress-theme","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/organizing-files-functions-wordpress-theme-4190\/","title":{"rendered":"Organizing files and functions in a WordPress theme \u2013 my current state"},"content":{"rendered":"\n<p>Good organizing files and functions in a WordPress theme (respectively every coding project, of course) helps to keep it clear. This post shows my current state on organizing the files and functions in a WordPress theme.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>The following structure is from my <a href=\"https:\/\/florianbrinkmann.com\/en\/wordpress-themes\/photographus\/\">Photographus theme<\/a>. I do not list all files and folders (<a href=\"https:\/\/github.com\/FlorianBrinkmann\/photographus\">you can find everything in the GitHub repo<\/a>), the following is missing:<\/p>\n\n\n\n<ul><li>the single SCSS files which get imported.<\/li><li>files and folders from build scripts and other dev tools.<\/li><\/ul>\n\n\n\n<p>Here comes the file and folder structure of the theme (<a href=\"http:\/\/jekyllrb.com\/docs\/structure\/\">format adopted by the Jekyll documentation<\/a>):<\/p>\n\n\n<pre class=\"wp-block-code language-bash\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><div><code class=\"hljs language-php\">.\n\u251c\u2500\u2500 assets\/ <span class=\"hljs-comment\"># all JS, CSS, images<\/span>\n|   \u251c\u2500\u2500 css\/\n|      \u2514\u2500\u2500 scss\/\n|         \u251c\u2500\u2500 abstracts\/\n|         \u251c\u2500\u2500 base\/\n|         \u251c\u2500\u2500 components\/\n|         \u251c\u2500\u2500 conditionals\/\n|         \u251c\u2500\u2500 layout\/\n|         \u251c\u2500\u2500 templates\/\n|         \u251c\u2500\u2500 editor-style.scss\n|         \u2514\u2500\u2500 photographus.scss\n|   \u251c\u2500\u2500 images\/\n|      \u2514\u2500\u2500 starter-content\/\n|         \u2514\u2500\u2500 featured-image-about-page.jpg\n|   \u2514\u2500\u2500 js\/\n|      \u251c\u2500\u2500 customize-controls.js\n|      \u251c\u2500\u2500 customize-preview.js\n|      \u251c\u2500\u2500 functions.js\n|      \u2514\u2500\u2500 masonry.js\n\u251c\u2500\u2500 inc\/ <span class=\"hljs-comment\"># files with functions<\/span>\n|   \u251c\u2500\u2500 customizer\/\n|      \u251c\u2500\u2500 callbacks.php\n|      \u251c\u2500\u2500 register.php\n|      \u2514\u2500\u2500 scripts-<span class=\"hljs-keyword\">and<\/span>-styles.php\n|   \u251c\u2500\u2500 actions.php\n|   \u251c\u2500\u2500 cache-functions.php\n|   \u251c\u2500\u2500 filter-functions.php\n|   \u251c\u2500\u2500 filters.php\n|   \u251c\u2500\u2500 front-page-panel-functions.php\n|   \u251c\u2500\u2500 template-functions.php\n|   \u251c\u2500\u2500 template-tags.php\n|   \u2514\u2500\u2500 theme-updates.php\n\u251c\u2500\u2500 languages\/ <span class=\"hljs-comment\"># language files folder (if not on W.org)<\/span>\n\u251c\u2500\u2500 partials <span class=\"hljs-comment\"># template parts<\/span>\n|   \u251c\u2500\u2500 attachment\/\n|      \u2514\u2500\u2500 content-image.php\n|   \u251c\u2500\u2500 footer\/\n|      \u251c\u2500\u2500 nav.php\n|      \u251c\u2500\u2500 theme-author.php\n|      \u2514\u2500\u2500 widget-area.php\n|   \u251c\u2500\u2500 front-page\/\n|      \u251c\u2500\u2500 content-latest-posts-panel-short-version.php\n|      \u251c\u2500\u2500 content-latest-posts-panel.php\n|      \u251c\u2500\u2500 content-post-<span class=\"hljs-keyword\">and<\/span>-page-panel.php\n|      \u2514\u2500\u2500 content-post-grid-panel.php\n|   \u251c\u2500\u2500 header\/\n|      \u251c\u2500\u2500 branding.php\n|      \u2514\u2500\u2500 nav.php\n|   \u2514\u2500\u2500 post\/\n|      \u251c\u2500\u2500 content-none.php\n|      \u251c\u2500\u2500 content-single.php\n|      \u2514\u2500\u2500 content.php\n\u251c\u2500\u2500 templates\/ <span class=\"hljs-comment\"># page templates<\/span>\n|   \u251c\u2500\u2500 large-featured-image-no-sidebar.php\n|   \u251c\u2500\u2500 large-featured-image.php\n|   \u251c\u2500\u2500 large-portrait-featured-image-no-sidebar.php\n|   \u251c\u2500\u2500 large-portrait-featured-image.php\n|   \u2514\u2500\u2500 no-sidebar.php\n\u251c\u2500\u2500 archive.php\n\u251c\u2500\u2500 comments.php\n\u251c\u2500\u2500 footer.php\n\u251c\u2500\u2500 front-page.php\n\u251c\u2500\u2500 functions.php\n\u251c\u2500\u2500 header.php\n\u251c\u2500\u2500 image.php\n\u251c\u2500\u2500 index.php\n\u251c\u2500\u2500 page.php\n\u251c\u2500\u2500 readme.md\n\u251c\u2500\u2500 screenshot.png\n\u251c\u2500\u2500 search.php\n\u251c\u2500\u2500 sidebar.php\n\u251c\u2500\u2500 single.php\n\u2514\u2500\u2500 style.css<\/code><\/div><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Structure explanation<\/h2>\n\n\n\n<p>The highest level only contains files which cannot be moved into sub folders.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The <code class=\"lang-markup\">assets<\/code> directory<\/h3>\n\n\n\n<p>The <code class=\"lang-markup\">assets<\/code> folder holds the SCSS, JavaScript, and image files. The <code class=\"lang-markup\">scss<\/code> folder contains more folders with SCSS files, which are imported into the<code class=\"lang-markup\">editor-style.scss<\/code> and <code class=\"lang-markup\">photographus.scss<\/code>:<\/p>\n\n\n\n<ul><li><code class=\"lang-markup\">abstracts\/<\/code> holds files with variables, mixins, and functions.<\/li><li><code class=\"lang-markup\">base\/<\/code> keeps the files which style the base HTML elements.<\/li><li><code class=\"lang-markup\">components\/<\/code> is the place for the files which style components (like a post, a comment or a grid item).<\/li><li><code class=\"lang-markup\">conditionals\/<\/code> is for browser specific styles.<\/li><li><code class=\"lang-markup\">layout\/<\/code> for layout styles (grids, header, footer et cetera).<\/li><li><code class=\"lang-markup\">templates\/<\/code> keeps files with template-specific styles (front page template styles, no-sidebar styles\u2026).<\/li><\/ul>\n\n\n\n<p>I was inspired by several approaches for the SCSS organization \u2013 spontaneous I can name <a href=\"http:\/\/bradfrost.com\/blog\/post\/atomic-web-design\/\">Atomic Design<\/a> and <a href=\"http:\/\/rscss.io\/\">RSCSS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The <code class=\"lang-markup\">inc<\/code> directory<\/h3>\n\n\n\n<p>The inc folder is the place for all PHP functions of the theme. The <code class=\"lang-markup\">functions.php<\/code> just includes all these files. The functions are \u2013 if possible and sensible \u2013 grouped into various files.<\/p>\n\n\n\n<ul><li><code class=\"lang-markup\">actions.php<\/code> \u2013 all <code class=\"lang-php\">add_action()<\/code> calls.<\/li><li><code class=\"lang-markup\">cache-functions.php<\/code> \u2013 all functions which work with transients.<\/li><li><code class=\"lang-markup\">filter-functions.php<\/code> \u2013 functions which are called by <code class=\"lang-php\">add_filter()<\/code>.<\/li><li><code class=\"lang-markup\">filters.php<\/code> \u2013 the <code class=\"lang-php\">add_filter()<\/code> calls.<\/li><li><code class=\"lang-markup\">front-page-panel-functions.php<\/code> \u2013 all functions which have to do with the front page panels feature.<\/li><li><code class=\"lang-markup\">template-functions.php<\/code> \u2013 all functions which are not directly called from template files but cannot be grouped into other files.<\/li><li><code class=\"lang-markup\">template-tags.php<\/code> \u2013 functions which are called from template files.<\/li><li><code class=\"lang-markup\">theme-updates.php<\/code> \u2013 functions to provide automatic theme updates.<\/li><\/ul>\n\n\n\n<p>Because I grouped the customizer functionality into three files, I gave them an own sub folder <code class=\"lang-markup\">customizer<\/code>.<\/p>\n\n\n\n<ul><li><code class=\"lang-markup\">callbacks.php<\/code> \u2013 all customizer callback functions.<\/li><li><code class=\"lang-markup\">register.php<\/code> \u2013 function for creating settings, controls, and sections.<\/li><li><code class=\"lang-markup\">scripts-and-styles.php<\/code> \u2013 function to enqueue scripts and styles into the customizer.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">The <code class=\"lang-markup\">partials<\/code> directory<\/h3>\n\n\n\n<p>The <code class=\"lang-markup\">partials<\/code> folder contains the files, which display parts of the theme and are included in other files. For example, the <code class=\"lang-markup\">header\/branding.php<\/code> displays the website\u2019s title and description, the <code class=\"lang-markup\">post\/content*<\/code> files show the post content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The <code class=\"lang-markup\">templates<\/code>&nbsp;directory<\/h3>\n\n\n\n<p>The <code class=\"lang-markup\">templates<\/code> folder contains the post type template files.<\/p>\n\n\n\n<p>And that is my current state, which is of course exactly that: my current state and likely not the most elegant and best solution. <strong>You have comments, questions and\/or suggestions to improve the structure?<\/strong> Write a comment \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Good organizing files and functions in a WordPress theme (respectively every coding project, of course) helps to keep it clear. This post shows my current state on organizing the files and functions in a WordPress theme.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","lazy_load_responsive_images_disabled":false},"categories":[87],"tags":[],"wp-worthy-pixel":{"ignored":false,"public":"b86cfd0c2e6743b980db82abe867d4fe","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/b86cfd0c2e6743b980db82abe867d4fe"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4190"}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=4190"}],"version-history":[{"count":2,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4190\/revisions"}],"predecessor-version":[{"id":5859,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4190\/revisions\/5859"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}