So I'm creating a WP theme and I have started building customisation for it, currently I have the styles go to the header and they are inline. Is there any way I can put them into a stylesheet after the options(get theme mod) have retrieved the information? Hope that makes sense. Or is it okay to have all the styles being inline in the header? It just seems really messy...
Thank you
Basic answer is : No, can not.
Because, the stylesheet is a css file, your get_theme_mod() or get_option() functions are wp core functions working in php script. Data is fetched through those functions and printed in header through wp_head(), the whole process is on the php files only.
So, no wp core function can print it inside stylesheet.
Also, I have never seen any theme or plugin doing so. But if you are very interested a custom built function can be written using 3 php functions: fopen() fwrite() fclose()
That function will write desired string inside the stylesheet, but have to be parsed in functions.php or atleast before <head></head>
I think it is an fairly unique idea (some do this in custom template editors), subjected to views of other people.
Related
Is it possible to add an HTML template to WordPress, without PHP? A client sent me a template with only HTML, JavaScript and CSS to migrate it to his WordPress account, but as far as I know it is not possible
Is it possible to add an html template to wordpress, without php?
Technically, yes. The WordPress Codex page for Theme Development§Basic Templates mentions:
At the very minimum, a WordPress Theme consists of two files:
style.css
index.php
Technically speaking, you could re-name your index.html template file to index.php and include a style.css file that's conformant to the WordPress spec to include the requisite theme metadata in the stylesheet header. That in itself would be installable into WordPress and usable as a Theme.
However your implication that this wouldn't be particularly helpful is also correct, because none of the dynamic content that WordPress would be used for would be pulled through and displayed out of the box – the template itself isn't written to leverage the proper PHP methods to pull this data in the first place. Your client is likely undereducated, misinformed, or otherwise confused on the wide gulf of fundamental difference between a standard website template and one that will work well with (or is specifically created for use with) WordPress.
Your client's implied expectation may be for you to update it into something that would be useful to use in a WordPress environment (which is most certainly possible, albeit likely arduous and time-intensive depending on the specific requirements), but interpreting communications between you and your client is much outside the scope of Stack Overflow.
I'm having trouble finding an answer to why it's better to enqueue Google fonts in the functions.php file vs adding #import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,800,900'); directly to the style sheet.
I read on one site that if you use the style sheet method the CSS file loads twice? That's bogus, right? Why is the functions method superior?
Enqueuing the style sheet in your functions.php is better just in case there might be another plugin that wants to use the same font. If it's properly enqueued using the wp_register_style() and wp_enqueue_style() functions then WP will only include the link once, no matter how many plugins want it. However, #import it yourself (or add the link manually to your header.php) and WP can't know about those, so it will get loaded more than once.
Of course, if you know exactly what resources your theme and plugins are using, and know that nothing else will want to load the same font, it doesn't really matter if you link to or import it manually!
WordPress has a large and strong developer community. Thousands of people all around the world design themes and plugins for WordPress. To ensure that everything works properly and that one plugin or theme doesn’t break another, WordPress has an enqueue script function. This particular function provides a systematic way of loading Javascript along with styles.
With the help of the wp_enqueue_script() function, you can easily inform WordPress the best time to load a script long with dependencies if any. Such a feature allows everybody to utilize the built-in Javascript libraries that come in a bundled form. It also helps in reducing the load time of page along with avoiding easy conflicts with themes and plug-ins.
Enqueuing scripts in WordPress also ensures that duplicates with the same handle are not loaded twice.
For my latest project here at work, I was told to develop custom (Stencil) themes for BigCommerce so we can distribute them via the BigCommerce theme marketplace. I come from a Wordpress background, so making this leap is making my head spin a little bit, but I think I understand how their platform is put together for the most part. There are components which are called by Handlebars expressions, and these may be rearranged in the template files while any default styles can be applied through config.json and the client can make basic changes through the theme editor GUI.
Here's where I'm still lost, though. Some of the design requirements call for heavy CSS changes, not just a JSON variable. I have a fully developed HTML/CSS theme I would like to use by converting it into a format that BigCommerce will accept, but I can't find any documentation on how to go about doing this. I could tediously modify each of the existing SCSS files, or I could override them as if I was developing a child theme. I'm tempted to scrap the SCSS altogether and start over, but then I would need to recreate the SASS functions used to pull in the JSON where needed.
I work much better when I begin with a blank canvas (or at most a rough sketch) and build upon it, rather than morphing a complete product into what I need. Is there any way to do this with BigCommerce?
It's been a little while since I posted this question, and since then I have learned a bit more about Stencil development.
The short answer here is, add on, don't delete. BigCommerce's Cornerstone theme is not a blank theme like _underscores for wordpress. It's a fully developed, yet very basic theme. It's best to avoid editing its default files where possible, because it may be updated in the future and could potentially overwrite your changes. Instead, add folders with your custom theme's name within it. For example, you would normally see:
/scss/layouts/body/_body.scss
So you could add your own styles while leaving the above structure intact:
/scss/layouts/customtheme/body/_body.scss
We do not have to override the styles defined in the former _body.scss, because we'll also need to import your newly created styles into
/scss/layouts/_layouts.scss
In this file, you'll see this snippet at the top:
// =============================================================================
// LAYOUTS
// =============================================================================
// Global layouts
// -----------------------------------------------------------------------------
// Header
#import "header/header";
// Page
#import "body/body";
Since an underscore defines an SCSS partial, we know that just creating _body.scss doesn't do anything. We have to find the main SCSS file and add #import "body", or in this case, we must add it to another partial which gets imported into the main file. So simply delete or comment out the default
//#import "body/body";
and replace it with
#import "customtheme/body/body";
And there you go. You are not overriding or competing with any existing styles, and you've customized the look of the body. You can also add your own components, but that's another topic for another time. Suffice to say, there are more SCSS files in
/scss/components/
and they follow the same principles.
Did you try using the stencil resources provided by BigCommerce youtube channel?
Also, the forums would be a great place to start having a chat for best practice questions.
I often use small, page specific CSS files for a page in Typo3 using css_select. These styles usually apply only to some special element on these pages. Putting these styles in a global file doesn't feel right.
Using css_select I can select a bunch of files that may be included into the page's header, so that it loads it's special styles.
Now I'm looking for a way to do something similar in Django CMS 3. The only built in solution I'd know is to create a new template which seems a bit excessive for a single page where an image needs to be handled a bit differently from all the others, to name just one example.
Is there a way to do this using nothing but django CMS?
If not, is there an app that would do that?
If not, how could an app extend the page admin form in such a way that this function could be added.
You could extend the page.
See http://django-cms.readthedocs.org/en/latest/extending_cms/extending_page_title.html
A good example is https://github.com/nephila/djangocms-page-meta
This the above package allows you to add additional meta tags to page header.
i am building a site using Drupal 7,
when i use searching with module called search by page,
in results page i have duplicated scripts and styles tags.
is some way to prevent from this?
tnx a lot
Make sure to add you js and CSS using drupal_add_ms or drupal_add _css and this will take care of it for you. Try to avoid adding script tags to your templates directly.
Also, turning on CSS and js optimization may fix the issue for you. You can do this under the performance section.
EDIT: I should note that any site wide templates should be added to your themes info file. Any templates that should be loaded conditionally should use the functions above when needed on the page. This helps avoiding have tons of unused is loaded onto the page.