How to Set, Get and Delete Cookies in WordPress

Unlike most modern web applications, WordPress is stateless. If you’re going to build a web application on top of WordPress, you’re going to need some sort of a system to maintain sessions.

Cookies provide a simple, conventional mechanism to manage certain settings for users who have signed in on the front-end.

In this article, we’ll briefly discuss cookies, why they’re needed in WordPress and how webmasters can benefit from them. We’ll also walk you through the process of setting, getting and deleting cookies.

Let’s get started!

Continue reading %How to Set, Get and Delete Cookies in WordPress%


Source: Sitepoint

What a Year! Help Us Make 2016 Even Better!

It’s been a wild ride here at the PHP channel. The peer review program took full swing and produced results so good they resonated across other channels. Our average traffic has continued to gradually rise, and reader engagement is up, too – no doubt owing to our transition back to a more user friendly commenting system.

We’ve begun an open source program in which we’ll do our best to develop and maintain high-utility packages intended for wide consumption, and we’ve initiated the #sourcehunt effort, a continuous series of posts targeting low-profile packages in need of contributors in order to give them much needed exposure. We’ve even adopted the wildly popular awesome-symfony list of Symfony resources.

In 2016, we’d like to do even better – and we’d like to start by clearing some of the bad rep that’s stuck to us from days long gone (somewhat reminiscent of a certain programming language, eh?). To that end, we’ve set up a super short survey below. We’d like to know how you feel about this channel – the positives and the negatives – and where we could most improve. This is super important to us, so please let us know – be as wordy as you wish, explain / complain about anything as much as you want, just be honest and objective. Try telling us what we’re doing wrong, what we’re doing right, and what we can do to shift stuff from the former section into the latter.

There’s only one rule – no complaining about the ads, popups, and other marketing things. We all hate ads, but they’re our bread and butter. Our advertisers are who make it possible for our content to remain free and accessible to everyone, and if you’d like to bypass this funding model we do offer SitePoint Premium.

Continue reading %What a Year! Help Us Make 2016 Even Better!%


Source: Sitepoint

Free Course: How to Become a Web Developer

Web development can be a daunting topic to get started with. Unlike with conventional applications, not only do you need to be familiar with how the web works, but you also have to understand a variety of technologies and languages. 

In our free beginner’s course, How to Become a Web Developer, you’ll get a solid introduction to the most important aspects of web development.

Screenshot from How to Become a Web Developer course

What You’ll Learn

Envato Tuts+ instructor Jeremy McPeak will teach you everything you need to know to get started with web development. You’ll learn how to create web pages using HTML, CSS and JavaScript. Not only that, but you’ll learn about some of the fundamentals of the internet: URLs, DNS, HTTPS and more! 

Screenshot from How to Become a Web Developer course

Watch the Introduction

Take the Course

To take this free course, simply go to the course page and follow the steps to create a free account. If you already have an account, just log in and you’ll be able to get started right away.

To help you get started as a web developer, you can also check out some of the most popular scripts, plugins and code snippets on Envato Market.


Source: Nettuts Web Development

Magento Theme Development: Series Finale

When I initially planned this series, it was intended to be a 15-article series, in which we planned to develop all the pages of the theme, including the shopping cart, checkout pages, login/sign up pages and the user accounts pages. 

But after writing the first 10 articles, I realized that we have already explained, in detail, all the steps required to make the changes in your Magento theme pages, and editing the other pages will be just a repetition of the steps we have already explained before. 

Therefore, I’m concluding the series in this article, where we’ll finalize the product page from where we left it in the previous article, and I’ll give you some tips on how to use the techniques you have learnt in this series to edit the rest of the pages yourself.

So let’s resume the product details page customization. This is how it currently looks:

Product section without CSS changes

If we compare it with the HTML design we have, this is how it should look:

HTML design for product section

To make it look like our HTML design, we need to make some font changes in the product heading, price and availability sections. Also, in the ‘Add to Cart’ section we need to change the background color and borders. Other than that, we need to make some changes with the margins and the padding. We’ll do that by adding these lines in our theme.css file:

The code should look fairly self-explanatory. After making these changes, the page should look like this:

Product section after CSS

Now we are pretty close to our HTML design requirements. However, if we look at the tabs section of the products page, though it looks fine, it doesn’t match with our HTML design requirement. This is how it currently looks:

Tabs section before CSS

To make it match with our HTML design, we’ll add these CSS lines in our theme.css file:

We have changed the background color for the tab headings, and the color for the current tab. The padding and border for these are also edited. This is how it should look now:

Tabs after CSS

It looks pretty close now. The page should look all good except one small thing: the margin between the tabs section and the related products is way too much and ruins the look of the whole page. 

Margin problem

This is because of the min-height property defined for the .tab-box class. We’ll fix it with this quick code:

The problem is fixed now:

Margin problem resolved

Now our whole product detail page is ready, and is fairly close to our HTML design requirements. With this we have completed the three most important pages of the eCommerce website, which are: homepage, product listing page, and product details page. 

As I mentioned at the start of this article, I’ll wrap up this article series here by giving you some tips on how you can customize other pages of the theme, by using the skills you have learnt in this series.

Let’s have a look at the cart page. It currently looks like this:

Current Cart Page

However, if we look at our HTML design, it should look like this:

HTML Cart Page

Now to customize it, we’ll use the same procedure of turning on the template hints and figuring our which template files are responsible for rendering this page, and then we’ll make changes in those files:

Template hints on cart page

Here you can see that the overall layout of the page is coming from the /template/checkout/cart.phtml file. We need to edit it to place the components in the right position. We’ll put the HTML code we have in our HTML file, and start replacing the code with the dynamic code.

Similarly we can see that the product rows are being rendered from the template/checkout/cart/item/default.phtml file. We will need to edit that file too. Other than that, I don’t think we’ll need to make any other changes in the phtml files, because we can do the rest easily through CSS.

Now let’s check the checkout page. It currently looks like this:

Current Checkout Page

According to our HTML, however, it should look like this:

HTML of Checkout Page

Lets repeat the same procedure again and find out the phtml files we need to change here. There you can see the main layout is coming from /template/checkout/onepage.phtml. And the progress bar is being populated by this file: template/checkout/onepage/progress.phtml.

We can make changes in these two files by comparing the code with our HTML file. After making the changes in these two files, you can make rest of the changes through CSS. I don’t think you’ll need to change any other phtml file for this page.

Here let me reiterate that you should not make the changes in the default theme. You should always make a copy of the phtml file you want to edit in your new theme, and only edit it there.

Moving on to the login page, it currently looks like this:

Login page

Here we’ll again repeat all the same steps, and start by enabling the template hints:

Template hints on login page

Here you can see the main file you’ll need to edit is: templatepersistent/customer/form/login.phtml. You can change most of the layout of the page from this file. For the style changes, you can do that through CSS.

Likewise, we can see how to edit the Signup page. First we’ll enable the template hints:

Signup page

From template hints we can see the overall layout of the signup section is coming from template/persistent/customer/form/register.phtml. You can change it by editing this file.

If you have been following along so far, you should probably know all the steps by heart. You can go on and edit the user accounts pages using the same procedures you have learnt here.

You can formally congratulate yourself now: you can call yourself a Magento theme developer, because you have actually developed a Magento theme and have learnt all the basic methods and procedures required for that.

While writing this series, I have made a great effort to make it easy and clear to follow. I hope this series was a good learning experience for you!

Do provide your feedback about this series in the comments section, and keep coming back to Tuts+ to check out other useful articles. And don’t forget to see what extensions are available to extend your work with Magento.

Have a great learning experience!


Source: Nettuts Web Development

Desktop Wallpaper Calendars: January 2016


  

The new year is an occasion to start things fresh, to rethink current practices and habits. So why not start small? Clean up your desktop and give it an inspiring new background. We might have something for you: desktop wallpapers created by artists and designers from across the globe as a part of our monthly desktop wallpapers challenge.

Desktop Wallpaper Calendars: January 2016

This post features their artwork for January 2016. Each wallpaper is available with and without a calendar and can be downloaded for free. Thanks to everyone who contributed their designs! And a happy 2016 to all!

The post Desktop Wallpaper Calendars: January 2016 appeared first on Smashing Magazine.


Source: Smashing Magazine

A Beginners Guide to Titan Framework: Adding an Enable Type Option

Providing end users with the option to enable or disable certain features of a premium plugin or a theme is pretty common. Titan Framework has recently pushed a new option to its core which does exactly that. Let’s see how you can add an enable/disable toggle button inside an admin panel, a metabox or a theme customizer section with Titan Framework (TF).

The Enable Type Option in Titan Framework

There is an enable type option in Titan Framework to create enable/disable toggle buttons. In the dashboard, the enable type option appears like this: 

Adding enable Type Options

Here are its parameters:

  • name: It assigns the display name of an enable type option.
  • id: This parameter specifies a unique name which gets saved options values.
  • desc: It adds a brief description with the option name.
  • default: (Optional) It assigns the default value.
  • enabled: (Optional) It is the label for the button of the enabled state. The default is set to Enabled.
  • disabled: (Optional) It is the label for the button of the disabled state. The default is set to Disabled.
  • livepreview: (Optional) Each time you add an enable type option in a theme customizer section, this parameter allows you to live preview the changes you make.

All parameters are string by type, except default which is boolean.

Available Containers for the Enable Type Option

You can add this option inside:

  • Admin Panel
  • Admin Tab
  • Metabox
  • Theme Customizer Section

To add an enable type option in these containers, follow these steps:

  • Get an instance via the getInstance() function.
  • Create an option via the createOption() function.
  • Get saved values via the getOption() function.

If you’re interested in learning how to create these containers with TF, then read the previous articles of this series.

Creating an Enable Type Option Inside an Admin Panel

Example Declaration

Let’s create this option in an admin panel first.

At line #8, I added an enable type option via the createOption() function in an admin panel $aa_panel. As this function takes up an array, I’ve defined the values of the parameters name, type, id, desc and default. The value of ID must be unique, i.e. aa_enable_opt. The value of default is set to true, which means the option’s status is set to ‘enabled‘ by default.

The Enable Type option in the Neat Options

In the above screenshot, there is an enable type option named Allow Custom CSS in an admin panel Neat Options.

Example Usage

Let’s get the saved values.

To get the saved value, first get an instance via the getInstance() function (line #3). Then at line #6, the getOption() function retrieves the saved value by registering the option ID aa_enable_opt as its parameter. I saved the result inside a new variable $aa_enable_opt_val. Then I used an if-else check which prints the saved value at the front-end.  

Now the enable type option can hold two values: either 1/0 or true/false. The value is either ‘1’ (enabled state) or ‘0’ (disabled state). Considering this fact, I wrote lines 15 to 20 of the code, which checks the value of the variable $aa_enable_opt_val. If it is ‘1’ then it prints ‘Custom CSS in admin panel is enabled’ at the front-end. If the value of the variable is ‘0’ then it prints ‘Custom CSS in admin panel is disabled‘.

Displaying the Result at the Front-End

Suppose I enabled the option and saved it.

Saving the value for the enable type option

Here is a screenshot of the final result which appeared at the front-end.

The result of the option as viewed on the front-end

Creating an Enable Type Option Inside an Admin Tab

Example Declaration

Next I’ll create this option in an admin tab.

Here, I added this option in an admin tab $aa_tab1. The value of the ID is aa_enable_opt_in_tab. This time, I’ve also defined new labels for the enabled and disabled parameters. 

Adding the enable type option in a tabbed interface

In the image, there is an enable type option inside Tab 1 of panel Neat Options 2. Also note the newly defined labels ‘On‘ for enable and ‘Off‘ for disable.

Example Usage

Now I’ll get saved values.

The code is pretty much similar to what I wrote above. So, let me summarize all the steps:

  • Get a unique instance via the getInstance() function at line #4.
  • Get the saved value via the getOption() function at line #7.
  • Print the saved value at the front-end via the if-else check statement on lines 15 to 20.

Displaying the Result at the Front-End

This time I toggled the option to Off. The front-end prints the following line:

Displaying the result of the option on the front-end

Creating an Enable Type Option Inside a Metabox

Example Declaration

Now I’ll create an enable type option in a metabox.

Here I added yet another enable type option in a metabox $aa_metbox. Its ID is aa_enable_opt_in_metabox. The value of default is set to false.

Adding the enable type option in a meta box

In the above screenshot, you can find this option in a metabox. It appears on all page and post editing screens.

Example Usage

Let’s get the saved value for this option.

I’ve written almost the same code again. The only difference can be spotted at line #6. There exists a new parameter inside the getOption() function. This is the get_the_ID() function which is used to retrieve a specific page or post ID.

Displaying the Result at the Front-End

Let’s again enable the option and save it. The front-end appears like this:

Viewing the result of the option as saved in the meta box

Creating an Enable Type Option Inside a Theme Customizer Section

Example Declaration

Finally, I’ll create this option in a theme customizer section.

Here I created this option in a theme customizer section $aa_section1. Its unique ID is aa_enable_opt_in_sec. The rest of the parameters are the same.

Adding the enable type option into the Customizer

In the above image, there’s an enable type option in a theme customizer section named My Section.

Example Usage

Use the following code to get saved values.

Once again, the code is exactly the same. Only the ID and variable names are different.

Displaying the Result at the Front-End

Here is the screenshot, which displays the changes in live preview mode.

Viewing the enable type option in the Customizer

Conclusion

From an end user’s point of view, the enable type option is quite useful, as you can enable or disable any of the features with just a single click. So go through this tutorial and share your views about it in the comments section.

At this point, we’ve covered all there is to cover about the Titan Framework. Please remember to checkout the series page if you have any questions or comments about any of the topics that we’ve covered. Or feel free to reach out to me on Twitter.


Source: Nettuts Web Development

Magento Theme Development: Product Page, Part 2

In this article of the Magento Theme Development series, we’ll finalize the product page from where we left it in the previous article. We’ll edit the phtml files responsible for rendering the media section, related products section, etc.

Now, let’s start adding the dynamic tag of images, price,
description, etc., inside the product-detail div which we started editing in the previous article.

We’ll start by adding the dynamic tag of images. If we look
at our edited HTML, the code for media extends from lines 19 to 28. We’ll replace
all of this with a single line of code:

As we can see from the actual view.phtml file, this one line
is fetching all the code for showing the images.

So the new code on line 18 will look like this:

Next we’ll replace the product name on line 22 with this dynamic
code:

On line 24, we’ll replace the price code with this:

Inside the pull-right class on line 29, we’ll add the code
for showing the review and product availability. So the new code on line 29
will look like this:

Next we’ll replace the hard-coded description written on line 33 with this dynamic tag:

If we look at the HTML file which we are editing, the next
thing we see is the drop-down boxes for product options selection. We’ll
replace that code inside the size-input div with this dynamic code:

Now, this code will not automatically generate the options
for the product, but will also display the ‘add to cart’ button and sharing
options. So, we can also delete the following code, which comes after .size-input div:

Now if we look at the current page, everything is in place
and working fine. We just need to modify the inside code of some elements like
images area, related products section, etc. And lastly we just need to brush up
the CSS, and our page will be ready.

Without further delay, let’s start editing the code for the
images section. Remember we replaced all the images HTML with just one line of
code: <?php echo $this->getChildHtml('media') ?>. This line of
code is displaying here the code from the file templatecatalogproductviewmedia.phtml:
You can also verify this, by enabling the template hints and checking from
where the code for the images section is coming.

Now that we have determined the file responsible for
generating this code, let’s copy that file from the default rwd theme into our new
theme, and start editing it. The code for the media.phtml file looks like this:

First of all, we’ll copy this HTML code of our images
section into a newly copied media.phtml file:

Now, we’ll start modifying this code to insert the dynamic
code in the appropriate places by comparing it with the actual media.phtml file.

We’ll start by adding these lines at the top of the file:

We’ll replace the div with class preview-small with this
code:

Similarly we’ll replace the div with class thum-image with
this code:

And at the end of the code, we’ll add this line:

So the file’s code will look like this at the end:

Now we are almost done with the images part. At the end
we’ll fix some CSS issues, and it’ll look quite close to our HTML design.

product page getting ready

Next is fixing the related section. We can see by enabling
template hints that this portion of page is coming from the file: templatecatalogproductlistrelated.phtml.

Related products section before editing

As you can probably guess, the next step would be to copy
that file to our new theme folder, and then start editing it.

We’ll create a new file, and copy the HTML code of the
related product section from our HTML theme. Here we’ll only keep one instance
of the product, as we’ll be looping it through in our phtml file. The code
we’ll copy will be this:

Now we’ll start making it dynamic by putting dynamic tags into
it while comparing it with the actual related.phtml file.

We’ll put the entire code in this if tag:

Next we’ll place this for loop right after the row div:

Next we’ll start placing the dynamic tag of product name,
price, description, url, etc., in the product div, as we did while editing
products on the home page.

The whole code for this file after editing will look like
this:

Now we are almost done with the phtml file editing for the
product page. We just have to fix some CSS issues, and our page will be ready.
Currently the page looks like this:

product page before CSS

We are done with most of it. Now we just need to edit the CSS to make the last changes in this page, which we’ll do in the next article, which will also be the last article of the series. Along with the CSS changes for this page, I’ll explain how you can make changes in the other pages of the theme yourself by using the techniques you have learnt in this series.


Source: Nettuts Web Development

Revisiting Firefox’s DevTools


  

If you do any kind of development for the web, then you know how important tools are, and you like finding tools that make your life easier. Developing and testing new browser features, however, takes time. Between the time a useful tool first appears in an experimental nightly build and the time it’s available for everyone to use in Firefox, a while has passed.

Revisiting Firefox’s DevTools

That’s one of the reasons Mozilla released Firefox Developer Edition in November 2014 as the recommended Firefox browser for developers. It gets new feature updates more quickly so that you can use the latest tools.

The post Revisiting Firefox’s DevTools appeared first on Smashing Magazine.


Source: Smashing Magazine

10 Web Predictions for 2015: The Results!

Twelve months ago I published 10 Web Predictions for 2015 — my Nostradamus-like look into the year ahead. I’m useless at these forecasts. Despite keeping a close eye on industry developments, I scored a pathetic 4.5 out of 10 last year. Let’s see if I can beat that in 2015…

1. Responsive Images Will be Usable!

I’d hoped this would be the case in 2014 but it took another year. At the end of 2015:

There will always be caveats but responsive images work almost everywhere and can fall back to a standard img tag. It’s finally usable: 1 out of 1 — a great start!

Continue reading %10 Web Predictions for 2015: The Results!%


Source: Sitepoint

What’s in a State and How to Persist It

A state is something that is affected by you and the memory of that. This something can be you clicking on an element, like a button, or you typing some text into an element. The state resides in your browser’s RAM. It deals with JavaScript objects like arrays, strings, objects, and so on.

In this article we’re going to dig into a pattern of taking these arrays and objects and persist them. To do that, we’ll need some clever ways in JavaScript to separate the temporary “junk” for the really important stuff we can’t lose.

Getting Started

Let’s say that we have an array of objects and each object has “temporary” keys in it. We don’t want these keys to be persistent when sending the array of objects in for a persistent store (localStorage or Ajax).

In the example I’m going to show you, we’ll work with an AngularJS app. In it, we put things into each object that don’t need to be persistent. Everything that is not important to be persistent starts with an underscore.

Continue reading %What’s in a State and How to Persist It%


Source: Sitepoint