Samuel Brynolf

WordPress development — get started

So you have already hacked some WordPress but want to go to the next level. Maybe you have a feeling of not always considering best practice? This is for all friends / co-workers paying any interest in WP-development.

These are my favorite resources to build WordPress sites beyond the regular blog-themes. I consider the concepts, practices and resources below as crucial and must-know.

Note: This article do not include any security issues for WordPress. Luckily there are loads of articles by more talented people than me, informing of best practice. Go scan internet!

Structure of your wordpress theme

Underscores Theme

Go through this theme from Automattic! Its a good way to get a feeling for a basic structure in a theme carried out well. http://underscores.me/

Templates

Wp is using templates, and it is a really good thing to know what is fallback to what and how to get specific templates. Like, if you don’t have a page.php the single.php will be used. And if there is no single.php, then index.php will be used. https://developer.wordpress.org/themes/basics/template-hierarchy/

get_template_part()

A useful function that is the WP way of include(). You should slice your theme in reusable parts (!), and when you do, you should use get_template_part(). https://kovshenin.com/2013/get_template_part/

Looping

How to loop with WP

https://digwp.com/2011/05/loops/ A pretty old article, but still gives a good overlook: The options you have for looping with WP. (When you are using wp_query or get_posts you could be VERY specific about your query, sort order, logic for what and when to loop a posts with arguments). Note that query_posts are outdated. See below: pre_get_posts

pre_get_posts():

http://devotepress.com/tutorials-hacks/wordpress-coding/when-to-use-pre_get_posts-in-wordpress/ This is an awesome way of manipulation the main loop, by what TEMPLATE file that is used (single.php, archive.php etc)

setup_postdata

Relates somewhat to above. Sometimes you want, or can only use, a loop that fucks upp the usage of template tags: you are not able to use template tags like the_title() or the_content() within your loop! (Since these tags/functions are built to work within the main normal loop). Then you are using setup_postsdata to make your custom loops work with all the template_tags you are used to, everywhere.

Scripts & styles

Enqueue & dequeue styles and scripts in WP

Read. Do.

Ajax

WP has already built in Ajax-support as a part of its core, for the admin part. The infrastructure is already there, with all its custom functions, making it EASY to implement frontend javascript with (heavy) backend functions.

Example: You could put a function in your functions.php (making a loop with posts, including html). With simple jQuery you could trigger that function with fronted — and carry out the html-build, wherever you want.

Imagine the possibilities with simple script that detects screen width for responsive sites and you could load content with logic from how big the screen is. Very handy to make a short lists of posts with just titles for a small screen explode in a large list with full blogposts and images – for a large screen. And make that update in realtime with a rezise-event!

Scan through the articles below. The last one is pretty complex, the second one could be something to start with. Well, all three are good 🙂

Tools

Build code blocks fast with Generate WP

Kick ass tool that makes you setup custom post types, taxonomies, shortcodes, sidebars, menus and what have you: https://generatewp.com/generator/

Crucial concepts

You should know these:

(Custom post types and custom taxonomies are a killer combo)

Using plugins

I try not to use plugins that I don’t know much about, but these ones I use in pretty much every project:

Comet-cache

https://sv.wordpress.org/plugins/comet-cache/ Easier to set up than wp-cache, still very good.

Contact form 7

https://sv.wordpress.org/plugins/contact-form-7/ Unfortunly this does not work so good with Comet-Cache due to how Contact Form 7 is developed: https://github.com/websharks/comet-cache/issues/500#issuecomment-125431183. Any replacements?

Advanced custom fields

http://www.advancedcustomfields.com Advanced custom fields is awesome, extending worpress as a cms. It just adds an layer of interface for custom fields in the admin part and let you create them from wp-admin. You still have to place the tags in your theme. But it just extends a core concept that is built in with WP, meaning that if your plugin don’t work or something gets buggy your information is put i WP database VERY similar if not the same, as normal custom fields.

Plus you can buy cheap add-ons that makes a admin-section for all custom global settings for your site. And a very useful repeater field.

Plus you can export the php function you built with a simple drag and drop interface in the wp-admin, and include directly in functions.php. Just activate the plugin in admin and all your fields will show up, without build the needed components over and over again.

Google XML Sitemaps (seo)

https://sv.wordpress.org/plugins/google-sitemap-generator/

Backup to Dropbox

https://sv.wordpress.org/plugins/wordpress-backup-to-dropbox It is insane to have a WP site without scheduled backups :/

Wp-html-Compression

https://sv.wordpress.org/plugins/wp-html-compression Compress html output. Seems to break in newer versions of WP. Consider compress markup but use another plugin.

WP-PageNavi

https://wordpress.org/plugins/wp-pagenavi Pagination made simple

SEO-plugin

https://yoast.com/wordpress/plugins/seo Search engine optimization

Most people uses plugins to extend wp-themes, just because they can not code the functionality themselves. But sometimes you must be able to build a plugin with something you already know how to code. Why: http://justintadlock.com/archives/2013/09/14/why-custom-post-types-belong-in-plugins

So learn how to make a (safe) plugin 🙂

Handling images

Handle responsive images with the src-set attribute are built in with WP. Yey! For a more finetuned alternative with some extra features: Make it Srcset