{"id":21760,"date":"2019-11-14T15:55:55","date_gmt":"2019-11-14T15:55:55","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=21760"},"modified":"2019-11-14T15:55:55","modified_gmt":"2019-11-14T15:55:55","slug":"34-wordpress-tutorials-for-modern-web-development","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/","title":{"rendered":"34 WordPress tutorials for modern web development"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">WordPress <\/span><a href=\"https:\/\/w3techs.com\/technologies\/details\/cm-wordpress\/all\/all\"><span style=\"font-weight: 400;\">now powers 34 percent<\/span><\/a><span style=\"font-weight: 400;\"> of all the websites \u2014 more than one third of the entire web. While its dominance can\u2019t be ignored, a lot of developers started getting frustrated with the CMS because up until recently it wasn\u2019t possible to incorporate modern code. As a result, WordPress sites started to look a little dated. Gutenberg, WordPress\u2019 much talked about new code editor, aims to change that. It offers a richer user experience and makes WordPress more attractive to developers again because it enables them to code in a way that\u2019s similar to building sites with popular JavaScript frameworks such as React and Vue. Gutenberg significantly changes how we approach content on the web.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, to help you get the most out of WordPress, we round up 34 fantastic WordPress tutorials from around the web in this article. We cover the foundations like how to get started with Gutenberg, speed up load time and ensure smart maintenance of your sites. But we also explore plenty of advanced techniques to demonstrate what\u2019s possible in modern web development with WordPress today. This includes using WordPress plugins to create CSS Grid layouts and interactive maps, building fast front-ends with Gatsby.js, and using WordPress as a headless CMS, which offers great flexibility and control to developers. Finally, we also cover internationalisation strategies and how to adapt and open up your sites to new markets.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s dive in!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Gutenberg<\/span><\/h2>\n<h3><a href=\"https:\/\/www.heartinternet.uk\/blog\/download-your-free-get-started-with-gutenberg-ebook\/\"><span style=\"font-weight: 400;\">Get Started with Gutenberg<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">For this free ebook, I\u2019ve invited five WordPress experts to explain how to upgrade to WordPress 5, design your first Gutenberg block, jumpstart your Gutenberg designs with SketchPress, and build Gutenberg blocks either with JavaScript or Advanced Custom Fields.\u00a0\u00a0<\/span><\/p>\n<h3><a href=\"https:\/\/webdesign.tutsplus.com\/tutorials\/how-to-create-custom-blocks-for-gutenberg--cms-33547\"><span style=\"font-weight: 400;\">How to Create Custom Blocks for Gutenberg<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Gutenberg has changed the way users create content within WordPress, and the way developers build WordPress plugins and themes. In this tutorial you\u2019re going to learn how you can create custom blocks for Gutenberg.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/LemeNDfLBxw\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3><a href=\"https:\/\/jeffreycarandang.com\/extending-gutenberg-core-blocks-with-custom-attributes-and-controls\/\"><span style=\"font-weight: 400;\">Extending Gutenberg Core Blocks with Custom Attributes and Controls<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Extensibility is one of the WordPress features that we love the most. In this article, WordPress specialist Jeffrey Carandang shares some of the lessons he\u2019s learned himself from actively participating on Gutenberg development on GitHub, starting with custom attributes and controls.<\/span><\/p>\n<h3><a href=\"https:\/\/www.billerickson.net\/building-a-wordpress-theme-with-gutenberg\/\"><span style=\"font-weight: 400;\">Building a WordPress Theme with Gutenberg<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">A detailed walkthrough of how WordPress developer Bill Erickson builds custom WordPress themes, including custom blocks, archive pages, and modular templates. Also see his <\/span><a href=\"https:\/\/www.billerickson.net\/category\/gutenberg-block-editor\/\"><span style=\"font-weight: 400;\">many other developer-focused Gutenberg tutorials<\/span><\/a><span style=\"font-weight: 400;\"> and his <\/span><a href=\"https:\/\/www.billerickson.net\/building-a-gutenberg-website\/\"><span style=\"font-weight: 400;\">Developer\u2019s Guide to Gutenberg<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><a href=\"https:\/\/felix-arntz.me\/blog\/using-css-custom-properties-ux-frontend-gutenberg\/\"><span style=\"font-weight: 400;\">Using CSS Custom Properties for Better UX in Frontend and Gutenberg<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Allowing users to customise your theme is crucial for adoption, but the usual CSS approach in WordPress is problematic. In this post Felix Arntz looks at a solution that uses Custom Properties to improve the UX for both website visitors and content creators, all at once.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/zTYUsySy6Cw\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3><a href=\"https:\/\/css-tricks.com\/managing-wordpress-metadata-in-gutenberg-using-a-sidebar-plugin\/\"><span style=\"font-weight: 400;\">Managing WordPress Metadata in Gutenberg Using a Sidebar Plugin<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">In this article, Ali Alaa discusses metaboxes and metafields in WordPress and specifically covers how to replace the old PHP metaboxes in Gutenberg and extend Gutenberg\u2019s sidebar to add a React component that will be used to manipulate the metadata with the global JavaScript Redux-like stores.<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">For more on Gutenberg, also see <\/span><\/i><a href=\"https:\/\/www.heartinternet.uk\/blog\/what-does-gutenberg-ready-mean-for-wordpress-themes\/\"><i><span style=\"font-weight: 400;\">What does \u2018Gutenberg-ready\u2019 mean for WordPress themes?<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">, <\/span><\/i><a href=\"https:\/\/www.heartinternet.uk\/blog\/12-gutenberg-friendly-free-wordpress-themes\/\"><i><span style=\"font-weight: 400;\">12 Gutenberg-friendly free WordPress themes<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">, and <\/span><\/i><a href=\"https:\/\/www.heartinternet.uk\/blog\/eight-things-your-wordpress-clients-need-to-know-about-the-gutenberg-editor\/\"><i><span style=\"font-weight: 400;\">8 things your WordPress clients need to know about Gutenberg<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> \u2014 all here on the Heart Internet blog.\u00a0<\/span><\/i><\/p>\n<h2><span style=\"font-weight: 400;\">Modern WordPress development<\/span><\/h2>\n<h3><a href=\"https:\/\/www.toptal.com\/wordpress\/modern-wordpress-development-pt-1\"><span style=\"font-weight: 400;\">How to Approach Modern WordPress Development<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">This series digs into real WordPress development: writing significant PHP, HTML, CSS, and JavaScript code. Part 1 covers the general workflow and WordPress front-end development, while part 2 is about <\/span><a href=\"https:\/\/www.toptal.com\/wordpress\/modern-wordpress-development-pt-2\"><span style=\"font-weight: 400;\">the PHP of modern WordPress back-end development<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><a href=\"https:\/\/www.smashingmagazine.com\/2019\/02\/wordpress-modern-php\/\"><span style=\"font-weight: 400;\">Improving WordPress Code With Modern PHP<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">A tour of the most relevant PHP features newly-available to WordPress, such as classes, namespaces, traits and closures, and various best practices of how these can be used to build better software.<\/span><\/p>\n<h3><a href=\"https:\/\/www.freecodecamp.org\/news\/wordpress-react-how-to-create-a-modern-web-app-using-wordpress-ef6cc6be0cd0\/\"><span style=\"font-weight: 400;\">How to Create a Modern Web App Using WordPress and React<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Want the advantages of a modern React single page app, but need a back-end that feels familiar? This article explains how to set up the WordPress REST API, including custom post types and fields, and how to fetch this data inside React.<\/span><\/p>\n<h3><a href=\"https:\/\/www.youtube.com\/watch?v=9KGuI0UmpMw\"><span style=\"font-weight: 400;\">Crash Course: Headless WordPress with WPGraphQL, ACF, and React<\/span><\/a><\/h3>\n<p><a href=\"https:\/\/twitter.com\/_WPCasts_tv_\"><span style=\"font-weight: 400;\">Alex Young<\/span><\/a><span style=\"font-weight: 400;\">, creator of the <\/span><a href=\"https:\/\/wpcasts.tv\/\"><span style=\"font-weight: 400;\">WPCasts<\/span><\/a><span style=\"font-weight: 400;\"> video tutorials site, presents a brief introduction to using WordPress as a headless CMS. The half-hour video tutorial goes over the basics of setting up a bare bones React app that uses WPGraphQL to query ACF data.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/9KGuI0UmpMw\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3><a href=\"https:\/\/snipcart.com\/blog\/wordpress-vue-headless\"><span style=\"font-weight: 400;\">Build a Vue.js SPA on Top of Headless WordPress<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">An experiment in using WordPress as a headless CMS with Vue.js. The tutorials covers creating models with custom fields in WordPress, building a custom endpoint for the WordPress REST API and setting up and hosting a Vue.js single-page app. Also see <\/span><a href=\"https:\/\/www.youtube.com\/watch?v=vrPWMXSrY9o\"><span style=\"font-weight: 400;\">Gbolade Ogunfowote\u2019s talk on how to integrate Vue with WordPress<\/span><\/a><span style=\"font-weight: 400;\"> from the 2019 JavaScript for WordPress Conference.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Plugins<\/span><\/h2>\n<h3><a href=\"https:\/\/css-tricks.com\/bringing-css-grid-to-wordpress-layouts\/\"><span style=\"font-weight: 400;\">Bringing CSS Grid to WordPress Layouts<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">This article introduces a plug-in called Grids that creates a bridge between the new block editor in WordPress and CSS Grid. It only takes care of the layout structure and enables you to manually specify dimensions, backgrounds, responsive behaviour \u2014 all using visual controls in the block editor.<\/span><\/p>\n<h3><a href=\"https:\/\/www.smashingmagazine.com\/2019\/09\/designing-complex-responsive-tables-wordpress\/\"><span style=\"font-weight: 400;\">Designing Complex Responsive Tables In WordPress<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Here\u2019s everything you need to know about designing complex tables for your mobile visitors in WordPress. The article explores the kinds of tables you can create, how to build user control into your table and how to use WordPress table plugin wpDataTables.<\/span><\/p>\n<h3><a href=\"https:\/\/css-tricks.com\/creating-interactive-maps-in-wordpress-with-mapsvg\/\"><span style=\"font-weight: 400;\">Creating Interactive Maps in WordPress with MapSVG<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Discover how to create feature-rich, interactive maps quickly with the MapSVG plugin. It comes with a smart admin UI and actually gives you five options for creating a new map based on vector, image, or Google Maps features but this article focuses on the SVG features.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21762\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/map.png\" alt=\"\" width=\"1480\" height=\"730\" \/><\/p>\n<h3><a href=\"https:\/\/kinsta.com\/blog\/advanced-custom-fields\/\"><span style=\"font-weight: 400;\">Advanced Custom Fields Tutorial: Your Ultimate Guide<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Advanced Custom Fields (ACF) is one of the most powerful and popular WordPress plugins. This guide explains why it\u2019s so valuable and how to apply it to your WordPress site. For more on ACF, don\u2019t miss Daniel Schutzsmith\u2019s articles in Heart Internet\u2019s free <\/span><a href=\"https:\/\/www.heartinternet.uk\/blog\/design-systems-free-ebook-download\/\"><span style=\"font-weight: 400;\">Design Systems<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/www.heartinternet.uk\/blog\/download-your-free-get-started-with-gutenberg-ebook\/\"><span style=\"font-weight: 400;\">Get Started with Gutenberg<\/span><\/a><span style=\"font-weight: 400;\"> ebooks.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Performance<\/span><\/h2>\n<h3><a href=\"https:\/\/www.designbombs.com\/optimizing-wordpress-site-speed\/\"><span style=\"font-weight: 400;\">The Complete Guide to Optimizing WordPress Site Speed in 2019<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">This article explores 26 ways a WordPress website can and should be optimised for performance, including hosting, CDNs, caching, minification, Gzip compression, lazy loading, security, more WordPress-specific topics such as themes and plugins, and more.<\/span><\/p>\n<h3><a href=\"https:\/\/markosaric.com\/speed-up-wordpress\/\"><span style=\"font-weight: 400;\">How to Speed up WordPress Page Loading Time<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Another 16 ways to speed up your WordPress site loading time and get the top score of 100 on Google\u2019s PageSpeed Insights, including optimising the WordPress database and activating Autoptimize to aggregate and minify CSS, HTML and JavaScript.<\/span><\/p>\n<h3><a href=\"https:\/\/wpmail.us2.list-manage.com\/track\/click?u=51dd0bd2831ba102ab61a6401&amp;id=e7c65faba2&amp;e=c424eb91d0\"><span style=\"font-weight: 400;\">10 Micro Optimisations for a Faster WordPress Website<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">This article goes further than the generic advice <\/span><i><span style=\"font-weight: 400;\">\u2014<\/span><\/i><span style=\"font-weight: 400;\"> use smaller images and don\u2019t forget to compress them, avoid too many plugins, leverage browser caching <\/span><i><span style=\"font-weight: 400;\">\u2014<\/span><\/i><span style=\"font-weight: 400;\"> and covers what we can do to further optimise WordPress websites to boost our speed, improve our responsivity and encourage Google to rank us higher.<\/span><\/p>\n<h3><a href=\"https:\/\/www.smashingmagazine.com\/2019\/06\/image-optimization-wordpress\/\"><span style=\"font-weight: 400;\">Image Optimization In WordPress<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">This step-by-step guide over at Smashing Magazine will help you learn how to easily optimise all the images on your site (manually or on autopilot using tools such as Optimole, ShortPixel, and Smush) in order to gain better loading times.<\/span><\/p>\n<h3><a href=\"https:\/\/www.rawkblog.com\/2019\/01\/loading-just-in-time-css-in-the-body-with-wordpress\/\"><span style=\"font-weight: 400;\">Loading Just-in-Time CSS in the Body with WordPress<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Inspired by Harry Roberts\u2019 post about <\/span><a href=\"https:\/\/csswizardry.com\/2018\/11\/css-and-network-performance\/\"><span style=\"font-weight: 400;\">CSS and Network Performance<\/span><\/a><span style=\"font-weight: 400;\">, David Greenwald shows us how to set up progressive CSS rendering with WordPress. Also see Nathan Rice\u2019s article on <\/span><a href=\"https:\/\/nathanrice.me\/blog\/wordpress-gutenberg-performance\/\"><span style=\"font-weight: 400;\">a better way to handle CSS overload<\/span><\/a><span style=\"font-weight: 400;\">, just for Gutenberg blocks, using a similar method.<\/span><\/p>\n<h3><a href=\"https:\/\/scotch.io\/tutorials\/blazing-fast-wordpress-sites-with-gatsby\"><span style=\"font-weight: 400;\">Blazing Fast WordPress Sites With Gatsby<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Learn how to integrate free and open-source React.js-based framework Gatsby.js with WordPress and build a robust and fast front-end. This post explores how to configure a basic project setup and use it to fetch data from a WordPress site. Also check out <\/span><a href=\"https:\/\/javascriptforwp.com\/porting-the-twenty-nineteen-wordpress-theme-to-gatsby\/\"><span style=\"font-weight: 400;\">Porting the Twenty Nineteen WordPress Theme to Gatsby<\/span><\/a><span style=\"font-weight: 400;\"> and watch this introductory WordPress and Gatsby talk:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/Df2AkeSS1PQ\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2><span style=\"font-weight: 400;\">Managing WordPress sites<\/span><\/h2>\n<h3><a href=\"https:\/\/managewp.com\/blog\/the-web-designers-guide-to-managing-wordpress-sites\"><span style=\"font-weight: 400;\">The Web Designer\u2019s Guide to Managing WordPress Sites\u00a0<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Once a site is built, designers often continue to help their clients manage their WordPress sites, improving the security, reliability, and performance. This article features two web designers and the lessons they\u2019ve learned managing multiple WordPress sites for their clients.<\/span><\/p>\n<h3><a href=\"https:\/\/www.heartinternet.uk\/blog\/how-to-activate-and-configure-a-wordpress-multisite-network\/\"><span style=\"font-weight: 400;\">How to activate and configure a WordPress Multisite network<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">In this post, Rachel McCollin explains exactly what WordPress Multisite is, works through some of its benefits, and shows us how to activate and manage a Multisite network from an existing WordPress installation.<\/span><\/p>\n<h3><a href=\"https:\/\/blogvault.net\/wordpress-updates\/\"><span style=\"font-weight: 400;\">How To Safely Update Your WordPress Site (Ultimate Guide)<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Updates can make your site slow down, cause errors or even result in a complete site crash. And if too many updates pile up, it becomes overwhelming to tackle them. But fear not, the BlogVault team jotted down everything you need to know about WordPress Updates.<\/span><\/p>\n<h3><a href=\"https:\/\/wpbuffs.com\/wordpress-permalinks\/\"><span style=\"font-weight: 400;\">Changing Permalinks in WordPress Without Blowing Up Your Site\u00a0<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">In this article, you\u2019ll learn everything you need to know about your WordPress site\u2019s permalinks, including why they\u2019re important (spoiler: they help guide users, as well as search engines), their basic structure and how they are created, and how to change your permalinks safely.<\/span><\/p>\n<h3><a href=\"https:\/\/www.toptal.com\/wordpress\/wordpress-maintenance-tips\"><span style=\"font-weight: 400;\">10 Tips to Make WordPress Maintenance Smooth<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">WordPress developer Hassan Jamal outlines 10 essential WordPress maintenance tips that could help you save hours of work and keep your websites up with relative ease, including installing your WordPress site locally, linting and debugging.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Internationalisation<\/span><\/h2>\n<h3><a href=\"https:\/\/pascalbirchler.com\/internationalization-in-wordpress-5-0\/\"><span style=\"font-weight: 400;\">Internationalization in WordPress 5.0<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Pascal Birchler explores the new internationalisation features in WordPress. If you\u2019re building a WordPress plugin or theme and want to make sure it can be fully localized, this post is for you. Also check out <\/span><a href=\"https:\/\/www.youtube.com\/watch?v=Aaen-C__Tfw\"><span style=\"font-weight: 400;\">Pascal\u2019s talk from the 2019 JavaScript for WordPress Conference<\/span><\/a><span style=\"font-weight: 400;\">, which covers the steps for making your JavaScript code work with WordPress internationalisation.<\/span><\/p>\n<h3><a href=\"https:\/\/translatepress.com\/how-to-create-a-multilingual-wordpress-site\/\"><span style=\"font-weight: 400;\">How to Create a Multilingual WordPress Site [The Complete Guide]<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Learn how to create a multilingual WordPress site, which will help you improve SEO and opens you up to a new audience who can browse your site in their preferred languages. This guide explains how to translate 100% of your content by simply clicking on a live version of your site \u2014 no special knowledge needed.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21763\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/multilingualwordpress.gif\" alt=\"\" width=\"512\" height=\"273\" \/><\/p>\n<h3><a href=\"https:\/\/blog.weglot.com\/best-practice-guide-for-wordpress-multilingual-websites\/\"><span style=\"font-weight: 400;\">A Best Practice Guide for Multilingual WordPress Websites<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">This article on the site of WordPress translation plugin Weglot covers 11 important best practices you should keep in mind when creating multilingual sites in WordPress, including providing simple language switching options, using dedicated URLs, considering cultural differences, and more. Also see <\/span><a href=\"https:\/\/themify.me\/blog\/how-to-make-a-multilingual-site\"><span style=\"font-weight: 400;\">How to Create a Multilingual Site With Themify and Weglot<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><a href=\"https:\/\/themeisle.com\/blog\/wordpress-geo-location\/\"><span style=\"font-weight: 400;\">How to Use WordPress Geo Location Targeting<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Discover how to use WordPress geo location data to personalise websites based on a user\u2019s physical location. This article digs into how geo targeting works, covers two useful plugins, and explains the best practices you need to keep in mind to use it effectively.<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">For more on WordPress, check out <\/span><\/i><a href=\"https:\/\/www.heartinternet.uk\/blog\/?s=wordpress\"><i><span style=\"font-weight: 400;\">all WordPress content on the Heart Internet blog<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">.\u00a0<\/span><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress powers over a third of the web, so get stuck into these 34 WordPress tutorials that will help you develop sites for the modern web.<\/p>\n","protected":false},"author":2,"featured_media":21767,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,27],"tags":[],"class_list":{"0":"post-21760","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-wordpress"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>34 WordPress tutorials for modern web development - Heart Internet<\/title>\n<meta name=\"description\" content=\"WordPress powers over a third of the web, so get stuck into these 34 WordPress tutorials that will help you develop sites for the modern web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"34 WordPress tutorials for modern web development - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"WordPress powers over a third of the web, so get stuck into these 34 WordPress tutorials that will help you develop sites for the modern web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-14T15:55:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"733\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"34 WordPress tutorials for modern web development\",\"datePublished\":\"2019-11-14T15:55:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/\"},\"wordCount\":1854,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg\",\"articleSection\":[\"Guest Posts\",\"WordPress\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/\",\"name\":\"34 WordPress tutorials for modern web development - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg\",\"datePublished\":\"2019-11-14T15:55:55+00:00\",\"description\":\"WordPress powers over a third of the web, so get stuck into these 34 WordPress tutorials that will help you develop sites for the modern web.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg\",\"width\":1100,\"height\":733},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"34 WordPress tutorials for modern web development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"34 WordPress tutorials for modern web development - Heart Internet","description":"WordPress powers over a third of the web, so get stuck into these 34 WordPress tutorials that will help you develop sites for the modern web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/","og_locale":"en_GB","og_type":"article","og_title":"34 WordPress tutorials for modern web development - Heart Internet","og_description":"WordPress powers over a third of the web, so get stuck into these 34 WordPress tutorials that will help you develop sites for the modern web.","og_url":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2019-11-14T15:55:55+00:00","og_image":[{"width":1100,"height":733,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"34 WordPress tutorials for modern web development","datePublished":"2019-11-14T15:55:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/"},"wordCount":1854,"commentCount":0,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg","articleSection":["Guest Posts","WordPress"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/","url":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/","name":"34 WordPress tutorials for modern web development - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg","datePublished":"2019-11-14T15:55:55+00:00","description":"WordPress powers over a third of the web, so get stuck into these 34 WordPress tutorials that will help you develop sites for the modern web.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/11\/person-in-wordpress-t.jpg","width":1100,"height":733},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/34-wordpress-tutorials-for-modern-web-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"34 WordPress tutorials for modern web development"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=21760"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/21767"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=21760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=21760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=21760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}