Customizable background image on WP theme - wordpress

I have created a wordpress theme and I made it so the background image can easily be changed. The only problem is that currently I have to make the change manually (ie FTP) and Id like to provide my client with a Template options page with an "Upload new background image" option in it.
Im pretty sure this is possible, I just dont know where to start.
Could someone point me out in the right direction?

This will do it for you. Just add the following to your theme's functions.php file:
add_action( 'after_setup_theme', 'add_custom_background' );
This only works in WordPress 3.0 as of now. Of course, you should be running the latest version anyway. It will add a custom background menu in the admin area (under 'Appearance') and will add the styles to the body tag. Also handles uploading, centering/tiling (x, y, or both) images/background colors. Very simple and great functionality.

Related

Where do I place the code to disable the mobile responsive in the Wordpress theme Ocean?

I'm trying to disable the mobile formatting in the WP theme Ocean and I have this snip of code that should work. I know it needs to go in the Theme Functions (functions.php) file but I don't know where to place it within that file. I've tried at the end inside of the final braces, the code compiles but doesn't change anything.
//disable mobile responsive
function no_meta_viewport() {
return false;
}
add_filter( 'ocean_meta_viewport', 'no_meta_viewport' );
Thank you!
Ocean themes using widths as percent that mean even if change viewerport still it will act like mobil also the theme not using bootstrap that why you cant do with css.Shortly i dont think solution be easy, it need a lot of edit.

Wordpress - TwenteenSeventeen picture instead of a title

I'm really new in coding, especially in css. I already read some tutorials but I like to change a specific thing. For my Website I use Wordpress. I also edited a few things in my CSS which already worked. Now I can't find a answer for how I can replace the title with a custom picture.
Click here to watch a picture to understand what I mean.
Click here to acess my website.
I already tried some things, but it would be nice if someone can explain me how to do it.
You can edit header.php in the twenty seventeen to display only a picture.
This source code is on your wordpress server in wp-content/themes/twenty-seventeen/header.php: https://github.com/WordPress/twentyseventeen/blob/master/header.php
You'll want to replace line 31:
<?php get_template_part( 'components/header/header', 'image' ); ?>
With something like
<img src="banner.png" />
You'll have to adjust the location of banner.png to where you actually upload the image.
After you've got that working and it's basically what you want, you can wrap the image tag in a a tag so the banner links back to your home page, if you'd like.

Dashicons in wordpress (frontend) won't display

I'm creating a website in WordPress. I'm using dashicons for rating (manually) holidays.
It used to work, but after update the dashicons won't be visible for non-logged in users. Only, if you login, you can see the star ratings.
The star rating should be visible on the left top of each holiday deal.
Who knows a solution?
Website url is www.ikwilopvakantie.nl
Dashicons is the official icon font of the WordPress admin as of 3.8..
To load Dashicons for non logged in users:
Open directory {your-website-folder/wp-content/themes/}
Go into the folder of your active child theme ( if you don't have active child theme, open the folder of your active parent theme )
Find there functions.php file and add the provided code at the end of it (
make sure, there isn't ?> php closing tag at the end of file. if so, just remove it ):
function ww_load_dashicons(){
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'ww_load_dashicons');
Save changes. Dashicons will loads on your website for all users.
EDIT: there may be some plugin/code, which removed Dashicons from pages. Try to change your code with this one:
function ww_load_dashicons(){
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'ww_load_dashicons', 999);
Try this:
<span class="bx-next dashicons dashicons-arrow-right-alt2"></span>
'dashicons-arrow-right-alt2' is the class of the icon.
You can find them here: https://developer.wordpress.org/resource/dashicons/#arrow-up-alt
This has to go to your functions.php file:
function load_dashicons(){
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'load_dashicons');
For me the problem was simply that my browser blocker addons weren't allowing the source of dashicons.css
If you're using the plug-in "Asset CleanUp", you can navigate to "BULK CHANGES" and easily use "Remove site-wide rule" at the line, where the url for "dashicon" is listed.
Many of the icons on the official list were appearing blank for me when defined as a value of the menu-item property in the register_post_type function.
If you open wp-includes/css/dashicons.css you will see a complete list of icons available, many of which have different names, for example dashicons-quote is actually dashicons-editor-quote.
Using these values solved the problem for me. I also found this cheat sheet to be helpful if you don't want to go digging through your source files.
Solved for me— For some reason, dashicons was only not rendering when I wasn't accessing the https:// version of the site.

Wordpress: Simple solution to have mobile devices load a different homepage

I have done quite a bit of googling and have not found a simple solution for a method or a plugin to simply load a different static homepage for mobile devices. Is there a way to do this or a plugin that will do this (without revamping the whole site for mobile devices, as the mobile site style is good, but the specific static homepage is the only thing that I need changed). Wordpress CMS is the platform.
Thanks in advance!
Update:
So I installed the plugin suggested below, copied over an exact copy of the theme I am using but named it with 'mobile' in front just for reference, other than that everything is exactly the same. I read via google that I could add the following code into the functions.php theme file but it just shows up blank when I add the specific code. Code:
//Set Homepage
$mobilehome = get_page_by_title( 'mobilehome' );
update_option( 'page_on_front', $mobilehome->ID );
update_option( 'show_on_front', 'page' );
// Set the blog page
$blog = get_page_by_title( 'Blog' );
update_option( 'page_for_posts', $blog->ID );
Update 2, solved.
I found a simple solution. I created a new theme file 'page-home.php' and changed the css class '#primary' to '#primary-home', then went into the style.css file and added all '#primary-home' css attributes to match '#primary', except on the mobile CSS area of the stylesheet, I added "display:none;" to #primary-home. So now it just doesn't display the homepage on mobile devices, all other pages work (whole point in making the new template page and CSS attribute). I know this fix is probably the simple easy fix but it worked for me!
I found a simple solution. I created a new theme file 'page-home.php' and changed the css class '#primary' to '#primary-home', then went into the style.css file and added all '#primary-home' css attributes to match '#primary', except on the mobile CSS area of the stylesheet, I added "display:none;" to #primary-home. So now it just doesn't display the homepage on mobile devices, all other pages work (whole point in making the new template page and CSS attribute). I know this fix is probably the simple easy fix but it worked for me!
I think that this is as simple as it could get:
Try this plugin - UserAgent Theme Switcher
It will use the user-agent to detect which browser you are on, in this case it could be something like mobile safari or android, etc... then serve the theme based on that.
This could be a hit or miss because you might want or not to change the theme. A more advanced way to do this would be to use a jQuery plugin that checks for the user agent and lets you "do stuff" after you detect it, in this case it could serve as another page or change some CSS.
It's easy and no need to code everything. Install "Redirection" plugin from wordpress repository.
Go to the settings page.
Enter the "Source URL" with your default desktop's homepage
On the "Match" option, select "URL and user agent" & on the "Action" option select "Redirect to URL". Click "Add Redirection".
New configuration option will be appeared. Give any title you want. The "Source URL" must be blank (means that is your base homepage). On the "User Agent" option, choose whether iPhone or Android. On the "Matched" option, set the redirection you want for the mobile homepage.
Done!
You surely can differentiate the homepage on desktop and mobile device based on the redirection you have set before with that plugin. However, you cannot have same url name (ex: www.abcde.com for desktop & www.abcde.com/mobilehomepage for mobile device).

Drupal administration theme doesn't apply to Blocks pages (admin/build/block)

A site I'm creating for a customer in D6 has various images overlaying parts of the main content area. It looks very pretty and they have to be there for the general effect.
The problem is, if you use this theme in the administration pages, the images get in the way of everything.
My solution was to create a custom admin theme, based on the default one, which has these image areas disabled in the output template files - page.tpl.php
The problem is that when you try and edit the blocks page, it uses the default theme and half the blocks admin settings are unclickable behind the images. I KNOW this is by design in Drupal, but it's annoying the hell out of me and is edging towards "bug" rather than "feature" in my mind. It also appears that there is no way of getting around it.
You can edit /modules/blocks/block.admin.inc to force Drupal to show the blocks page in the chosen admin theme. BUT whichever changes you then make will not be transferred to the default theme, as Drupal treats each theme separately and each theme can have different block layouts. :x
function block_admin_display($theme = NULL) {
global $custom_theme;
// If non-default theme configuration has been selected, set the custom theme.
// $custom_theme = isset($theme) ? $theme : variable_get('theme_default', 'garland');
// Display admin theme
$custom_theme = variable_get('admin_theme', '0');
// Fetch and sort blocks
$blocks = _block_rehash();
usort($blocks, '_block_compare');
return drupal_get_form('block_admin_display_form', $blocks, $theme);
}
Can anyone help? the only thing I can think of is to push the $content area well below the areas where the image appear and use blocks only for content display.
Thanks!
in template.php you can put
function YOURTHEME_preprocess_page(&$vars) {
if (implode('/', arg()) == 'admin/build/block'){
$vars['body_classes'] = $vars['body_classes'].' administer_block';
}
}
and you'll have a nice body class which you can use to hide those images using CSS.
If anyone's still having a problem with this, a bit similar to barraponto's solution above, if you are using the admin menu module, it adds a class (.admin-menu) to the body, which you can use to hide any overlaying divs etc that are getting in the way.
you can apply admin theme wherever you want using hook_init() in your custom module:
function yourmodule_init()
{
if ( some condition here like arg(0) == 'foobar'
or node_load(arg(1))->type == 'something' )
{
$GLOBALS['custom_theme'] = variable_get('admin_theme', '0');
drupal_add_css(drupal_get_path('module', 'system') .'/admin.css', 'module');
drupal_add_js(drupal_get_path('theme', 'myadmintheme').'/jscripts/adminjs.js');
}
}
EDIT: then (probably) you have to use form_alter against the block editing form to restore the target theme. in this way you don't have to hack the core.
Thanks for bringing up this topic! I was having the same problem, and it's annoying. Here's how to remedy it without a single line of code:
1) Switch the main theme to your administration theme.
2) Configure Blocks. This always affects the currently selected main theme.
3) Switch the main theme back to what it's supposed to be. Your admin theme will still reflect your changes.
could just use the block-admin..... tpl file from block module and theme it in your custom theme. I have done this way as admin theme module never overrides block admin even when you use custom path bit.
If you don't need your new theme while performing administration tasks, you can use a different theme while doing so.
Goto "Site Configuration" -> "Administration Theme". Here you can pick the theme to be used while doing admin. So your new theme is only used while users are viewing your site. And you can do admin tasks without the interference of all your images.

Resources