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

[Jim R]

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.

[maxxd]

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`.

[Jim R]

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.

[maxxd]

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?

[Jim R]

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 September 21, 2021 by Jim R

[Jim R]

File is located at:  

 

/wp-content/plugin/player-match

[Jim R]

When I echo plugin_dir_url( __FILE__ ); it produces the correct pathway to my plugin folder, but it doesn't show style.css in the echo.

Edited September 21, 2021 by Jim R

[maxxd]

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.

[Jim R]

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.

[maxxd]

If it makes you feel any better, I still do the same thing.