WordPress stylesheet with dynamic value

Spread the love

Passing some dynamic values to the stylesheet of WordPress using PHP, might be a great way to utilize custom values to the styling of any WP theme. Sometimes it becomes obvious to take certain inputs from the WordPress user like changing theme background , colors of certain portions etc. It is easier for a Theme Developer to do that without even interacting with the theme options from any option panel or the core Theme customizers but for a regular non-tech one, it’s just a big challenge. So, we need to do it in a trickier way (We mean- the theme dev 😉 ) so that the end user find it easier.

OK, to do that Professional WP Theme developer takes the help of PHP, thank God WP runs with it. To do so we just have to rename our stylesheet file as if it was  a PHP file. Like, style.css should be style.php. But I don’t prefer changing the style.css file into a style.php as WP needs style.css to be defined in order to run a theme!  I do it in my themes as dynamic_style.php . So simple.

So the structure would be,

dynamic_style.php

Now I would like you to always follow the best practice. Enqueue the file in the functions.php as a stylesheet. If you are not familiar with enqueue, how it works, just follow this link in the codex.

Here is a dummy function to do so,

function trone_scripts() {
wp_enqueue_style( 'trone-style', get_stylesheet_uri() ); // to add the style.css
// not necessary if you already included

wp_enqueue_style( 'trone-main-dynamic-style', get_template_directory_uri() . '/css/dynamic-style.php');
}

add_action( 'wp_enqueue_scripts', 'trone_scripts' );

In my case, the file is inside a CSS directory which is obviously inside the theme directory. (Theme name is Trone – under construction at this moment)

Ok, this part is done, now inside in your  “dynamic_style.php”, put the following lines of code:

<?php define('WP_USE_THEMES', false);
require('../../../../wp-blog-header.php'); ?>
<?php header("Content-type: text/css");
 ?>

Breaking down the code for your understanding:

The first line tells WP not to run theme related processes and the second line runs the WordPress engine. After this point, you have access to the WordPress functions and the global variables. The third line is to send header information as if this file is a text file of CSS.

Then just bring the dynamic code on! I am not explaining the following code which is a theme specific requirement for me. But I guess you can easily understand the scope of it.

 .banner-bg-tf{
	background: url(<?php 

		$titan = TitanFramework::getInstance( 'trone' );
		$slider_image = $titan->getOption('slider_image');
		//Titan returns numeric value or the id of the uploads
		if(isset($slider_image))
		if ( is_numeric( $slider_image ) ) {
			$slider_image = wp_get_attachment_image_src($slider_image,'full');
		}
		if(isset($slider_image) && $slider_image!='')echo esc_url($slider_image[0]); 
	 ?>);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

Hope you have understood and now can add dynamic values to your WordPress stylesheet.  Let me know if you know  a better way to do so. Or can ask me question if you have any problem doing so.

 

Tag: WordPress stylesheet dynamic value


Spread the love

4 thoughts on “WordPress stylesheet with dynamic value

  1. Awesome article. Will help us to use the stylesheets dynamically for the wp projects. Another magic of WordPress ?.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

বাংলাদেশ রেলওয়ের অনলাইন টিকেট বুকিং এর বিভিন্ন টিকেট ক্লাস

Spread the love

Spread the loveআজ বাংলাদেশ রেলওয়ের টিকেট কিনলাম অনলাইনে। একটা প্রোগ্রাম এটেন্ড করতে যাব প্লাস কিছু গেস্ট আসবে এই কারনে। তো অনলাইনে টিকেট কিনতে যাবার পর ঘটলো বিপত্তি। কারন আমি নরমালি ৩ টা সিট নিয়ে ধারনা রাখি। শোভন চেয়ার সুলভ আর স্নিগ্ধা তো যখন টিকেট কিনতে


Spread the love

Yoda Style Conditionals ( Yoda Condition) Explained (Bengali/বাংলায়)

Spread the love

Spread the loveআমরা যারা প্রোগ্রামিং কিংবা ডেভেলপমেন্ট করি তাদের অনেকসময় সবকিছু ঠিকঠাকমত কন্ডিশন লেখার পরও দেখা যায় প্রোগ্রাম ভুল বিহেভ করে। এর পিছনে কিন্তু বিশাল একটা কিছুর হাত আছে। আমরা যখন কোন অপারেশন চালাই সেটা যদি ঠিকমত ঘটে তাহলে তাকে প্রোগ্রামিং এর ভাষায় ট্রু কেইস


Spread the love

দুই তিন মাসেই হয়ে যান লাখপতি, অনলাইন ক্যারিয়ারের মাধ্যমে! কতখানি সম্ভব?

Spread the love

Spread the loveএকটা কমন ট্রেন্ড লক্ষ্য করছি যে, সবাই শেষ ভরসা হিসেবে চেষ্টা করছেন অনলাইনে কিছু একটা উপার্জন করতে অথবা ফ্রিল্যান্স করতে। ব্যাপারটা কেমন একটা হাস্যকর বিষয় হয়ে যায় অর্থাৎ আপনি সর্বশেষ সব কিছুতে যখন ফেইল করছেন তখনই আসলে অনলাইনকে ক্যারিয়ার হিসেবে বেঁছে নিতে আসছেন।


Spread the love