How To Easily Embed SermonAudio Sermons In WordPress

SermonAudio.com is a powerful media browser with tons of great content. It allows ministries to easily put their sermons online for the world to listen. SermonAudio handles everything from audio to video streaming across a huge range of platforms.

Adding sermons to WordPress is a fairly simple task given WordPress’ oEmbed API. Churches, bloggers, and ministries could easily take advantage of it and should. Sermons can be embedded as citations, as recommendations, or even just to keep the content in circulation.

For the sake of this how-to I’ll be showing you the easiest way to embed SermonAudio sermons. I won’t go into the advanced process of creating widgets and shortcodes. I’ll only show you how to make sermonaudio.com links embed audio sermons automatically.

WordPress’ oEmbed API

WordPress has had the oEmbed API since version 2.9. It has consistently been updated, and has added support for new default providers over time. Unfortunately SermonAudio is not on their list of default providers, but there’s hope! The API itself is extendable so you are free to add your own providers if they’re not natively supported.

Using The API

oEmbed is a simple way to allow URLs to display embeddable content automatically. If you were to paste a link to a YouTube video in your post, WordPress would automatically get everything needed to display the video on your site.

Greg Bahnsen's Final Sermon

YouTube is only one example of a default provider, for a full list you can visit the WordPress codex.

Extend The API to Embed SermonAudio Sermons

Now lets try to achieve the same effect for SermonAudio content. In order for us to embed SermonAudio sermons we’re going to need to register SermonAudio as a provider, and then provide WordPress with link to SermonAudio’s sermon page.

We can register the provider by hooking into the init action in WordPress and adding the provider below.

Now that we have the provider registered we need to provide it with a url. This should be the url that we would like to be embeddable. On a side note, we will be working with some regex to parse the url. As an example we’ll use this sermon’s url.

http://www.sermonaudio.com/sermoninfo.asp?SID=36161418311

You may have already noticed the query variable “SID” in the URL. The value it holds is the ID of the sermon, and is what we need to parse so that we can render our sermon.

The first match in the regex is (www\.) which means that the www is optional. The second match in the regex is ([\d]+), this match requires that the value for SID is only an integer. Note, this will not work with a string.

Now let’s register SermonAudio as a valid provider, supply it with our regex string, and lastly give it a callback function to execute when regex finds a match.

Write The Callback Function

Now we need to add the proper callback wp_register_sermonaudio_embed to create the html needed for the embed.

Let’s try to understand what we’re working with. Our callback by default has 4 variables passed into it. The first variable is an array of regex matches, and for the sake of this tutorial we’ll only deal with that variable. Now let’s use the matches.

We use a sprintf function to pass the data into our iframe. The iframe makes a call to SermonAudio’s web player with the provided sermon ID which is stored in the second key of the $matches array.

Lastly we’ll return the $embed variable as a filter.

And that’s it! Now you can easily embed SermonAudio sermons by pasting SermonAudio links into your post, which would result in the following.

after embed SermonAudio sermons

The Plugin

In case you were looking for a plugin to do this job, I went ahead and packaged all of this plus a little bit more into a plugin which will be on the WordPress Plugin Repo soon. You can grab it now on Github. The plugin allows for multiple urls to be embeddable and currently only supports audio embeds. You can download them below.

Download on Github

Conclusion

SermonAudio is a really great platform that you can utilize for your ministry. In fact, I’ve built a few tools that integrate with their services already. If you’re already using them to power your online ministry I would highly recommend working with their APIs to customize your user’s experience.

Working With Roughneck

I began working as a stand alone web developer in July of 2013. Prior to that I had worked at an online marketing agency in McAllen for 3 years as a lead developer/technology director.

Since beginning my business and leaving my previous job I’ve moved 3 times, became engaged, and married my wife Stephanie. 6 months later my wife and I decided we wanted a child and in the 8th month of our marriage she became pregnant. 9 months later our son Nathan was born.

This goes to show that I’m not one who isn’t used to change, and change for the better I should say.

That being said, April was another month of big change in my life. For the first time in almost 3 years I have a job. That’s not to say that I didn’t work before because obviously running a business to provide for your family is a huge job in and of itself. But now I have what most people would call a normal job, except that it’s not that normal.

In April I began working full time with a great company that I’ve done some work for in the past. Roughneck Graphics is a San Antonio based online agency that has been around since 2009 and boasts some huge clients such as Harland Clarke Corporation, and Rackspace to name a few.

Roughneck as I call them, has hired me as a full-time frontend/backend web developer to help them continue building great products for their clients.

So what does this mean for my business and existing clients? I’m glad you asked! A part of the deal with Roughneck, and one of the main reasons that I signed on with them, was because unlike many other businesses which try to lord over their employees with non-compete agreements and the like, Roughneck has allowed me to remain helping my clients independent of Roughneck.

Obviously I wouldn’t want to compete with my employer to begin with. As a member of a team, one must value the team above himself in order for the team to be successful, and that’s exactly what I plan to do for Roughneck. I plan to shift the majority of potential clients as well in the direction of Roughneck because as a part of an agency I believe we can better serve the customer as a group rather than what I could do as an individual. This being said there are plenty of projects that are just too small for the agency to take on that I will willingly accept should they be a good fit for myself.

I also mentioned above that this job is not that normal, and I’d like to clarify what I meant by that. This job is the type of job that really has emerged with the advent of the internet, and the tech industry as a whole. It is sometimes referred to as a remote position which simply means that I can work from home wherever home may be. I will not be relocating to San Antonio, and will remain in McAllen with my family for the time being.

I’m excited for the future, to see what God has in store for me as an individual, husband, father, and member of Roughneck. Please feel free to visit our website roughneckgraphics.com for more information about the business and the services that we offer. God Bless.

The Future Of The Internet

I’ve been a web developer since early 2008. Before that I had tried many other things, but it was ultimately web development that I fell in love with and pursued as my career.

In 2008 web development was much more simple than it is today. The internet was made up of business websites, blogs, news, and that was pretty much it. There were no Spotify’s, Rdio’s, or Google Apps. Other than Gmail and a few other services, there really wasn’t a large majority of the web that was running sophisticated web applications.

Fast forward to today (June 2016) and the web is a much more complex place. The number of options the free market has created are just too many to count. Even the smallest of tasks can have 10 to 20 options to choose from and that would be a conservative estimate. The web is the best modern example of what capitalism produces when people are left free to create and distribute as they please. It’s the main reason that I was attracted to the web over everything else in my teens. It was easy for someone with no experience and hardly any knowledge to be able to publish whatever I wanted.

But what is the web today? How has it changed? And what is the future of the internet as we know it? These are questions that I ask myself very often, because to know the answer could be the difference between having a small and insignificant business to being a PayPal or Google of sorts. It’s not that I desire to have a PayPal or Google under my belt, but because I want to be a part of the train that is moving technology and history forward.

So what is the web today then? That’s a simple question with a much more complicated answer. The simplest explanation of the web would be very similar to what I mentioned above. The web is a network of servers all around the world that are connected to each other, and to you if you have an internet connection.

Simple enough, but have things really changed all that much? This is a much better question to ask. The obvious answer is YES! Of course things have changed. The internet has become faster, and technology has taken huge advantage of it.

In 2008 only the largest companies around the world could afford to have an ecommerce shop. Today nearly anyone can open one, and market and sell as they please.

Today over half of all internet traffic originates from mobile devices. That’s not even accounting for the fact that most apps use web based API’s to power their content.

The internet is no longer defined as a collection of business sites, blogs, news, and sports. The web is changing and evolving rapidly, and to be honest it’s really hard to keep up.

The Future Looks Bright For This Ship

If you were to ask me what I think the future holds for the web, I’d honestly and joyfully answer “I don’t know”.

I don’t know the specifics of how the web will change, but I suspect that we’ll live in a world that is smarter. Smarter in the sense that everything we do will be connected to an API and database somewhere around the world.

Web based API’s are the backbone of software development and the future will show that to be true.

Just 5 years ago I would’ve had to type this very post in Microsoft Word, and save it to 2 different hard drives just to make sure it was safe before I upload it. Today I’m typing it in Google Docs. Every letter I type fires an event that sends the content of this article to a server where it’s stored and backed up (and again that’s done for every single keystroke). There is no save button, and I can even leave the desk that I’m sitting at now and continue typing on my phone without missing any information at all.

This is all due to a complex but ever simplifying process that is taking place in web development. It is the direct result of the internet and the generation of API’s which sprung up from it. Web based API’s are the backbone of software development and the future will show that to be true. No longer will you have the need to even install applications on your computers. Every application that is stored on your hard-drive will eventually be replaced by a web based version of that application, or at the very least a stripped down version the application which handles its content in the web.

I believe that the world is headed in this direction in every single area where a circuit board exists, and even in areas where they currently don’t. I believe that as a web developer, I am tasked along with my peers to ring in the future of the internet and of civilization. The world needs more connections, and if the web is left free I believe developers will make them.

Customize Mobile Browsers With WP Color Browser

Android Authority Mobile
Android Authority as viewed on a Nexus 6P

Recently I was visiting Android Authority on my phone and I realized that there was something different about it. I noticed that the color of the browser had changed to match the site. Naturally I thought this was something that Google Chrome did automatically, but I was wrong. I visited a few of my sites, and to my surprize they all looked the same. I had also just upgraded my phone from the really outdated Samsung Galaxy Note II, to the Nexus 6P by Huawei. The Nexus as always is running the latest version of Android, which is why I was able to see the change in color.

After a few weeks of browsing around in Google Chrome, I noticed that multiple websites I browse on a daily basis had this functionality built into them and I wanted that for my sites.

I did some searching around and found out that those sites all implemented an HTML meta attribute to achieve the effect. Its nothing fancy and can be done with only one line of code.

Once I realized how easy it is to implement I decided to build WP Color Browser, a WordPress plugin that allows you to choose the color to display from the dashboard of WordPress. WP Color Browser is easy to use as there is only one option (the color for the browser). Once you’ve chosen the color you would like to use, WP Color Browser automatically adds the necessary HTML to your website’s header so that you can take advantage of this new effect.

WP Color Browser Settings
The simple settings for WP Color Browser.

WP Color Browser is free to download from WordPress.org. Currently it only works with Chrome because none of the other mobile browsers have implemented it just yet. I will be adding support for them as they adapt. Please feel free to contact me if you have any problems with it, or if you would like a consultation to develop a plugin like WP Color Browser, for your business’ needs.

Download WP Color Browser On WordPress.org

Hire A Web Developer, Don’t Build It Yourself

Why would I hire a web developer? Isn’t it cheaper to sign up for Shopify, Wix, or Squarespace? Can’t I just buy a theme and set it up all by myself?

If you’ve asked these questions before then chances are you tried to do it all by yourself and didn’t realize what you had gotten yourself into until you began. Sure you may be a DIYer who loves to create pallet furniture and find new uses for old hardware around the house, but your website (be it personal or business) is not something you can afford to mess up.

You can’t afford to mess up your website for 2 reasons. 1) because your site is a public display of you or your business and 2) because fixing a mess takes more time and money which could’ve been put to better use from the beginning.

I understand though, you like to get things done for yourself. Me too! There are plenty of projects that I take on that have nothing to do with web development, but there are things that I simply can’t do, or can’t do well at least.

For instance, I wouldn’t dare try to fix electrical problems in my home unless I were an electrician. You likewise wouldn’t try to raise your ceilings unless you were a contractor. Why? Because these are projects that require a lot of skill, knowledge, labor, and experience.

But building a website is different right? You don’t need to hire a web developer. After all anyone can create a website, so it doesn’t require much skill or knowledge. Wrong! Sure anyone can try to build a website, in the same way anyone can try rewire a kitchen’s electrical outlets. The question you have to ask yourself is how much time and effort can you really devote to this? How many hours will it take you just to move the ball a short distance down the road?

Ok you got me, so why should I hire a web developer? What are the specific benefits of not just doing it myself?

Well to begin, anytime you hire a professional you are hiring that person to do a job that he/she is qualified to do. A professional web developer has spent countless hours learning and doing that task which you want them to do for you. When you hire a web developer you are paying him for the expertise that he has picked up over the years.

That may not be news to you, but it must be stated simply because many people think that to hire a web developer is pointless today.

Web development has evolved exponentially over the past decade to mean many different things. It used to be as simple as writing code, and then publishing that code online. Nowadays a web developer is almost always expected to be able to meet the following requirements.

  1. Install & update themes
  2. Install plugins
  3. Manage a server
  4. Manage email
  5. Write code for SEO
  6. Build websites from scratch
  7. Build themes from scratch
  8. Build plugins from scratch
  9. Implement new technologies on old projects
  10. etc

It’s evident that the bar has been raised quite a bit, and this is exactly why you should hire a web developer to handle your website. A web developer is fit for the task ahead of him, and he can perform that task quickly and professionally. Whether you decide to install a theme, or create a project from scratch, your best bet is to hire someone who knows how to do the job so that you can continue to do what you’re good at; running your business.

Getting Started With WordPress Filters

WordPress filters are one of the major contributors to WordPress’ over all success. They allow developers to extend WordPress tremendously in themes and plugins, which is the main reason why so many developers like myself have adopted the platform.

So what are WordPress filters and how can I use them in my next theme? In short, WordPress filters are a way for you to modify a specific piece of information. Now this might not make sense right away but once you see the code it should begin to.

Understanding WordPress’ Plugin API

WordPress Plugin APIIn order to create a new filter we have to first understand what WordPress filters are and when to use them.

WordPress filters are one of the two types of hooks in the WordPress Plugin API that we can utilize to extend WordPress. The other being actions which are outside of the scope of this article but will be discussed in a future article.

So what are hooks? Hooks are events/functions that fire at specific times when the page you’re viewing is being rendered. WordPress is jam packed with hooks that fire throughout every single page load, and it’s these hooks that we want to target or mimic.

Practical Uses For WordPress Filters To Extend Your Plugin/Theme

Filters are different from actions in the what they do and how they’re supposed to be used. An example of a standard WordPress filter would be the body_class filter which allows you to add classes to the <body> of the website.

So what just happened? Well first we hooked into the body_class filter and provided a callback function to be executed.

The callback function my_filter_manipulator() is where we manipulate the body_class filter. Now it’s important to understand that every WordPress filter requires an argument to be passed into our function. This is exactly what we did when we added the $classes variable to our my_filter_manipulator() function. The variable $classes is not defined anywhere because it is supplied to us via the body_class hook, and $classes is the data we will be manipulating through our function.

By default the body_class filter contains many previously hooked classes provided by WordPress so we don’t want to override them all. Instead we want to add our classes to it by concatenating our classes to the $classes string.

On a side note, not all of the arguments we filter will be strings. In many cases they will come in as integers, or arrays, but for the sake of this specific filter, it’s a string.

In the example above we added 2 classes to the  <body> of our site, but what if we only want to add it on a specific page or post type? Well this is where WordPress filters can be really handy.

In summary we added the classes to the about page and the lessons post type pages only, and we returned the argument back to the filter. It’s important to note that if we don’t return the data, nothing will happen.

Creating WordPress Filters

Now that we understand what WordPress filters are and how we can use them to extend WordPress’ default functionality, it’s time to learn how we can create our own filters.

For the sake of this article I’ll show you how to create a new filter that mimics the functionality of the body_class filter which can be used in multiple areas.

First off let’s imagine that we want to apply a set of classes to multiple html elements so that we can target those elements specifically depending on the page we’re on. The perfect example would be to have a different header and footer for the homepage, pages, posts, etc. What we need to do first is create a function that will contain all of our logic.

Next we can begin adding classes based on the page we’re on, and then imploding them into a string to be output.

Now is the fun part. Let’s create a new filter that will allow us to add more classes after the the default classes have been added. The filter we will create will be theme_classes.

The theme_classes filter now allows us to hook into this function and add new array items to the $class_array variable like so.

Page Specific WordPress Filters

Now getting back to the filter we created. It allows us to add classes to the overall $class_array, but what if we just wanted to modify one of the specific page classes that we had defined earlier? Well we could do that by adding more if statements to the add_new_classes() function, or we could add new filters to the default classes in our theme_classes() function to prevent having to add more if/else statements.

So now we’ve created 4 new filters; theme_frontpage_classes, theme_single_classes, theme_archive_classes, and theme_page_classes. By default all of these new filters provide a string, so whenever we hook into them we also need to provide a string.

Now instead of adding a class to all of the pages we can specify any of the default pages with our new filters. Let’s add a class to the frontpage!

Using The Filters In Our HTML Markup

Now that we’ve got our function setup all we have to do is echo it wherever we want these classes to display. In this case we’ll just add it to the header and footer.

And that’s it! Now all we have to do is hook into our filters and the classes we add will be added to both our header and footer.

Final Thoughts

Now that you know the basics of filters I hope you’ll use them more throughout your plugins and themes. Not everything needs to be filterable, but the things that you do choose to allow filters for will definitely help you and other developers extend your code. Lastly, If you enjoyed this tutorial I hope you’ll subscribe and share it. I’ll be posting more like this with time.

Should I Pay For Website Development Or Use A Theme?

The internet has changed website development. Not that that’s big news or anything, but the reality is that the more it changes the more confused people tend to get. As a website developer, I’ve seen this first hand in the interactions I’ve had with potential customers over the past 3 years of being self-employed.

The rise of major players in the web design/development industry, and the fall of many small website development firms has also played a big role in this confusion. In this article I’ll try to clarify a few misconceptions and hopefully help you decide which route is best for you and your business.

What Is Custom Website Development?

Let’s start off by clarifying that both custom website development and themes require extensive web development. Both options require an individual or team of developers to take a design and create the code necessary for it to run. Both options likewise have many of the same obstacles to overcome when they’re are being developed including speed, cross browser support, mobile support, and ease of use.

Custom website development is distinct from a theme in that custom website development is not only the process of setting up a website for your business, but the process of finding your business’ unique needs and then creating a solution that is specific to those needs.

A web development agency that provides custom website development as a service will not only be able to deliver a nice looking website to your business, but will also take many things into consideration. They must first understand your business in depth, this usually happens after many visitations with you so that the agency can get an understanding of the product/service you offer. The agency must also have an understanding of your average customer and the process that the customer takes when making a decision to purchase from you. Once these steps have been taken the agency will work hard to build your business a comprehensive solution that will help your customers purchase from you.

In short custom website development is a multi-faceted process to provide your business with the best online solution possible.

What Are Website Themes?

Website themes are pre packaged website layouts that can be customized to the look and feel of your business. Themes are usually very affordable and can come with many options for layouts, colors, logos, etc. Themes can also be very confusing to someone who is not used to handling them because they’re created to be used by multiple people for multiple applications.

Does this mean that a theme can’t be used to meet your business’ online needs? Not exactly. Themes can be very broad in their application or very specific. In many instances theme developers will create themes specific to an industry to meet the needs of that industry as a whole. This can be very beneficial to your business because it allows you to get premium features that would normally be very costly to build in custom development.

Themes can also be very risky. Not all theme developers are experts, and in many cases themes can be done in such a way that they end up worsening the situation rather than helping. On the bright side you can always hire an expert web developer to setup and maintain your theme while still remaining on a friendly budget. The developer should be involved in choosing the theme, because as the expert he will be able to discern which themes are safe and which themes you should avoid.

Final Thoughts

Like I said before website development can be a bit confusing. Because of the success of search engines (namely Google) your website is the first impression that most potential customers will get of your business, so it is important to make sure that it helps them to buy from you. Whether you decide to go with a theme or custom website development is entirely up to you, your business’ needs, and your budget. Either way it’s important that you use a good developer who is an expert in this area. If you would like more information or are interested in custom website development or refreshing your current website with a brand new theme feel free to contact me!

Web Development Blogs, Plugins, And Podcasts

Anyone who’s good at what they do will tell you that you have to surround yourself with people who are likeminded if you want to succeed in the same area as they have.

Today that principle couldn’t be any easier to live by simply because of the advent of the internet, blogs, podcasts, and social media.

Over the past few years (and particularly in two areas of my life) I’ve tried to live by that principle. I’ve been intentional to surround myself with great content and great content producers even if they don’t know my name or who I am. If you’re a web developer and are interested in furthering your craft, you absolutely must continue furthering your education and sharpening your skills.

Web Development Blogs

Before there was Youtube, there were tutorials. Most of which were written, and contained a few images or snippets of code. As a developer who’s been in the game for a while, I had to learn by reading countless tutorials, forum posts, and product documentation. If you’re not a reader of web development blogs, tutorials, and documentation then you’ll never be a successful developer, so learn to read and most importantly learn how to search for the solutions to your problems. Some great web development blogs to help you get started reading include the following.

Pippin’s Plugins

Pippin's PluginsPippin Williamson is one of the most widely known WordPress developers out there. He’s produced many premium and free plugins such as Easy Digital Downloads, Affiliate WP, and Restrict Content Pro. Pippinsplugins.com is a great resource for WordPress developers who are looking to learn about advanced WP techniques. Pippin frequently blogs and releases tutorials that will help you sharpen your skills tremendously. Check out his blog and help him out by purchasing a subscription.

pippinsplugins.com

Monday By Noon

Monday By NoonMonday By Noon is one of those sites that really amazes you once you start to dig into the old posts that are archived on it. Jonathan not only teaches you about certain aspects of code and things that he’s done, but he also teaches a lot about business and how he runs his business as a web developer. Jonathan is also the creator of a really awesome search indexing plugin called Search WP, I suggest you check it out and purchase it to better power your site’s searchability.

mondaybynoon.com

CSS Tricks

CSS TricksCSS Tricks is one of the longest running sites that I still go to on a regular basis. Its got countless articles on how to sharpen up your skills on everything from CSS to Javascript, and PHP. CSS Tricks is headed up by Chris Coyier who is also a pretty well known name in the industry.

css-tricks.com

Codrops by Tympanus

CodropsCodrops is a really neat source for learning how to sharpen your frontend development skills. They have tons of articles that deal specifically with CSS and JS development as it’s related to the user’s experience.

tympanus.net/codrops

Deep Dive Into Plugin Code

One of the best ways to learn is to learn by example. This principle applies very obviously in industries that are very hands on, and it also applies in web development. Over the past year, the way that I’ve learned the most has been by breaking down the code of other plugins to understand why things were done the way they were.

Now not all plugins or plugin developers write the best code, or follow the best practices so you do have to have some discernment when you’re looking at plugins and seeking to learn.

Some of the plugins that I’ve personally done a lot of diving into and reverse engineering have been the following.

WooCommerce

WooCommerceWooCommerce is probably the most used e-commerce platform in the world. It’s a powerful plugin that allows you to sell all kinds of goods and services. Woocommerce has one of the best file architectures that I’ve come across, and is actually the basis for a plugin that I’ll be releasing later this year. Things you can learn a lot about include.

  • Creating templates with your plugin
  • Overriding the template if it’s included in the user’s theme
  • Installing new database tables
  • Applying filters and actions (These are all over the place)
  • The upgrade process for the plugin

Easy Digital Downloads

Easy Digital DownloadsEDD does as the name suggests, its handles the selling of digital goods online. EDD is another one of those plugins that you can learn a lot from. Two things that stuck out to me was the way they handle database transactions, and the way they handle generating html fields. I’d strongly recommend diving into the following files to soak it all in.

  • class-edd-db.php
  • class-edd-db-customers.php
  • class-edd-html-elements.php

CMB2

CMB2CMB2 creates custom metabox fields for post types, taxonomies, user meta, options, and more. CMB2 is also a plugin that is very easily and widely extended, and I’ve personally done so for many sites myself. CMB2 uses a really neat singleton class that basically handles all of the data that is passed into it via hooks. It also has many actions and filters that make CMB2 a pleasure to work with. Some files I’d suggest you check out include the following.

  • CMB2_Boxes.php
  • CMB2_Field.php
  • CMB2_hookup.php

Podcasts For Developers

Podcasts are a great way to learn from the experiences and expertise of other developers. Many developers have been in the same circumstances and faced the same problems, so to be able to get free advice from them is literally priceless.

Podcasts for developers can range from business management and practices, to plugin development. A few of the podcasts that I listen to on a regular basis, which are not limited development include.

Apply Filters

Apply Filters PodcastApply Filters is a great resource for WordPress plugin and theme developers. It is hosted by Brad Touesnard and Pippin Williamson, and they frequently have guests who talk about their products, business, and how they developed their products. Apply Filters’ best selling point is Pippin’s and Brad’s experience in web development.

applyfilters.fm

Post Status

Post StatusPost Status is another great podcast for developers and WordPress entrepreneurs in general. Hosted by Brian Krogsgard, Post Status is much like Apply Filters in that there is a ton of talk about code, and web development practices. Post Status also has many guests who share their WordPress development experience.

poststatus.com

Matt Report

Matt ReportMatt Report is run by Matt Medeiros where he interviews guests who speak about their experience as a WordPress entrepreneur. Many of his guest talk about the problems they’ve faced as business people, the solutions they came up with, and the products or services they’ve built since being in business.

mattreport.com

Final Thoughts

Web development is an ever evolving industry. To be a web developer requires a person to be motivated and willing to continue learning. The resources I’ve listed are just a few, there are plenty more to help you sharpen your skills so keep searching and keep learning.

Create Dynamic CSS With PHP – Use CSS To Power Your WordPress Theme

In the previous part of this series I went over the basics of the PHP_CSS class that I created. I showed how it is a much more uniform and easy way to create your custom css with PHP than any other way.

In this part, I’ll be showing you how to use css to power your WordPress theme.

This will be an advanced tutorial, so if you’re just getting started with WordPress, PHP, or CSS then this might not be for you, but either way if you follow along you should be just fine.

Since we’re working with WordPress there are many ways we can go about creating our css and integrating it into our theme. In this part we’ll focus on the quickest way to get set up. Let’s begin!

Integrate The CSS Into Your Theme

We need to import the PHP_CSS class by including it into your theme’s folder structure, and then requiring the framework.

Now here comes the fun part. Once you’ve imported the class and set it up you can begin adding css via filters. Let’s start by creating two actions.

The first action will add the css to the header, and instantiate our PHP_CSS class to be used within our second hook. We’ll also add the css to the head of the document if our css is not empty.

The second action will be where we actually add our css. This hook would be available for any plugin or theme requirement which would want to add css to our header. It comes with one argument, with is the instance of the PHP_CSS class stored in the $css variable.

Now that we’ve got that setup our theme should contain the css that we added in the theme_header_css hook.

Create An Advanced CSS Process

While the method described in this tutorial will certainly get the job done, it’s not actually the best way to do so. Stay tuned for the next part in the series where I’ll show you how to create all of our css via a hook, add that css to a dedicated css file, and then enqueue that file automatically.

Create Dynamic CSS With PHP – The PHP CSS Class

Before we begin, I have to first be very clear that CSS for the most part should not be created exclusively with PHP. While you can certainly create all of your site’s CSS with PHP, it is neither efficient or wise to do.

CSS has developed into a vibrant language, especially with the recent rise of preprocessors such as SASS and LESS.

You should create most of your design in SASS or just raw CSS, and only leave PHP for the things that the user will be able to change on their own.

Understanding The PHP CSS Class

Lets begin the project by first downloading the PHP CSS Class which I built for this tutorial.

Download The CSS Class

The PHP CSS class is the best way to handle this because of the fact that once we’ve got information stored in the object it is then easy for us to manipulate that information over and over again. The class also provides us with methods that will allow us to do things uniformly and efficiently. Just remember that we’ll be writing CSS utilizing PHP, so it will look more like PHP. Let’s set it up.

Setting The HTML DOM Selector

The PHP CSS class allows us to easily set and change selectors so that at any given moment we’re working with one individual selector or set of selectors. We set the selector in the same way that we would in CSS like so.

Changing The Selector

Once we’ve set the selector’s we can begin adding rules to them, but before we do that I’d like to point out that if you wish to change the selector once it’s been set you can use either the change_selector()  method or the set_selector()  method once again.

Adding CSS Properties To A Selector

Once we have a selector set we can begin adding properties to it. The properties are any valid css property paired with a value (which is where the PHP CSS class really shines). First let’s setup some variables and then re set the selector.

To add a single property we use the add_property()  method which requires two arguments. The first is the property-type and the second is the value.

To add multiple properties you can use the add_properties()  method which requires an array as its only argument.

Now that we’ve set multiple properties to the ‘#header’ selector, our css output would be as follows:

Handling Pseudo Class Properties

Adding properties to the pseudo classes or states of the selector comes builtin to the PHP CSS class. Once we add pseudo classes to the selector states the PHP CSS class will automatically store all of the rules created before and add new properties to the selector with the state added to it.

Then we can continue adding properties.

Which would output:

Adding Multiple Pseudo Classes To A Selector

We can also add multiple pseudo classes to the selector by using the add_selector_states()  method which requires an array as its single argument. Using this method will create an output of the css selector for each state that you specify.

The output would then be as follows.

Removing Pseudo Classes

We could then revert the selector back to its original state without any pseudo classes by using the reset_selector_states()  method, and then continue adding to the original selector.

Outputting Our CSS

After we’ve created all of our css, we can use the PHP CSS class’  css_output() method to display all of the css that we’ve created. Please note that this class was not intended to generate a ton of css code, so as of now the PHP CSS class will only output minified css.

Future Plans For Development

With all of that said, there isn’t much more that this class was created to do, but I will continue adding special rules to it as I need them. I would encourage you to fork the PHP CSS class on github, and send some pull requests my way so that I can continue adding to it. Otherwise stay tuned for the next tutorial where I’ll show you how you can integrate this class into your next WordPress theme or plugin.