Home » Uncategorized
Category Archives: Uncategorized
Creating shortcut codes in WordPress
Simply in your theme’s function.php file add the following:
add_shortcode( 'fab-sc-helloworld', 'fab_helloworld');
function fab_helloworld(){
// add your code here
echo 'hello world';
}
In a page or post using the text editor add the following line
[fab_helloworld]
Now view your page/post.
Once this is working, simply replace “echo ‘hello world’;” with whatever PHP code you wish.
Using CSS 3, how can I make my website logo image fade in
Let’s assume your image has an id tag called logo in your html
<img id=”logo” src=”/img/mylogo.jpg”>
All you have to do is add this CSS to your style sheet, the duration of fade in is 3 seconds. Obviously you can set the starting opacity to 0, i.e. invisible or to something like 25%, e.g. opacity:0.25, so it is already partially visible on page load.
/* fade in */
#logo {
animation-name: fadein;
animation-duration: 3s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadein{
from {opacity: 0; filter: alpha(opacity=40); /* IE8 version and earlier */}
to { opacity: 1; filter: alpha(opacity=40); /* IE8 version and earlier */}
}
/* Standard syntax */
@keyframes fadein{
from {opacity: 0; filter: alpha(opacity=40); /* IE8 version and earlier */}
to {opacity: 1; filter: alpha(opacity=40); /* IE8 version and earlier */}
}
This approach can be used when creating a WordPress child theme. Modify the PHP code in the header that displays the image. In WordPress 2016 theme the line to alter begins:
<img src=”<?php header_image();
Simply change this to:
<img id=”logo” src=”<?php header_image();
Add the CSS to the child’s style.css file.
Installing WordPress Plugins
- Always have a backup of your WordPress site, belt and braces is best. Use your file manager or FTP to make a copy of the site and use and export your WordPress database using mySQLi admin on your local PC.
- Plugins can interact with each other so try out the plugin with the others inactivated first. Then re-activate one by one and check out the site.
- Make sure you have the latest version of the plugin preferably via the WordPress site.
- Check out the plugin is still valid with updates of WordPress, if not consider deactivating until it is.
Check out the tutorial on how to install WordPress plugins.
03-qbasic-tutorial-procedures
Paged moved here
Centering WordPress Twenty Fourteen’s webpages
This is a useful trick when using the Twenty Fourteen theme to develop websites. In your WordPress website’s ‘child theme’ style sheet add the following CSS
.site { margin: 0px auto; }
WordPress/Google webtool error – missing author
While not a big problem you can simply insert this code snippet in a WordPress PHP file that suits. A good place is in your footer.php file where the message "Proudly powered by WordPress" lies. A text display of the WordPress websites author's name or perhaps a link to the author's profile
<span class='vcard author'>
<span class='fn'>
Site author <a href='https://web address of you profile if you wish">Fred etc</a>
</span>
</span>How to redirect a webpage to a mobile version.
A good website designer/developer will ensure that smaller screen resolutions are catered for by using responsive themes. However, there are many website out there designed before the appearance of handheld devices. Here are a few ways to deal with the situation.
This is simple using WordPress because their are plenty of plugins that will do this for. They can even display a version of your WordPress website configured for mobile size screen resolutions. However, it is better to either use a purpose made theme that supports desktop and mobile versions or design a new theme for your mobile version.
If you are using designing an HTML website then you can place the following code in the HEAD section of your website:
<script type="text/javascript">
if (screen.width <= 850) {
window.location ="https://yourmobilepage";
}
</script>
You can also use document.location instead of windows.location. The resolution here is set to 850 pixels. This code can also be place in your themes header.php which hopefully is in the child folder. Note however that some mobile cannot execute or have indeed have JavaScript execution disabled.
Another useful way to redirect and you can use this method for other reasons too is using the .htaccess file. The first stage is to check for MIME types, such as wap, used by handheld devices. If this true then a redirect is initiated
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ https://m.domain.com%{REQUEST_URI} [R,L]
01 Responsive Web Design
Part 1
Initially you need to set the viewport, this makes the page fit a screen’s width that is in device independent pixels (DIPs). It’s basically a theoretical screen. The net effect will be a page that can flow to fit different screen sizes such as a tablet or a PC monitor.
<meta name="viewport" content="width=device-width, initial-scale=1">The attribute “initial-scale=1” sets up a 1:1 relationship between CSS pixels and DIPs This means when the website page orientation changes on a mobile device, the layout can take advantage of the full landscape width.
What is responsive website design?
At its simplest it is a delivery method that adapts the HTML/CSS/JavaScript for the platform and browser that is being used to view. Simple browsers, as you might find on a basic mobile phone, may not understand JavaScript or media queries, so therefore best practice is to create a basic web site without JavaScript, and then create extra coding for an improved web experience on smart phones and computers with more sophisticated browsers and screen resolutions. This is an alternative to the previous technique use by web designers of producing a site for the best possible situation and allowing it degrade gracefully as browsers and platform reduce in capability.
With JavaScript, jQuery, and jQuery Mobile, a web designer can test for browser support for certain HTML/CSS features, a particular platform and/or browser.
A freelance web designer can creates responsive web designs by:
- Polyfilling, a technique where additional software allows a particular browser or a version of a browser to appear to have facilities that are lacking when compared to other browsers.
- Fluid proportion-based grids where page element sizing is set in relative units like percentages, rather than absolute units like pixels or points.
- Scalable images to that do not affect the layout of the web page design
- Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser is critical.
- Server-side and client side elements (PHP, JavaScript and jQuery) can be combined to dynamically create faster loading sites where download speed is slower such as mobile phone networks is detected albeit at a design cost.