{"id":237,"date":"2021-02-26T03:23:54","date_gmt":"2021-02-26T03:23:54","guid":{"rendered":"https:\/\/michelelukowski.com\/?p=237"},"modified":"2021-02-26T20:12:05","modified_gmt":"2021-02-26T20:12:05","slug":"building-a-gallery-plugin-for-wordpress","status":"publish","type":"post","link":"https:\/\/michelelukowski.com\/?p=237","title":{"rendered":"Building a Gallery Plugin for WordPress"},"content":{"rendered":"\n<p>The gallery pages on my website are now powered by a plugin I wrote to create portfolio pages for my work. I built my own plugin for this for a few reasons.<\/p>\n\n\n\n<ol><li>Lean coding: I strive for efficiency and plugins can cause bloating of wordpress sites pretty quickly, so by writing my own plugin I was able to design exactly what I wanted and leave out parts I didn&#8217;t need.<\/li><li>Personal challenge: I hadn&#8217;t built a plugin using wordpress custom post types before and I thought that a gallery plugin would be a good fit.<\/li><li>Improving my website: I genuinely needed to start including some portfolio pieces on my website, since removing my online store last year. (backstory: The bulk of my website was previously an ecommerce site used as a catalog, and was primarily focused on my metalwork. I decided to keep just the wordpress blog portion and remove the ecommerce platform. Which left my site rather plain).<\/li><\/ol>\n\n\n\n<p>To build the gallery plugin, I started by having the plugin create a page for the gallery. I could have skipped this part and will probably remove it later on.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-page-function.png\"><img loading=\"lazy\" width=\"700\" height=\"419\" src=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-page-function-700x419.png\" alt=\"\" class=\"wp-image-238\" srcset=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-page-function-700x419.png 700w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-page-function-300x180.png 300w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-page-function-768x460.png 768w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-page-function-800x479.png 800w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-page-function.png 1140w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/figure>\n\n\n\n<p>The commented note for the page title is the clue to what makes this whole function not necessary. I opted to make a shortcode for the gallery content instead of creating the different pages through the plugin. The plugin still works, and still creates a page if needed, and inserts a shortcode automatically that will display all of the gallery posts. But I don&#8217;t need it to do that anymore.<\/p>\n\n\n\n<p>The next part was to create a custom post type. For my custom gallery posts, all I needed was an image and a title. And you can see from the commented out code that I changed my mind a few times as to how the posts would be organized and where they would display.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-custom-post-type.png\"><img loading=\"lazy\" width=\"700\" height=\"513\" src=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-custom-post-type-700x513.png\" alt=\"\" class=\"wp-image-239\" srcset=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-custom-post-type-700x513.png 700w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-custom-post-type-300x220.png 300w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-custom-post-type-768x563.png 768w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-custom-post-type-800x586.png 800w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-custom-post-type-80x60.png 80w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-custom-post-type.png 1138w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/figure>\n\n\n\n<p>What I decided to do was to create a custom taxonomy for the gallery posts that would be used to help determine which portfolio page the gallery posts appeared on.<\/p>\n\n\n\n<p>The next part of the code displays all of the posts of the custom post type, &#8220;mll_gallery_post&#8221; and orders them in descending order. If a category is passed in the shortcode, then the post array will only include posts from that category. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-post-content.png\"><img loading=\"lazy\" width=\"700\" height=\"465\" src=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-post-content-700x465.png\" alt=\"\" class=\"wp-image-240\" srcset=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-post-content-700x465.png 700w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-post-content-300x199.png 300w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-post-content-768x511.png 768w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-post-content-800x532.png 800w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-gallery-post-content.png 1134w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/figure>\n\n\n\n<p>To call the function to display the gallery posts, all I needed to do was add one line of code that turns it into a shortcode, and the plugin is ready to use.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-shortcode.png\"><img loading=\"lazy\" width=\"700\" height=\"15\" src=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-shortcode-700x15.png\" alt=\"\" class=\"wp-image-241\" srcset=\"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-shortcode-700x15.png 700w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-shortcode-300x7.png 300w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-shortcode-768x17.png 768w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-shortcode-800x17.png 800w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-shortcode-1080x24.png 1080w, https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/screenshot-shortcode.png 1102w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/figure>\n\n\n\n<p>With the plugin working, all I needed to do was add a little bit of CSS to display everything in a grid and center the content, and it&#8217;s all done (well, sort of).<\/p>\n\n\n\n<p>I do plan to make some updates to improve the functionality. Right now to change the order of items in the galleries, I would have to edit the post date. Not a big deal, but I&#8217;d like something more elegant. And I&#8217;ll remove the unnecessary parts of the code, and perhaps learn how to have the galleries insert as a block type, rather than a short code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The gallery pages on my website are now powered by a plugin I wrote to create portfolio pages for my work. I built my own plugin for this for a few reasons. Lean coding: I strive for efficiency and plugins can cause bloating of wordpress sites pretty quickly, so by writing my own plugin I&#8230;<\/p>\n","protected":false},"author":1,"featured_media":246,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[68],"tags":[73,74,72,69,70,71],"jetpack_featured_media_url":"https:\/\/michelelukowski.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot-gallery.png","_links":{"self":[{"href":"https:\/\/michelelukowski.com\/index.php?rest_route=\/wp\/v2\/posts\/237"}],"collection":[{"href":"https:\/\/michelelukowski.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michelelukowski.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michelelukowski.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michelelukowski.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=237"}],"version-history":[{"count":3,"href":"https:\/\/michelelukowski.com\/index.php?rest_route=\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/michelelukowski.com\/index.php?rest_route=\/wp\/v2\/posts\/237\/revisions\/255"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/michelelukowski.com\/index.php?rest_route=\/wp\/v2\/media\/246"}],"wp:attachment":[{"href":"https:\/\/michelelukowski.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michelelukowski.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michelelukowski.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}