[ad_1] Had I planned it out ahead of time, I would’ve went with the tabbed layout that I eventually used, right from the beginning. The overall process would have gone much smoother. Here’s what I think works better Once you decide on what you want your plugin to do on a broad-level, find existing plugins that do the same thing or that have some overlap. Install them on a dummy site using TasteWP and use them. But don’t just use them like a regular user. Use them like a UX researcher would use them. Make careful notes on how different things work. What do you like? What would you do different? After you perform this plugin testing, organize your notes. Then put together a detailed description of your prototype. Ask yourself how users will interact with it. Will they use shortcodes? Will they add extra blocks inside the block editor? Will there be a settings area on the back end? Cover all your bases. Consider using wireframes to visually map out how users will navigate their way around your plugin. You can get free wireframes over at Figma. When you finish the above, use your detailed description and possibly any wireframes you create, to give your first prompt to ChatGPT. My recommendation for the prompt is to start small and gradually build. This way you can more easily isolate and fix any bugs that come up. Using my plugin as an example, if I was to do it all over again, I’d first give GPT a broad overview of what I want to do. I’d also mention the tools and scripts I want to use. Then I would begin building only the first effect along with the corresponding area for it on the back end. I’d test it to make sure it works. If all was well, I’d add the next effect, and so on. Mistake #2: Ignored WordPress coding standards at the beginning Another big mistake I made was that I didn’t realize how big of a gap there is between simply building a plugin that works and building a plugin that is worthy of submission to the WordPress repository. You might be surprised, but going from zero to functioning plugin is much easier and faster than going from functioning plugin to well-coded plugin. To put this in real-number terms: It only took me about two or three days to build a functioning plugin, but it took me another seven weeks of work before I got it to a point where I was able to submit it to the WordPress repository for consideration. Even if your ultimate goal is not to submit your plugin and you only want it for yourself or a client’s website, you should still follow coding best practices. This will ensure that your plugin doesn’t cause other things to break on your site and doesn’t put an unnecessary strain on your site’s resources. Here’s what I think works better Make sure you tell ChatGPT (or Claude) right from the beginning that whatever code it generates should follow WordPress coding standards. If you’re planning on submitting your plugin to the WordPress repository, then for good measure, also add that any indentations should be done using tabs and not spaces. GPT has a tendency to default to spaces, but this goes against the coding standards. If you don’t nip it in the bud right from the get go, then you’ll have to deal with it later when you do your linting. Might as well do it correctly from the start. Mistake #3: Allowed GPT to constantly regenerate entire code files One thing you might be tempted to do when you have very little experience working with code is to ask ChatGPT to regenerate entire code files when you’re debugging. I was guilty of this, until I realized it was getting me nowhere. It’s not necessarily an issue if you’re dealing with a relatively small JavaScript file that’s 50 to a 100 lines long. However, as your plugin gets more complex and your main PHP file starts growing considerably, then it becomes highly problematic. For one, it takes GPT some time to generate that code. For example, let’s say you have a bug in a file that contains 800 lines of code. Now imagine the actual problem is found on only one of those 800 lines. Does it make sense to sit in front of your monitor for five minutes, watching GPT regenerate 799 lines that it doesn’t need to? No, it doesn’t. And here’s the other problem: As the length of your code grows, ChatGPT’s memory worsens. What ends up happening if you allow it to regenerate very long sections of code, is that it won’t only tweak the problematic lines you’re trying to debug, but it’ll also accidentally change other lines. So now you might fix the error you wanted to fix, but you’ll be stuck with some new error(s). If you continue going about it the same way, it will leave you in an endless loop of debugging. You’ll feel like you’re trapped in the Matrix. Neo won’t be coming to save you though. You must save yourself. Here’s what I think works better When you’re debugging, make sure to include very specific instructions to ChatGPT in your prompts to keep it laser-focused. After some trial and error, I found that telling it to do the following worked well: Please do not regenerate the entire file for me. Analyze and isolate the specific lines of code that you believe are causing the problem and show them to me. Explain what specifically about those lines you think might be the issue. Then explain how you are going to change the lines and what you expect the outcome to be as a result of the changes. Finally, please give me the updated lines in a code snippet so I can copy and paste them. Mistake #4: Used plain vanilla CSS instead of BEM CSS If there’s
Continue readingTag Archives: Building
New Missing Menu Items Plugin Adds Site Building Links to WordPress Admin – WP Tavern
[ad_1] If you are going all in on building sites with the new full-site editing (FSE) experience, then you may have noticed a lack of menu items that will deliver you directly to the tools you need to use. It may be because the Site Editor is still in beta, or because WordPress leadership may still be discussing whether to rename FSE. Perhaps it’s better that users don’t blindly stumble into FSE templates from the main admin menu, but some of these site building features are buried away with no quick access. For example, you are three clicks deep before arriving at Template Parts. Managing reusable blocks is also a tucked away on a separate screen that can be accessed through the post editor but sends you to a new page. If you’re using the block editor, and reusable blocks Do yourself a favor cut and paste this at the end of your website: /wp-admin/edit.php?post_type=wp_block Then bookmark it. — Ben LayerWP & WPDeals.email (@benswrite) October 26, 2022 When LayerWP founder Ben Townsend brought attention to this in a tweet, Roy Sivan responded with a link to a new free plugin that creates quicker access to these menus. Missing Menu Items expands the admin menu with links to reusable blocks, navigation menus, templates, and template parts, so they are all one click away. It adds them to the Appearance menu under the Editor (beta) link: If you are regularly working with Reusable blocks or editing navigation and templates, this plugin will save you some time and help you zip around the editor faster. Missing Menu Items was made by Easily Amused, the creators of Block Styles, a commercial plugin that lets users further customize core blocks with unique styles and boasts “fully responsive block-level design control.” The team will be adding more useful menu links and admin improvements in future releases. Users can contact the development team with menu item requests and they will consider them. Missing Menu Items is available on WordPress.org. Direct support is available for those who have purchased a BlockStyles membership, and community support can be found in the plugin’s forums on the directory. [ad_2] Source link
Continue readingA Versatile Approach to Building Attractive Websites
[ad_1] The Litho Multipurpose WordPress Elementor theme is a low-cost, high-value theme package that offers an abundance of options for creating great-looking WordPress websites exactly the way you want them. Whether you’re building a brochure-style site for your new business, an eCommerce store to sell your products, or a portfolio site to showcase your creative work, the 36+ homepage designs, coupled with over 200 elements and inner-pages ensure you’ll have everything you need to really represent your brand online in a way that truly works for you. Below, we’ll put Litho through its paces and outline what we like about it, what we think could be better, and whether this highly versatile Elementor theme is the right choice for your new website. Litho Multipurpose Elementor Theme Review Make no mistake about it, Litho is undoubtedly one of the most affordable Elementor theme packages we’ve come across recently. At the time of writing, it was available via Theme Forest at just $29 for a standard Envato license which includes all of its features, plus access to future updates and six months of support. If you’d like to update that support even further, you can extend it to 12 months for just an extra $6.38. This makes it very attractively priced compared to many other Elementor templates, but just because it doesn’t cost much doesn’t mean it doesn’t have much to offer. Having tried it on one of our demo sites, we found it very easy to use, full of attractive design options which help you to stand out among a sea of all-too-similar-looking websites, and with a much-welcomed focus on high-performance so that using it doesn’t slow your site down. We’re not the only ones who think so, either. Litho has only been around for a few short months but already boasts a Theme Forest rating of 4.75 and an impressive number of highly complimentary reviews for such a new theme. Article Continues Below Still, don’t just take our word for it. Here’s what it’s like to actually use Litho to design a site of your own. Building Your Website With Litho After installing and activating both the main theme and the all-important child theme, you’ll first be asked for all of the requisite plugins you’ll need to make the most out of Litho. These include: Other tools such as WooCommerce can also be installed at this stage, but honestly, this is only really necessary if you’re going to be building an eCommerce site. Even without that, the addition of these plugins ensures Litho provides even greater value for money as Slider Revolution on its own typically costs around $85. Litho Demo Import With the plugin installed, your next step is to install the demo content. Even this relatively small and often overlooked feature of theme installation is handled very well by Litho. If you want access to all of the content options, you can go ahead and simply choose the Full Import option, which will import everything that Litho has to offer. However, if you’re familiar with WordPress themes, you’ll no doubt know that these themes can often import far more templates and other content than you could even possibly use, all of which archives nothing more than leaving your site bloated, heavy, and cluttered. If you’d rather avoid that, Litho gives you the freedom to choose the individual import option and only upload those assets that you really want to use. WooCommerce Integration If you are using WooCommerce to start your own online store, Litho also offers a handy wizard which makes light work out of setting up and configuring the theme and the WooCommerce platform to work in sync. After using the wizard, you’ll find a selection of eCommerce themes that you can activate at the click of a button, meaning you’ve got a ready-made store up and running in moments. From there, you’ll find even more to like. The product galleries are very well designed to showcase your wares in the best possible light. Meanwhile, detailed filtering options and a modern mini-cart also help to enhance your customers’ experience, ultimately improving sales and repeat visits in the process. Litho Theme Options Once everything is important, installed, and ready to go, you can head to the standard WordPress customizer by selecting Appearance – Customize from the main WordPress dashboard menu and begin tweaking the main options for your site. The first task you’ll want to take care of is heading to the Homepage Settings options, where you can choose one of the countless page designs to serve as the main page for your website. Elsewhere, you’ll also find all of the usual customizer options along with theme options that are unique to Litho. These include: Custom 404 pages Custom sidebars Image metadata Side icons Social sharing options Title wrappers Plus the option to configure settings for: GDPR Search page Scroll to top and more. Editing Your Litho template with Elementor Even more than the multiple templates and design elements, the one thing we like best about Litho is that it’s built specifically to be edited with the Elementor site builder. Since Elementor itself is such a powerful and yet easy-to-use page builder, it means all you have to do to really take control of the look and feel of your website is to select the Edit With Elementor option for each page, click on the element you want to customize, and use the simple graphical interface to change it to your liking. Of course, if you decide to start from scratch, Elementor makes that easy too. There are an endless array of elements to choose from, including everything from animations, alert boxes, buttons, and calls to action to FAQs, forms, testimonial boxes, maps, and much more, all of which can be customized and combined in an infinite number of ways to create a true one-of-a-kind site. Section Builder Another great thing about Litho is that it takes this one step further by including a custom section builder.
Continue readingBuilding Backcast: Hit Pause | Tom McFarlin
[ad_1] On the whole, writing a post about other posts – aside being very meta – isn’t something I’m fond of doing. But here I am. At the beginning of this year, I started working on a podcast backup utility called Backcast and I’ve been documenting the project throughout the year in a series of posts. But given that I was making steady progress on this and given that it’s something I want to continue working on since it’s something I have use for, it seemed worth commenting on it if for no other reason than posterity. We’re all busy and I’m not going to pretend that I’ve more or less going on than any of the rest of you. That’s disingenuous, right? Suffice it to say that, like you, we’ve got a lot going on outside of work (and no, it’s not like there’s bad stuff going on – there’s a lot of good stuff going on, but stuff nonetheless.). Hit Pause on Backcast As such, I’ve gotta cut back on some of the things I’m doing and focus on what I already have going on (as well as what I want to have going on). In the last few weeks, I’ve written the following posts (aside from my resource posts): And I miss regularly publishing like I once did. I don’t know if I’ll get back into that kind of rhythm but I’ve a backlog of content to publish and I want to finish those posts. Further, I’ve got other areas where I’m sharing content, too. Pasting this from my personal blog: ✍🏻 This blog is backed up via my web host and I’ve access to all articles via RSS. 📸 I’m not really big on photography but I share things on Instagram like many of you nerds. 🎸 Lately, I’ve been doing more and more with guitar on Instagram reels. 🐦 I tweet a good bit but mostly about programming-related topics (with the occasional meme 🙂 📓 I journal almost daily using Day One and I have done so consistently for quite some time. So even if I’m not writing here, I’ve likely got something going out on one of those services. Give it a follow if you’re interested. I’ll Get Back To It I will unpause the project at some point and will continue to document whatever it is that I’m doing, but I don’t know when and I’m not going to impose an arbitrary deadline on myself when there’s so many things else in flux at the moment. If nothing else, it creates a feeling of guilt for not doing something that I don’t have to do. That’s backwards. I’d rather work on something I want to work on it and not feel the obligation to do so. [ad_2] Source link
Continue readingNew Boilerplate Speeds Up Building “Nearly Headless” WordPress Themes – WP Tavern
[ad_1] Alex Standiford, a WordPress developer at AffiliateWP, has released a boilerplate for what he is calling a “nearly headless” WordPress theme. It uses Underpin ,Nicholas, and AlpineJS to provide an app-like experience for a website while providing the flexibility for rendering specific pages using PHP instead of Javascript. In a post titled “Headless WordPress is Overrated: A Case for The Nearly-Headless Web App,” Standiford describes a few of the drawbacks of going fully headless. One problem with fully-headless WordPress is routing. Behind the scenes, WordPress has a lot of logic built-in to handle routing, and with a headless approach you have to build something to handle that on the front end. Ultimately, you’re re-inventing the wheel, and it takes a lot of extra time to build. Another problem with headless WordPress quickly becomes apparent the moment you try to use most WordPress plugins. The ugly truth is that you usually have to re-invent a lot of things just to get the plugin working properly. Standiford’s nearly headless system is a product of his rethinking headless WordPress. He wanted to preserve the app-like feel as well as all of WordPress’ built in capabilities and those available through the plugin system. The Nearly Headless WordPress theme uses AlpineJS for rendering, which Standiford says is light, easy-to-understand, and “plays exceptionally nice with PHP server-side rendering.” It is loaded around HTML template tags that source post content using WordPress’ REST API. The system uses session storage to keep things speedy and minimize the number of REST API calls. Standiford’s WP Dev Academy learning site and his agency, DesignFrame Solutions, are both using beta versions of the nearly headless system. Since the time those sites were developed, Standiford has completely rewritten the system and made significant improvements based on what from what he learned from earlier versions. He has a live demo of the current version available at nearly-headless.dev. .@DFS_Web’s website redesign will make it possible to visit any page without an internet connection shortly after the first page is loaded. This makes this site FAST even if your internet connection is slow. pic.twitter.com/keOxyMU8cq — Alex Standiford (@AlexStandiford) December 9, 2020 The nearly headless approach is comparable to a traditional headless approach in terms of performance, thanks to Standiford’s Nicholas library, which includes client-side caching and a routing layer as the application support for the theme. “Nicholas will load content via REST, much like how a headless site does,” Standiford said. “In these cases, the load times are very similar to what you’d see on a headless site. In fact, they behave, and fundamentally work in the same manner. The key is Nicholas also stores the data in session storage after the page is visited, and any time that page is loaded thereafter, it is loaded instantly.” How far can the boilerplate take you? Developers who use it should be ready to extend or replace the basic templates it includes to load WordPress. It doesn’t enqueue any CSS. Key functionality is broken into separate dependencies so users can stay up to date as the project evolves. “For all intents and purposes, the boilerplate is a blank slate,” Standiford said. “You can think of the boilerplate as _s for the nearly headless approach. All of the dependencies, scripts, and items needed to run the engine are included in the boilerplate. All of the dependencies are packaged up in Composer or Node, so your theme can be updated as the system improves without re-writing your entire theme.” Standiford has some major improvements planned for the future of the boilerplate. It is currently compatible with the block editor and many plugins but requires a compatibility mode. “The big up-front improvement is going to be removing the need for compatibility mode on as many pages as possible,” Standiford said. “Many block libraries, forms plugins, and other things have specific scripts that they expect are loaded on the page that the app has no way to know about, and because of this, some plugins won’t work without turning on compatibility mode. It is possible to make these work, but I would benefit from help from plugin developers to help me understand what styles/scripts need to be included when the app runs.” Standiford said he sees an opportunity to create npm packages that integrate other plugins, and ensure they work as expected. “Yoast and other SEO plugins for example set the SEO information in the head of each page, and right now that doesn’t happen without writing another piece of middleware,” he said. “It’s not too difficult to add it, but it’s one of those things that could be packaged up and included instead of manually being written for every theme that uses this approach.” Another item on the Nearly Headless WordPress theme boilerplate roadmap is improvements to how dependencies are compiled to better avoid plugin and theme conflicts. Standiford thinks this would make it easier to distribute themes built using this method on the WordPress.org directory, or even to sell them commercially. He has also been experimenting with automatically caching all the content on a page when it loads, without bogging down the browser or overloading the server with requests. The result would be instantaneous page loads with reduced server loads. The Boilerplate for Nearly Headless WordPress Themes is available on GitHub and Standiford is also creating a course that will help developers build sites using this nearly headless paradigm. He anticipates it will be released in November 2021. Like this: Like Loading… [ad_2] Source link
Continue readingBuilding a Higher Ed Header – WP Tavern
[ad_1] It feels like it has been ages since the WordPress community has had a call for testing Full Site Editing (FSE) features. The FSE Outreach Program was on a small hiatus. However, the WordPress 5.8 launch was also underway last month. The program is an open call for testing various components of FSE. Thus far, volunteers have successfully provided feedback on features that have already landed in core WordPress, such as block-based widgets and template editing. Testers have delved into others that have yet to be released. Each testing round is open to anyone who can spare a little of their free time and share their findings. The goal is to break things and point out problematic areas of the user experience. FSE Outreach #9 is a community-driven suggestion that calls for building a Higher Ed site’s header. Volunteers are asked to follow a 26-step process using the site editor beta feature in the latest version of the Gutenberg plugin and the TT1 Blocks theme. I am a fan of this take on testing, and program lead Anne McCarthy seems to favor doing more of it in the future. “If you’d like to suggest an idea for a call for testing, know it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue,” she wrote in the announcement. Since the project was all about Higher Ed, I decided to pay homage to my alma mater and use the colors that I wore proudly around campus for five years — and still do to this day. The following screenshot is the end result: Before going forward, I must admit that I cheated to get that final look. The call for testing asked that we build from the TT1 Blocks theme. I was able to get close to that result, but I had to switch to a custom theme I have been working on to get past a few hurdles. I went through each stage of testing with TT1 Blocks and will cover the issues I encountered. Building a Higher Ed Header Just getting off the ground, I ran into my first issue, which turned out to be a non-issue. The internet gods decided to play a trick on me, disallowing me from editing both the Site Title and Site Description blocks. I really wanted my fictional university to be “Gutenberg University,” but I could not do so without saving my progress and refreshing the browser tab. I was unable to replicate the issue, so I am hoping it was simply a fluke. Using the Navigation block still seems the most troublesome area of site editing. I know how much work the development team has put behind the user experience for this feature but cannot help but wonder if there is a point where users can opt into managing its content (the links) via the traditional Nav Menus screen in WordPress. The site editor works fine for the design aspect, but I have yet to feel comfortable using it to manage links. This stage of testing calls for adding multiple page links as both top-level and sub-menu items. When clicking the + button to add a link, my first instinct is to search for the page itself. However, the available field is a block search rather than a page search. Accidentally searching for link in block search field. To add an actual link, users must first add the Page Link block. Then, they can search for a specific page. This two-step process gets me every time. I ran into the issue for nav menus mentioned in the call for testing where there is no space between items when used inside a Columns block. It pains the purist in me to admit it, but I had to use the Spacer block between each item to fix this. I did not need to do this with my custom theme because, I am guessing, I addressed this somewhere along the way. The “space between items” option also failed to work with the Navigation block, ruining one of the early design ideas I had. I decided to go in a different direction. Using right-alignment with the Search block did not work. Therefore, I used the 100% width option to align it with my right-aligned nav menu. Time and time again, I needed to rely on the Spacer block to make adjustments. Part of this was because default margins and paddings are inconsistent among different blocks. The still-missing margin controls on nearly every block also played a hand in this. This is not particularly noteworthy. The development team is aware of and working on extending spacing controls — they just can’t get here fast enough for some of us. A spacing issue is what led me to ditch TT1 Blocks and switch to a custom theme. The following screenshot is my final work with the former. You may notice the gaping green background between the nav menu group and the header image below it. TT1 Blocks theme version with gap in header. No amount of tricks or rearrangement of blocks seemed to remove that space, and I simply could not live with that. I had already solved about 90% of Gutenberg’s spacing issues with my own theme and did not feel like writing any new CSS to address this. Making the switch also meant that I could get rid of several Spacer blocks I had in place. Aside from dropping in a header image, one other modification I made was skipping the addition of a Button block for the latest “Covid update.” I could not bear looking at TT1 Blocks’ overuse of padding. Instead, I nested a paragraph with a link within a column alongside a Navigation block. As always, I enjoyed the process. This post is meant to be critical of specific areas in the hopes that it helps build a better WordPress. For all its faults, many other parts offer a
Continue readingBuilding Backcast, Part 6 | Tom McFarlin
[ad_1] TL;DR: I’m tired of writing code without consistent standards (I often work on code that changes between WordPress or PSR2) so this is how I installed PHP Coding Standards via Composer and a few extra extensions for the project. This also details how to automatically format the code on save. Adding PHP Coding Standards I’ve talked about this in previous posts (or maybe several previous posts) but for the purposes of this project, I’m going to be using a certain extension within Visual Studio Code. Add PHPCS via Composer (and Running PHPCBF) First, I’m going to install it at the global level – or verify it’s installed at the global level and document it here for those who are following this series. To install it with Composer (and here’s how to install Composer), you can issue this command in the terminal (you can choose a different version but, at least a the time of this writing, this is what I’m using): $ composer global require “squizlabs/php_codesniffer=^3.5” Then, in the composer.json file located at the system level (if you’re on macOS, this will be something like /Users/your-user-name/.composer/composer.json, make sure it contains something like this: { “require”: { /* … */ “squizlabs/php_codesniffer”: “^3.5” }, “require-dev”: { /* … */ } } Then run: $ composer install And this will install PHPCS and PHPCBF which is the utility that will help format the code for any problems. Ultimately, I’m looking to make sure my output looks something like this. You can verify this works by entering the following command in your terminal: $ which phpcs And this should return: /Users/your-user-name/.composer/vendor/bin/phpcs You can also get information about the installed rules by running: $ phpcs -i And this will return something like this: The installed coding standards are PEAR, Zend, PSR2, MySource, Squiz, PSR1, PSR12 If you’ve gotten this far, then you’re ready to go with make sure Visual Studio Code has what it needs to use PHPCS. Add Support to Visual Studio Code First, I use the phpcs extension by Ioannis Kappas. This is where you can find it in the Marketplace. From the project page: This linter plugin for Visual Studio Code provides an interface to phpcs. It will be used with files that have the “PHP” language mode. phpcs Remember that it’s important to make sure this is installed Composer and you know how to access that path because the extension expects the binary to be available in the system. I keep it installed at the system level because I use it in some form across all of my projects. Next, Update the settings.json file for your project so that it contains the following two lines: “phpcs.executablePath”: “/Users/tommcfarlin/.composer/vendor/bin/phpcs”, “phpcs.standard”: “PSR2”, After doing this, then you should see errors show up in your code or you shouldn’t see anything different. If you’re writing PSR2-based code, you’re good to go; otherwise, you can easily fix it by using another extension. (Yes, you can use the terminal but automation can be a major time-saver here). Automatically Running PHPCBF Rather than writing a terminal command to do this, I recommend another Code extension called phpcbf. From the project page: This extension provides the PHP Code Beautifier and Fixer (phpcbf) command for Visual Studio Code. phpcbf is the lesser known sibling of phpcs (PHP_CodeSniffer). phpcbf will try to fix and beautify your code according to a coding standard. phpcbf Once you install it, you should be able to configure it very easily, again, in settings.json by doing the following: “phpcbf.executablePath”: “/Users/tommcfarlin/.composer/vendor/bin/phpcbf”, “phpcbf.enable”: true, “phpcbf.onsave”: true, “phpcbf.standard”: “PSR2”, This tells Code that where phpcbf is, to enable it, which standard to use, and to perform formatting whenever you save the file. You can also manually do it (as shown here). Until Part 6 With all of this in place, it’s now possible to make sure the code that’s being written is up to a consistent standard and to have the IDE actually take care of it for you automatically. Scattered Thoughts I’m thinking that some of the content in each of these posts would work well as stand-alone posts for things that others may be looking for (maybe some of the stuff here, maybe some of the stuff in other posts). I’m going to consider breaking some content out into separate posts. There’s no particular reason that I chose PSR2 over any of the other standards. I work with the rest enough and this is the one I chose just to keep on the up and up with said standard. (I’m not religious but what standards I use so long as I use an actual standard.) It’s been a little while since I’ve blogged about the work I’ve done on this project so the tone of this post is different than what I’ve done in previous posts. I know that. I ought to clean it up, but I probably won’t 🙂. I’m more concerned with information than the tone of the posts write now. [ad_2] Source link
Continue readingBuilding My First WordPress Block Plugin – WP Tavern
[ad_1] Like most years, I spent this U.S. Independence Day cooped up with my furry friends. I closed all the windows, shuttered the blinds, switched on a couple of fans for white noise, and clicked the television on. My cats and I relaxed. It is my job to keep them calm while my — usually drunken — compatriots burn hundreds of dollars away in the night sky. It is my ritual, and I enjoy it. For this holiday, we re-watched Season 1 of Star Trek: Lower Decks, and I learned how to build a block plugin. This was not my first attempt. When the block editor launched nearly three years ago, I tinkered with a few block type ideas. However, I never got far. Documentation was sparse, and I had almost no experience with JavaScript beyond building trivial bells and whistles for front-end design. Leaving my day job as a developer to write for WP Tavern also meant limited time to learn block development. And, my free time for the last couple of years has been filled with other projects. Lately, I have had the urge to jump back in and start building things for fun once again. My extended sabbatical from development work gave me time to pursue other interests while allowing my well of creativeness a chance to refill. The break did me some good. With time to kill yesterday afternoon, I dove right in. After a couple of hours of reading docs, studying other developers’ code, and breaking things, I had a functional block for a breadcrumbs list. Custom block registered and ready to insert. Marcus Kazmierczak’s Copyright Block plugin helped me get over one of the initial humps. It was helpful to see real-world, non-example code written in vanilla JavaScript to get to the meat of how the system worked. My overall thoughts on building custom block types? It was easier than I thought it would be. Documentation is, at the same time, both overwhelming and limiting. It is tough to find the correct answer if you do not even know what you are looking for. The barrier to entry is much higher than when I built my first plugin in 2007. The Block Type API makes some things stupidly simple but complicates others. Successfully inserting my first block type into the editor canvas was gratifying. I don’t think that feeling ever goes away as a developer. Successful insertion and rendering of my first block plugin. I am excited about the potential for blocks, such as a breadcrumbs list, when the site editor launches. Many similar features do not make sense in the post editor. However, when users can make direct edits to their templates, it will open a world of possibilities. Learning Curve I know enough JavaScript to be a danger to myself and others. Having spent almost the entirety of my professional career in the WordPress realm has meant focusing on PHP. But, programming is programming. Once you have a strong understanding of one language, it not an impossible leap to piddle around enough to create a functional script in another. Most of the same foundational concepts are there. The hurdle is often with learning some new syntax. However, the biggest obstacle with “modern” JavaScript is setting up the build tools, bundlers, and more. It can be a tall order to even type out that first line of code. Sure, some of the documentation has vanilla JavaScript examples, but when you get into anything more complex than the basics, it is not so vanilla anymore. You will need a way to bundle JavaScript and transform JSX syntax. That means tools like webpack and Babel. WordPress has its own script for cutting through most of the complexity, but I recommend Laravel Mix. It is simple enough for even the least-savvy JavaScript programmers among us and has thorough documentation. It is a script made for folks who want to worry less about tooling and more about actually writing code. Block building is also a different kind of leap. Whether it was custom template tags, shortcodes, widgets, or hooks, traditional WordPress development has meant building those in a PHP environment. I suspect that most plugin developers have tons of features that they can bring to the masses via the block editor. They will often rely on server-side rendering. WordPress has a ServerSideRender component for actually handling this. One of the handiest features of registering block types is the block “supports” system. Want a background color option? Just one line of code will do. Want the user to access the font-size control? That is a single line too. With little effort, I extended my breadcrumbs block to include a ton of styling options for users. And, they adapt to the site’s active theme. Testing various combination of block-supported styling options. The list of block-supported features offers an array of standardized options at pretty much no development cost. Even the Customize API, previously the most advanced tool for building form fields, did not come this close. Building custom inspector controls was straightforward once I got the hang of how the block edit piece of the puzzle worked. For now, I have a simple toggle option for enabling/disabling a feature. Often, the hardest part is just finding what you are looking for. WordPress has a massive library of components to choose from. At this point, I have a basic block on the client (editor) side. Most of the complexity is handled on the server via PHP. If I could build this in an afternoon while attending to nervous cats, it should not be a stretch for more plugin authors to hop aboard this train. There are thousands of shortcodes and widgets that developers can convert to blocks with minimal code. I am not ready to release my breadcrumbs block into the wild just yet. There is still some fine-tuning left to do and a few advanced features to implement. Also, a breadcrumbs list is primarily needed in a site
Continue readingWhat is the Better Course Building Plugin for 2021?
[ad_1] Selling online courses is one of the best ways to monetize your WordPress site. In this guide to LearnDash vs LifterLMS, I’ll compare two of the top course building plugins to determine the best one based on three criteria: By the end of this article, you should know whether LearnDash or LifterLMS is the better plugin for you. Table of Contents What to look for in a course building plugin Course building plugins, also known as Learning Management Systems (LMSs), must be flexible to accommodate a variety of course types and business models. Pay special attention to the following features: Visual course builder. You shouldn’t need to know how to code to build your courses. Most LMSs accomplish this using a combination of WordPress technology and drag-and-drop visual editors. Quiz builder. Most LMSs offer some kind of quiz editor, but the quality of these builders varies greatly from one plugin to the next. If quizzes are an important part of your courses, pay special attention to the options for question types and grading. Content dripping. This is the option to stagger the release of lessons. For example, you might want to set lessons to release every Monday, giving students a full week to work through them. Certification. Some LMSs allow you to offer completion certificates to students. They may also let you offer badges for students who complete certain sections of a course. Community. Most course building plugins allow for some interaction with lessons in the form of comments. Others may offer advanced community options like forums. Membership programs. Some course building plugins let you create membership programs for your courses. This is a great way to build a recurring income from your content. LearnDash review Features The following features are available with the Basic package from LearnDash: One site license Unlimited course creation Unlimited students Course content protection Content dripping Advanced quiz builder Certificates & badges Email notifications Free integrations Demo site template You can find out more by checking out the LearnDash pricing page. How to use LearnDash Setting up LearnDash You can get started with LearnDash by purchasing one of their plans. You’ll be asked for some basic information, then directed to a page where you can download your plugin. The plugin will download as a ZIP folder. You can install this in the “Plugins > Add New” area of your WordPress dashboard. Once the plugin is activated, you’ll be asked to enter your API key. This can be found on your purchase confirmation page or in the receipt sent to your email address. Once you’ve registered your plugin, you’ll be directed to the LearnDash bootcamp. This is a great resource and one of the first significant factors to consider in the debate of LearnDash vs LifterLMS. Creating lessons with LearnDash The next step of the process is to create a course. In LearnDash, this is best done by building your lessons and quizzes first, then compile them into a course with the course builder. To get started, head to the “Lessons” area of LearnDash and click the “Add New” button at the top of the page. This will open the LearnDash lesson editor, which looks a lot like the regular WordPress block editor. You can use this editor to format the lesson the same way you would format an ordinary page or article. This allows you to use a mix of media in your lessons, including video, text, and images. When you’re satisfied with the lesson’s content, click the “Settings” link at the top of the editor. You’ll be taken to an area where you can customize permissions, add support materials, enable assignment uploads, and more. You can save these settings at any time by clicking the “Publish” button in the top right corner. Creating a quiz with LearnDash The next part of LearnDash to explore is the quiz builder. You can access this by going to the “Quizzes” area of LearnDash and clicking the “Add New” button at the top of the page. This will take you to a page where you can enter the title and description of your quiz. Like the lesson editor, this part of the quiz builder uses WordPress technology to allow for the use of multimedia and customized formatting. Click on “Builder” to open the area where you can create, edit, and change the order of questions. Press the “+ New Question” link to open a question box. This is where you can add your question and answer. You can also choose how many points each question is worth. The quiz builder is one of the most notable things to consider in the debate of LearnDash vs LifterLMS. With LearnDash you can enter a variety of question types, including multiple choice, single choice, and essay answer. Once you’ve created all of your questions, click the “Settings” link at the top of the page. This will take you to an area where you can modify who can access the course, set prerequisite content, create a time limit, and more. Creating a course with LearnDash Once your content is created, it’s time to compile everything into a course. To do this, go to the “Courses” area of LearnDash and click the “Add New” button near the top of the screen. This will open a page where you can title your course and create a description for it. Like the quiz and lesson descriptions, this page uses WordPress technology to allow for multimedia content and the use of HTML/CSS. Next, click the “Builder” link at the top of the page. This will take you to the curriculum area of your course, where you can add, edit, and remove lessons and quizzes. The builder uses drag-and-drop functionality so you can reorder content at any time. When you’ve built the course, you can move on to the “Settings” area. This is where you can set course prerequisites, modify permissions, enable certification, and more. Getting paid with LearnDash LearnDash offers payment through PayPal. You
Continue readingBuilding Backcast, Part 4 | Tom McFarlin
[ad_1] TL;DR: The private podcast account is set up but not yet recorded; I’m looking to do that sooner rather than later. I’m looking to possibly abandon exclusive Overcast support which I’ll briefly talk about. This article walks through the process of defining the conditions for unit testing and how I’ve decided to go about writing the first set of unit tests. Building Backcast, Unit Testing Where Do I Go From Here? Originally, this post was going to be a combination of setting up PHPUnit and getting up and running with writing unit tests but, if you’ve been reading along, then you saw how well that went over. Honestly, I’m glad I encountered that early on in the process as it shows the random rabbit holes any of us end up in whenever we’re writing code. Secondly, after running into a hurdle with authentication with Overcast and deciding to just go with a manual export of podcast feeds, I started looking at a couple of different podcast applications to see how they exported their feeds. Ultimately, I was looking for a set of standards (which would include common attributes) that I could use to evaluate the validity of a file and to update the backup with only new information. (Of course, the first import is always going to be the largest.) I asked myself the following questions: Do I look for a file with a specific name? Do I verify the content of the file? Do I accept any XML file? Do I need to verify the size or date of the file? Some of these questions, like many, lead me into thinking about other things, too, but in trying to make as much progress as possible with as little friction as necessary, I decided to do the following: Verify the type of file (that is, an opml file), Verify that it’s well-formed or, rather, valid XML, Verify four attributes of the XML file that appear to be common across podcast exports. (I’m going to test for the opml tag, the rss value for the type attribute, the outline tag, and the xmlUrl key.) If any of these fail, then I’ll assume that I have an incorrect export. That seems to be a reasonable balance for now. And now that I have PHPUnit set up and running correctly, I can start writing unit tests. Test Data Before writing the tests, I want to make sure I have a couple of export files that I can test against. This, I hope, will verify the validity of the tests. I’m creating an exports directory in the tests directory and dropping in an export from Overcast and from Pocketcasts. And now that I’ve that done, I’ve merged the current feature branch into the develop branch. A Note About My GitHub Workflow In case I’ve not described this before, my workflow for this project includes creating a develop branch off of main and then a corresponding feature branch off of develop so that I can work on a single branch. As it stands, I’m trying to keep each branch with a specific post. I’ve not really shared them yet because it’s a private repository but once I have enough functioning code to throw out into the public, I’ll open the repository. Maybe by the end of this post, even. Writing Tests Before writing tests, I need to do the following: set up a core class in the src directory, set up the autoload functionality in the composer.json configuration file, and verify that PHPUnit can access my class Once that’s done, I can actually get into writing tests. But I need to get this scaffolding done first. Set Up a Core Class That’s in a Namespace Initially, I’d started out with a constant defined in the main file, but I’m going to move away from that. The fastest way for me to get from nothing-to-something is to set up a single class, for now, that will encapsulate the functionality I’m trying to test. This is the part where I rationalize not doing BDUF. Big Design Up Front (BDUF) is a software development approach in which the program’s design is to be completed and perfected before that program’s implementation is started. It is often associated with the waterfall model of software development. Wikipedia I share a little bit more in my Scattered Thoughts in the section at the end of this post. Refactoring the Bootstrap First, I’m creating a new branch (aptly called feature/add-validation-tests since that’s what I’ll be doing in this post) and I’m going to clean out the code in the core backcast.php file, or the bootstrap file, so that I can use it to instantiate an object from the class I’m going to be writing. This means the bootstrap file will look like this: #!/usr/local/bin/php <?php namespace Backcast; require ‘vendor/autoload.php’; new Backcast(); Note here, though, that I’m including the autoload.php file generated by Composer. Define Autoload Functionality Before going any further, let me share what the composer.json file looks like: { “name”: “tommcfarlin/backcast”, “description”: “An application used to backup podcast subscriptions via podcast XML exports.”, “require-dev”: { “phpunit/phpunit”: “^8” }, “autoload”: { “psr-4”: { “Backcast\”: “src” } }, “autoload-dev”: { “psr-4”: { “Backcast\Tests\”: “tests” } } } The two things I want to call out are the autoload and the autoload-dev areas. The first section tells composer where to locate files for the autoloader which is ideally used in production environments. The second section tells Composer that only the files in this area are intended for non-production environments. This means when you run composer dump-autoload –no-dev on the command-line, nothing will be generated for the tests directories. With that said, let’s set up the core class. The Initial Backcast Class First, I’m going to add a Backcast.php file to the src directory. I want to easily verify it’s been instantiated so to make this easy, it looks like this: <?php namespace Backcast; class Backcast { public function __construct() { echo ‘This class
Continue reading