Dynamically Include CSS in Wordpress Site Via PHP

Question

Alright, so I struggled with this for days. I'm still in the process of learning PHP. Meanwhile, I'm building a site that I need to make a custom blog template so multiple authors can post blogs on it. The authors know nothing about any code language at all, and therefore, the easiest way out of this (have them manually apply CSS classes) is out of the question. Therefore, I need to apply CSS to all new blog posts but not to any other kind of page dynamically. I've scoured the interwebs trying to find a way out and can't find any solution that works. Heres what I've tried to implement into my functions page so far:

if (is_singular('post')) {
echo '<link rel="stylesheet" type="text/css">#primary p{margin-bottom: 10px; font-family: Alice; color: #fff; text-align: justify;

text-indent: 50px;}'; } I know in advance that this code is butchered. I also know that this question is a bit unclear. When the answers start rolling in I'll be glad to clarify in any way I can. I'm still a student so bear with me. Thanks, all.

UPDATE: After a lot of digging around and trying different things I got it figured out. I couldn't understand why so much of my code wasn't working the way the codex said it should. After much frustration, I came to see that I was placing my code in the wrong place. I was trying to work from within functions.php (outside of the loop) but finally got it to work as intended from within it.

For any other students out there just now learning to code within WordPress, the loop is, in fact, the same as the main() within other programs. Many codes only work right from within it. Valuable lessons learned. Thanks to everyone for the help! Trust me, it is appreciated.

have you tried the echo without the if statement to verify the echo itself in fact works? — Zak
– Zak, Commented Nov 25, 2017 at 23:16

Zak · Accepted Answer · 2017-11-25 23:28:12Z

1

OK .. So your code IS butchered ... But not to worry we can work with that.

I am going to break the tags down into separated echo statements so they are better understood. First off you don't need the link tag as you are not calling to a separated CSS file. Use the style tag instead (Of which you need a start tag and an end tag!).

<?php
if (is_singular('post')) {
  echo '<style>';
    echo ' #primary p{';
    echo 'margin-bottom: 10px;';
    echo 'font-family: Alice;';
    echo 'color: #fff;';
    echo 'text-align: justify;';
    echo 'text-indent: 50px;';
  echo '}';
echo '</style>';
echo '</head>';
}
?>

answered Nov 25, 2017 at 23:28

Zak

7,5812 gold badges29 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cui Bono Over a year ago

Zak, you've been a huge help. Really appreciate it. Please refer to my comment below.

Ivanov · Accepted Answer · 2017-11-25 23:28:05Z

0

I think it will be better if you define your CSS class/code in the main CSS file of the theme (usually this is style.css). Then you can find the render for the posts in your theme (check wp-content/theme/mytheme) and apply the CSS class depending of the conditions.

answered Nov 25, 2017 at 23:28

Ivanov

815 bronze badges

Comments

user1861458 · Accepted Answer · 2017-11-25 23:28:27Z

0

Using <link rel="stylesheet"> is for linking to an external stylesheet file. You could try something like this:

echo "<link rel='stylesheet' type='text/css' href='author1.css'>";

However, if you wanted to include all of the CSS properties within that same file, you could use a <style> tag. I would recommend against this as it can be difficult to work with since all of the CSS is not formatted/inline.

echo "<style>#primary p { margin-bottom: 10px; font-family: 'Alice'; color: #fff; text-align: justify; }</style>";

answered Nov 25, 2017 at 23:28

user1861458

Comments

Cui Bono · Accepted Answer · 2017-11-26 12:07:34Z

0

Zak! Thank you so much for your help. This is just what I needed. The post is now active on the page. Your time is well appreciated. I have, however, ran into another issue in implementing the solution. The issue is that even though I was using the is_singular() command to differentiate between post types I kept seeing the same css active on my main page. After some digging, I figured out that this is because I'm using the Beaver Builder plugin. The plugin is a visual editor and uses posts within posts so-to-speak. To fix this issue I have moved to trying to display the css according to author, as all the blogs are published by different authors than the pages. In my attempt to modify the above if-statement I have looked into the WordPress Codex, finding the get_the_author() and get_the_author_meta() commands. The new issue is so-far that while I've looked up syntax for these commands, I have only been successful in crashing my site, or affecting no change at all. Any help you can offer me in this regard would be a big help. Thank you. Link

edited Nov 26, 2017 at 12:07

answered Nov 26, 2017 at 12:02

Cui Bono

156 bronze badges

3 Comments

Zak Over a year ago

Are you wanting to display CSS per specific authors?

Cui Bono Over a year ago

Well, no, but since I only have a limited number of authors I thought I could do something like: if (is_author(1) || (is author(2)) { //CSS here} . This way I could keep the Beaver Builder from displaying the CSS.

Cui Bono Over a year ago

Zak, thank you again for your help. If was your code that helped me begin to understand what I was doing wrong. I got it figured out. For more on how I did this, see my update on my OP.

Collectives™ on Stack Overflow

Dynamically Include CSS in Wordpress Site Via PHP

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related