Setup A Dynamic CSS Stylesheet

Tuesday, Jan 13, 2015

Published In: Design, Tutorials, Web Development

Written by:

Share:

Here’s a quick tutorial that shows you how to set up your WordPress theme with a dynamic stylesheet so you can give your blog a more editorial feel on a per-post basis. It’s a little something I came up with when I decided to make some enhancements to this site. It’s a fairly simple process that involves the Advanced Custom Fields plugin coupled with minimal PHP knowledge and some creativity with CSS.

This tutorial is written with the assumption that you know some very basic PHP and know the structure of how WordPress themes are built.

What we need to do before we can get started is make sure Advanced Custom Fields is installed and ready to go.

Google ChromeScreenSnapz001

Below is a very minimally basic blog structure that we will use as an example for this tutorial.


<div class="main">
	<p class="copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<ul class="list">
		<li><a href="#">Text Link</a></li>
		<li><a href="#">Text Link</a></li>
		<li><a href="#">Text Link</a></li>
		<li><a href="#">Text Link</a></li>
	</ul>
</div>

Next thing we are going to do is create a new file in your theme directory and name it dynamicstyles.php and paste this code inside of it.


<style type="text/css">
.main {
  background-color: #333333;
  padding: 20px;
  margin: 0 auto;
  max-width: 600px;
  height:160px;
}

.copy {
  color: #ffffff;
  width: 70%;
  float: left;
}

ul.list {
  width: 20%;
  float: left;
}

ul.list li a {
  color: #5d77d8 ;
}

ul.list li a:hover {
  color: #ffffff;
}
</style>

Now that we have a structure of some sort to work with, let’s now start creating some custom fields that we will use inside of our new dynamicstyles.php file.

Go to the Custom Fields menu in the WordPress sidebar and add a new field group and name it Dynamic CSS and create three Color Picker fields inside of it with these names. Make note of the names because we will be using them in the next step.

Google ChromeScreenSnapz003 Google ChromeScreenSnapz006

Then scroll down to the bottom of the page and make sure these Location settings match.

Google ChromeScreenSnapz007

Once all your settings and fields are created, scroll back up to the top and hit Publish.

Now go back into your dynamicstyles.php file and add in the custom fields into the appropriate spots.


<style type="text/css">
.main {
  background-color: <?php echo get_field('bg-color'); ?>;
  padding: 20px;
  margin: 0 auto;
  max-width: 600px;
  height:160px;
}

.copy {
  color: <?php echo get_field('text-color'); ?>;
  width: 70%;
  float: left;
}

ul.list {
  width: 20%;
  float: left;
}

ul.list li a {
  color: <?php echo get_field('link-color'); ?> ;
}

ul.list li a:hover {
  color: <?php echo get_field('text-color'); ?>;
}
</style>

In order to use this code on your site, you can limit it to only show on single post pages by adding this code right before the closing </head> tag in your header.php file.


<?php if (is_single()) { ?>
	<?php include ('dynamicstyles.php'); ?>
<?php } ?>

Now you can go and create a new post and change the colors of each of your posts dynamically. Since the field data is stored within each of these posts individually, you’re able to change the colors without affecting the colors all over the site. Only within that post itself.

Google ChromeScreenSnapz008

Feel free to experiment and add more custom field types to add even more customizability to your posts. You can even use this to add images and sizing of elements.

  • Robert

    Raul.

    Nice write-up, this is exactly what I have been looking for. Unfortunately I cannot seem to get it to work. Is there anything else special you can tell me about it? Such as will it work with ACf v5 or is it just for v4? Is the command “get” or “get_field”?

    Any additional information you could offer would be great, I’d love to get this to work.

    Thanks,
    Robert

    • raulativity

      Hey Robert! My mistake! The correct function is get_field. In my defense, it was really late when I wrote this tutorial haha. So sorry about that. Let me know if you need any further help getting this to work! Feel free to reach out to me on Twitter @raulativity

  • Jennifer

    Thank you so much for providing this step-by-step tutorial! Exactly what I was looking for! This helped me out in many ways!

    • raulativity

      No problem!! Glad you found this tutorial useful! Feel free to reach out if you need any other assistance regarding this :)