Jump to content

WORDPRESS: Creating a WP plugin and having issues linking CSS stylesheet within functions


Jim R

Recommended Posts

Creating a WP plugin for third party usage (first time doing this), and typically links to stylesheets are put in the header or in the theme generated options panel. That's fine for personal use but not for this.

I found wp_enqueue_style via a search on here, and I'm trying to apply it. Below is the code I have right now.

function wpse_load_plugin_css() { 
$plugin_url = plugin_dir_url( __FILE__ ); 
wp_enqueue_style( 'style', $plugin_url . 'style.css' ); 
} 
add_action( 'wp_enqueue_scripts', 'wpse_load_plugin_css' ); 



function test() { global $con; 
wp_enqueue_style('style'); 
** the bulk of my code - query and output ** 
}

None of my styling is working at this point. I've cleared the cache, and this early stage, just trying to change the size of fonts.

Am I on the right track?  (probably not)

Thank you.

Link to comment
Share on other sites

Not sure what the test() function is for, but your wpse_load_plugins_css() function is technically correct. I'd recommend making the handle more specific than 'style', and make sure your stylesheet is actually in the main plugin directory and not a sub-directory like `wp-content/plugins/myplugin/css/style.css`.

Link to comment
Share on other sites

Style.css is in the same directory as the file these functions are on.  So both are in wp-content/plugins/brand-match/.

Function test() queries and outputs User information out of a custom table.  It'll be function athlete-bio() shortly.  It functionally works, but I want to use 'best practice' way of incorporating CSS.

Link to comment
Share on other sites

Using wp_enqueue_style is the WP 'best practice' for getting your stylesheet into the WP templates, assuming your theme calls header() at some appropriate place. If you're still not seeing your changes, check your developers tools for 404s and inspect the source code - is your stylesheet actually found and included in the markup?

Link to comment
Share on other sites

Here is the full code so far:

(Right now I have /style.css vs. style.css)

 

function wpse_load_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style( 'style', $plugin_url . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'wpse_load_plugin_css' );




// This gives us uniformity on how the player's name is displayed and formatted
function player_name ($nameFirst,$nameLast,$pid) {

			echo '<span class="full-name"><a href="/tag/'. strtolower(str_replace("'",'',$nameFirst)) . '-' . strtolower(str_replace("'",'',$nameLast)) .'"><span class="fname">'. $nameFirst . '</span><span class="lname"> ' . $nameLast .'</span></a></span>';

}

 
function test() {
global $con;
wp_enqueue_style('style');
 
 	$query ="SELECT *,
 		GROUP_CONCAT(i.industryName) as industry
 	
 	
 		FROM pm_athlete a
 		JOIN pm_athlete_interest ai
 			ON a.id = ai.athleteID
 		JOIN pm_industry i
 			ON i.id = ai.industryID
 	
 	";
 	
  echo '<div class="profile">';
 	
		$results = mysqli_query($con,$query);
		while($line = mysqli_fetch_assoc($results)) {
	
			$nameFirst = $line['athleteFirst'];
			$nameLast = $line['athleteLast'];
			
			$industries = explode(",",$line['industry']);
		
			player_name($nameFirst,$nameLast,$pid);
			
			
			asort($industries);
			foreach ($industries as $industryList) {
				echo '<div class="list_school">' . $industryList;
				echo '</div>';	
			}
		
//echo '<li>'. $line['industry'] .'</li>';
			
		}
		
 
 echo '</div>'; //end of profile

 }
add_shortcode('test', 'test');

style.css 

 

@charset "utf-8";
/* CSS Document */


.full-name a {
	color: #ccc;
	font-size: 100px;
}

 

 

Here is the output link:

http://wolomarketing.com/players-home/

Edited by Jim R
Link to comment
Share on other sites

If you echo plugin_dir_url(__FILE__); it wouldn't include 'style.css' - you didn't ask it to. However, if that output shows the correct path (including trailing slash) that leads to your styles.css everything should be working. I'd turn on error reporting in your wp-config.php file (and local dev environment) and check your logs. Another thing to check is that your css selectors are correct.

  • Like 1
Link to comment
Share on other sites

It was styles.css not style.css  😐

 

The whole time I was wondering if I was missing a step or if I was implementing it correctly inside the other function.  It's working now without putting anything inside the other function(s).  As I was searching for results, no one ever said how to apply wp_enqueue to other functions, and no one ever said it didn't have to be.  Meanwhile, the whole time my file name didn't match the referenced URL.  

I always appreciate the time people put into responding, so thank you.  Building my first full plugin, rather than just injecting my own code, so I'm learning some new tricks.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.