Random and probably dumb question-can Material-Design-Lite blog template be fully installed on Wordpress? Downloaded the full template from http://www.getmdl.io/templates/blog/index.html and wondering how to use the entire file....
Thanks!
Sure it is possible! I actually was playing around with MDL and integrated it into WordPress. If you are interested you can grab it off GitHub:
https://github.com/braginteractive/MDLWP
Yes, you can absolutely make a Wordpress template using MDL. Helping you do that though... is a bit of a big task. Try looking for help around the web on just building Wordpress templates, then when are you working with HTML, use MDL classes and necessary attributes for components.
Yes. You'll probably want to do so by creating a new theme. The MDL templates provides static HTML, CSS, and Javascript. Wordpress requires PHP to dynamically add your content. You could approach this from two directions: modifying an existing theme or blank starter-theme to work with the CSS and Javascript, or adding the necessary php to the MDL HTML files (and making them php files).
You could also potentially add the MDL css and javascript through a child theme or plugin to use only select portions of it if you're not looking for a MDL Theme. At a minimum you'll need to add classes to the elements you want to affect, and watch out for potential conflicts.
Not sure of your level of experience, but here are some starting points.
Wordpress Codex on Theme Development
A tutorial on creating a theme from static html
A tutorial on including your css and javascript files
Write now there are two themes available for free
MDLWP - Free Theme and premium plugins available -
http://mdlwp.com/
Realistic - Free theme
https://wordpress.org/themes/realistic/
Related
My page speed insights shows me to remove unused css what should I do?
Is there any plugin for wordpress to do so?
I am using worpress
the longer answer:
unused CSS is a curse in environments such as WordPress (or Joomla or Drupal or …) as each theme/ plugin adds CSS which covers all of the use cases where the plugin (or theme) can be used in. this means that each individual CSS-file on your site has a lot of code in it that isn’t strictly needed on a random page of your site (or may even not be needed on your site at all).
there currently is no way to automate the removal of unneeded CSS, but you might be able to get some improvement using e.g. “plugin organizer” to only allow plugins to work on specific pages) and by creating a child theme that only has the CSS needed for your site (you’ll have to dequeue the parent theme CSS though).
ALso you can use css and js minify wordpress plugin that can also help you to run your site fast.e.g
Fast Velocity Minify
WP Super Minify
I've been having trouble implementing templates bought in themeforest in a meteor app.
I'm wondering, what would the best way to implement a template into a meteor app.
Two ways that I think of right now are:
(Tedious way)
Place javascript in Compatibility folder and try to name them in specific alphabetic order in order to get them to work properly.
Place css in client/lib folder and try to name them in specific alphabetic order in order to get them to work properly.
Place fonts and images in the public folder.
The second way (I haven't tested it yet) is to place the template files in the public folder and just link them manually (the old/non-meteor way) in the index.html file.
Now I'm not sure if these are the correct ways to do this and I would like some information regarding this issue.
Thanks!
I've done this myself with a themeforest theme.
Put the theme's css file under /client - it doesn't need to be in /public
Use the class names your theme uses in your templates. Typically a theme will have 3x what you really need so this ends up being much less work than it might seem. If your theme is built on bootstrap then it's even easier.
My theme used fontello a lot for icons, I had to recreate the folder hierarchy under client/fonts and then make sure the cross-references were correct.
Typically themeforest themes don't use js that much, I completely ignored all the js that came with my theme and created what I really needed in Meteor.
I am trying to make changes to plugins/events-manager/templates/forms/event/bookings.php via my child theme. When I make changes to the file directly in the plugin, it works well, but I know the way to go is to make changes at the child theme level so this is what i have done:
I added the edited bookings.php to twentytwelve-child/plugins/events-manager/templates/forms/event/bookings.php but for some reasons the changes are not applied.
I have also tried to add the edited bookings.php to twentytwelve-child/events-manager/templates/forms/event/bookings.php but it is not working either.
I would appreciate if someone could help me figure this out (screenshots below). FYI - I am not a developer, so please try not to be too technical in your answers.
Many thanks,
Yvan
It would be nice if developers could simply override a specific file within a plugin from within their theme, but I'm pretty sure WP doesn't work that way (At least not for overriding plugins. Theme files? Yes. Plugins? No).
If the plugin developer was nice they will have given you some override capabilities like using action hooks, filters, or including their function as static within a class.
From the looks of the events-manager plugin file there are three such action hooks available:
do_action('em_events_admin_bookings_header', $EM_Event);
do_action('em_event_edit_ticket_td', $EM_Ticket);
do_action('em_events_admin_bookings_footer', $EM_Event);
You will either need to hook into these actions to make your adjustments (highly recommended), or duplicate the plugin, rename it, and edit it manually (which means you will need to duplicate these edits every time you upgrade... YUCK!)
EDIT after further researching the events-manager plugin:
While WP doesn't provide this template override functionality, it looks like the plugin does. However after some digging in the documentation I noticed that this functionality doesn't specify weather it supports child themes. Try placing the template override within twentytwelve instead of twentytwelve-child. If that works, then maybe you could move that folder back into twentytwelve-child and create a symlink within twentytwelve to the real folder in twentytwelve-child (sort of tricking the plugin). Doing it this way means you have to recreate the symlink each time you update twentytwelve, but the trade off is that you can now override templates and won't loose your changes if you update twentytwelve (just the symlink).
The problem is your file path:
plugins/events-manager/templates/forms/event/bookings.php
should be
plugins/events-manager/forms/event/bookings.php
If you have issues with EM we monitor the free forums here (I stumbled on this by coincidence) - https://wordpress.org/support/plugin/events-manager
also #StevenLeimberg, thank for chipping in! we do support child themes it was just wrong directory structure.
I found this Bootstrap UI from http://startbootstrap.com/template-overviews/sb-admin-2/ and I would like that my Yii2 application would look like it.
How do I integrate that sb-admin-2 UI to my Yii2 application? I already have a UI and I have tinkered the html and css of my app but I still find it dry and boring. That's why I want to use the sb-admin-2 UI from Start Bootstrap but I have no idea how to start.
I have read the instructions at their GitHub page but I still have a hard time understanding it.
Your help would be of great help. Please let me know your thoughts.
I think that perhaps you are mis-understanding what a bootstrap theme is. It is simply a collection of css rules that you can apply to your content to make them look cool. You have to generate the content yourself. A bootstrap theme is not a module, or widget, or anything else like that.
To use it you just need to make sure to include the stylesheet, then apply the classes you want to the elements you have in your admin views. Have a look at the demo; it shows you all the different styles you can apply from the theme.
Yii have a guide to including css and js assets.
You can try Yii2 SB Admin 2
Installation
composer require nullref/yii2-sb-admin-2 "*"
For integration new Theme in Yii2 you must do:
create asset bundles for each functionality (forms, tables, wizards)
create extended widgets for theme
extend ActiveFileds - very complicated!!!
create layouts
All this pieces, theme (css, js, imiges ) include in new module like Theme[Name]
Also very nice, if implement theme in Gii templates.
How do I use Wordpress together with Twitter Bootstrap? I know how to set up a Wordpress page and I've already worked with Bootstrap, but now I want to use these two together for the first time.
For my Wordpress projects I normally just installed Wordpress and started from scratch with creating a new theme. For my Bootstrap projects I always used Initializr to build a template.
Now using Google I found various "Bootstrap themes" and plugins , do I need one of those? I want to customize the bootstrap look with my own colors etc. using LESS, that's why I am asking. I am just having trouble to understand how these two will work together and I haven't found any good resource for it.
There will be a few ways to tackle this, but here's what I've been doing...
Take a copy of your favorite starting point theme
Download the full bootstrap repo (less and everything) and pop it into your theme folder.
Create a folder called 'css' inside the bootstrap folder and set this as your location to output your compiled 'bootstrap.css' file.
Then up in the theme root, open 'styles.css', change the theme name etc as you would if you were creating a new theme, delete all the styles and add just one line of code #import url("bootstrap/css/bootstrap.css");
You should now be able to select this new theme from your 'appearances' menu in 'wp-admin'.
It'll obviously look horrific, but once you add a few of your theme classes/IDs into 'layout.less'. Then run through 'variables.less' to add you base theme you'll be getting somewhere.
Other than that you'll have to go through each template file and consider all the classes/IDs, sometimes edit the theme to make better use of existing bootstrap classes, but other times you'll need to add you're own custom classes to bootstrap.
It's quite time consuming, but once its done it can obviously be re-used to speed up future projects.
Incidentally, I've also been building a theme using this same principle but based on http://stuffandnonsense.co.uk/projects/320andup/ both great projects. I'd recommend seeing which best suits you.
You could always us the Twitter Bootstrap WordPress plugin. It's completely free on WordPress.org here: http://wordpress.org/extend/plugins/wordpress-bootstrap-css/
There's also lots of shortcodes included so you can include Bootstrap elements within your pages and post - there's a demo page of it all here: http://worpit.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-shortcodes-demo/
Hope that helps you get started!
I answered the same question before here at stackoverflow. I feel like it's kind of late sharing but for those who are looking for such tutorial just click the hyperlinked title given: Using Twitter Bootstrap in Wordpress.
There is a quick way to do it, using composer in your theme:
composer.json
{
"config": {
"component-dir": "lib/composer",
"vendor-dir": "lib/composer",
"bin-dir" : "bin/composer",
"cache-dir" : "var/cache/composer"
},
"require": {
"twitter/bootstrap": "3"
}
}
Note: I removed the other composer's section and requirements and phing integration to reduce complexity.
Execute
composer install
And then in your theme, add /lib/composer/twitter/bootstrap/dist/css/bootstrap.css with this sentences
$bootUri = get_template_directory_uri() . '/lib/composer/twitter/bootstrap/dist/css/bootstrap.css';
wp_enqueue_style('sindy_bootstrap', $bootsUri);
et voilà! :)