And here’s the kicker: This blog post you’re reading right now? It was written with the help of AI!

Why Use AI for Blog Writing?

1. Efficiency and Speed
   • AI can generate content quickly, allowing businesses to produce a steady stream of blog posts without dedicating extensive time and resources. This is particularly useful for small businesses and startups with limited manpower.
2. Cost-Effectiveness
   • By leveraging AI, companies can reduce the need for hiring multiple content writers, thereby cutting down on expenses. This is especially beneficial for businesses looking to maximize their budget while still maintaining a strong online presence.
3. Consistency and Quality
   • AI ensures consistency in tone and style across all blog posts. It can also help maintain a high standard of quality by minimizing human errors and providing suggestions for improvements.
4. SEO Optimization
   • AI tools are equipped with SEO capabilities, ensuring that the content is optimized for search engines. This helps in improving the blog’s visibility and driving organic traffic to the website.
5. Data-Driven Insights
   • AI can analyze data to understand what topics resonate with the audience, enabling companies to create content that is relevant and engaging. This data-driven approach helps in crafting posts that are more likely to attract and retain readers.

How Daddy Design Utilizes AI for Blog Writing

At Daddy Design, we specialize in creating custom WordPress websites that are not only visually appealing but also highly functional. As a forward-thinking company, we’ve integrated AI into our content creation process to demonstrate its effectiveness and potential.

1. Content Ideation
   • AI helps us brainstorm and generate ideas for blog posts. By analyzing trending topics and keywords in the web design industry, we can identify what our audience is interested in and create content that addresses their needs.
2. Drafting and Writing
   • With the help of AI, we can quickly draft blog posts. AI tools assist in structuring the content, ensuring a logical flow, and even suggesting improvements in grammar and style. This post, for example, was created using AI to showcase its capabilities.
3. SEO and Keyword Optimization
   • AI tools analyze our content to ensure it is SEO-friendly. They provide insights on keyword usage, readability, and other SEO factors that help our posts rank higher on search engine results pages.
4. Editing and Proofreading
   • AI assists in the editing process by identifying errors and suggesting corrections. This helps us maintain a high level of quality in our blog posts, ensuring they are polished and professional.
5. Content Personalization
   • AI enables us to tailor our content to different segments of our audience. By analyzing user behavior and preferences, we can create personalized content that resonates with different groups, enhancing engagement and loyalty.

Conclusion

Incorporating AI into blog writing offers numerous benefits, from increased efficiency and cost savings to enhanced quality and SEO optimization. At Daddy Design, we are committed to leveraging the latest technologies to provide the best services to our clients. By using AI to write this very post, we hope to demonstrate the practical advantages of AI in content creation and inspire other businesses to explore its potential.

Ready to elevate your content strategy with AI? Contact Daddy Design today and let us help you harness the power of AI for your business!

The post Harnessing the Power of AI for Your Blog: A Real-Life Example from Daddy Design first appeared on Daddy Design.

The new reporting requirements can seem daunting, especially if you’re not accustomed to keeping detailed records of your sales and expenses. However, one way to manage the impact of these new rules is by meticulously tracking your purchase costs against your sales. By doing so, you can demonstrate that the amount you received from selling an item was less than what you originally paid for it, thereby reducing your taxable income.

How to Use Excel to Track Your eBay Sales and Purchases

To help you navigate these changes, we’ve created an example Excel sheet that you can use to track your sales and purchases. This sheet will help you determine if the cost of purchasing your items exceeds the revenue from selling them, which can potentially reduce your taxable income.

Step-by-Step Guide to Creating Your Excel Sheet

1. Set Up Your Excel Sheet:
   • Column A: Item Name
   • Column B: Purchase Date
   • Column C: Purchase Price
   • Column D: Sale Date
   • Column E: Sale Price
2. Enter Your Data:
   • For each item you sell, enter the name, purchase date, and purchase price in the respective columns.
   • When you sell the item, record the sale date and sale price.
3. Calculate Your Profit or Loss:
   • In Column F (Profit/Loss), create a formula to subtract the purchase price from the sale price. The formula in cell F2 might look like this: =E2-C2.
   • If the result is negative, it indicates a loss, which can be used to offset your income.
4. Summarize Your Data:
   • Create a summary section at the bottom of your sheet to total your sales, purchases, and profit/loss.
   • Use the SUM function to add up your sales and purchase prices. For example, in cell E100 (assuming you have less than 100 items), you might use =SUM(E2:E99) to get the total sales.

Here’s a simplified example of what your Excel sheet might look like:

Summary:

• Total Purchase Price: =SUM(C2:C99)
• Total Sale Price: =SUM(E2:E99)
• Total Profit/Loss: =SUM(F2:F99)

By maintaining this detailed record, you can ensure that you’re accurately reporting your net income to the IRS and potentially reducing your tax liability by showcasing your actual costs versus your sales. This proactive approach will help you stay compliant with the new eBay reporting requirements while efficiently managing your finances.

The post eBay’s New IRS Reporting Requirements and How to Manage Your Sales for taxes first appeared on Daddy Design.

This blocking occurs because Google’s security algorithms detect that the emails are not being sent from a trusted source. To ensure the reliability and security of email communications, Google requires proper authentication through protocols such as SMTP (Simple Mail Transfer Protocol) with OAuth 2.0. This process involves configuring your WordPress site to use a more secure method of sending emails, ensuring they are delivered reliably to Gmail accounts without being blocked.

We currently ran into the problem and here is how we got it fixed:

How to Fix the Issue Using the Post SMTP Plugin

To fix this issue using the Post SMTP plugin, follow these steps to set up Gmail API for sending emails:

1. Create a Project in Google Cloud Console:
   • Go to the Google Cloud Console.
   • Create a new project.
2. Enable Gmail API:
   • Select your project.
   • Navigate to APIs & Services > Library.
   • Search for “Gmail API” and enable it.
3. Create OAuth 2.0 Credentials:
   • Go to APIs & Services > Credentials.
   • Click Create Credentials and select OAuth 2.0 Client ID.
   • Configure the consent screen by providing necessary details.
   • Choose Web application as the application type.
   • Add the redirect URI provided by Post SMTP (usually found in the plugin’s settings).
4. Add Test Users:
   • Under OAuth consent screen, add the email addresses of users who will be testing (including your own).
5. Get Client ID and Client Secret:
   • Copy the Client ID and Client Secret.
6. Install Post SMTP Plugin:
   • If not already installed, install and activate the Post SMTP plugin in your WordPress site.
7. Configure Post SMTP:
   • Go to Post SMTP settings in your WordPress dashboard.
   • Choose Gmail API as the mailer.
   • Paste the Client ID and Client Secret into the respective fields.
   • Save the settings.
8. Authenticate and Grant Permissions:
   • Click the Grant permission with Google button.
   • Follow the on-screen instructions to grant permission.
9. Send a Test Email:
   • Use the Post SMTP settings to send a test email and ensure everything is working correctly.

By following these steps, you will configure your WordPress site to send emails through Gmail’s SMTP servers using OAuth 2.0 authentication, ensuring that your emails are delivered reliably without being blocked by Google.

The post How to Fix Google Blocking Gmail from WordPress Sites first appeared on Daddy Design.

Why Choose Shopify?

Shopify has become a leading platform for e-commerce businesses, and for good reason. Here are some key points that make Shopify a standout choice:

• User-Friendly Interface: Shopify’s intuitive design makes it easy for anyone to set up and manage an online store, even without technical expertise.
• Customizability: With countless themes and apps available, you can create a store that perfectly aligns with your brand.
• Scalability: Whether you’re just starting out or scaling up, Shopify can grow with your business, handling everything from small shops to large enterprises.
• Security and Reliability: Shopify offers robust security features and reliable uptime, ensuring your store is always accessible and secure for your customers.

Our Custom Shopify Services

At Daddy Design, we offer a comprehensive range of Shopify services to cater to all your e-commerce needs:

1. Set Up and Getting Started: We’ll guide you through the initial setup process, ensuring your Shopify store is configured correctly from the start.
2. Custom Design or Template Modifications: Whether you need a completely custom design or want to tweak an existing template, our designers will create a stunning, user-friendly site that reflects your brand.
3. General Usage and Product Setup: From adding products to setting up collections and managing inventory, we’ll help you make the most of Shopify’s powerful features.
4. Ongoing Support: Our team is here to provide continuous support and updates to keep your store running smoothly and efficiently.

Why Choose Daddy Design?

Here’s why Daddy Design is your ideal partner for custom Shopify website development:

• Years of Experience: We’ve been developing websites for years, and our deep understanding of Shopify allows us to deliver high-quality, tailored solutions.
• Customer-Centric Approach: Your satisfaction is our priority. We work closely with you to understand your needs and create a website that exceeds your expectations.
• Comprehensive Services: From design to deployment and ongoing support, we offer a full suite of services to ensure your Shopify store’s success.
• Proven Track Record: Our portfolio of successful projects speaks for itself. We’ve helped numerous businesses achieve their e-commerce goals, and we’re ready to do the same for you.

Ready to take your e-commerce business to the next level? Contact Daddy Design today to discuss how our custom Shopify services can help you achieve your goals.

The post Elevate Your E-Commerce with Custom Shopify Websites from Daddy Design first appeared on Daddy Design.

Local companies in Fort Lauderdale trust us with their web design projects because we deliver results. Some of our satisfied clients include Moss Construction, Chauvet Lighting, and Bodega Taqueria y Tequila. These businesses have seen firsthand how our professional web development services can enhance their online presence and drive growth. Our commitment to excellence and customer satisfaction has made us a trusted partner in the local community.

Whether you’re a small business looking to establish your online footprint or a large enterprise needing a sophisticated web solution, we have the skills and experience to meet your needs. Our team of experts is dedicated to providing top-notch web design and development services, with a particular focus on WordPress. Contact us today to find out how we can help your Fort Lauderdale business succeed online.

The post Trusted Web Design and Development in Fort Lauderdale first appeared on Daddy Design.

*Please note that this is a very bare bones example of how to set up the structure and you will need to have an understanding of HTML and CSS to style this to fit your particular needs.

STEP 1: Create a Header element using HTML

In Step 1, we will be creating a simple Header element using HTML.

HTML

<header id="header">Header</header>

Items to Note:

This is a bare bones working example and you will need to add your Header elements to fit your particular needs.

STEP 2: Use CSS to style the Header element

In Step 2, we will utilize CSS to style the basic Header element.

CSS

#header{
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
right: 0;
color: #000;
background: #ccc;
z-index: 9999;
}

Items to Note:

1. Adjust the height of the Header to fit your particular needs.
2. Adjust font and link colors to fit your particular needs.
3. Adjust the background color to fit your particular needs.
4. Z-index may need to be adjusted depending on other elements in your code.

STEP 3: Use CSS to set up the alternate Header

In Step 3, we will utilize another CSS class that will be triggered in Step 4 with JavaScript to override the style for the Header element.

CSS

#header.black{
color: #fff;
background: #000;
}

Items to Note:

1. Make sure if you change the CSS class name that you adjust it in the next step as well.
2. If the font and link colors conflict with your new background color then make sure to adjust them.
3. Adjust the alternate background color to fit your particular needs.

STEP 4: Use JavaScript to trigger the alternate CSS class for the Header

In the final step, we will utilize JavaScript and the scroll function to trigger the alternate CSS class for the Header element when the user scrolls the page. Basically all that is happening with this simple script is that the CSS class is added and removed based on the scroll point set which results in a quick smooth change of background color for the Header.

JS

$(window).scroll(function() {
	var scroll = $(window).scrollTop();
	if (scroll >= 60) {
        $('header').addClass("black");
	} else {
        $('header').removeClass("black");
	}
});

Items to Note:

1. Adjusting the number 60 will adjust how fast or slow the change happens during scroll.
2. If you want to change your CSS class name then make sure you update it in both places.

Full Code

HTML

<header id="header">Header</header>

CSS

#header{
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
right: 0;
color: #000;
background: #ccc;
z-index: 9999;
}

JS

$(window).scroll(function() {
	var scroll = $(window).scrollTop();
	if (scroll >= 60) {
        $('header').addClass("black");
	} else {
        $('header').removeClass("black");
	}
});

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. Please do not email us with problems regarding this tutorial unless you want to hire us.

Hire Us

If you are unfamiliar with web development and need hep with your website we are available for hire. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote

The post How to change the Header background color on scroll using minimal JavaScript first appeared on Daddy Design.

Firstly, you’ll need a website that provides real-time and up-to-date prices. We found an excellent site, https://cryptoprices.cc/, which not only displays current prices but also offers guidance on setting up a basic Google Sheet to showcase these prices. However, in this tutorial, we have included additional elements to make tracking your investments more convenient.

STEP 1.

Commence by utilizing Cell A3 to exhibit the coin symbol. For instance, Bitcoin is represented by BTC. Ensure that the symbol is in all capital letters. Here is a list of crypto coins and their symbols.

STEP 2.

Now, retrieve the price for the given symbol by pulling the current price from the Crypto Prices website. Insert the following formula into cell B3: =IMPORTDATA(“https://cryptoprices.cc/”&A3&””). The URL path ends with /SYMBOL, pulling information from A3.

That covers the basics of obtaining the current live prices of any coin. If you wish to enhance your Google Sheet further, follow the steps below.

STEP 3.

Display the All-Time High (ATH) price of the coin in Cell C3. Insert this formula: =IMPORTDATA(“https://cryptoprices.cc/”&A3&”/ATH”).

STEP 4.

Track your percentage returns and losses. Input the purchase price of the coin in Cell E3. Then, in cell F3, insert this formula: =IF(E3 <> 0, (B3 – E3) / E3, “”), calculating the current percentage profit or loss.

BONUS FUN STEP

To visually distinguish between profit and loss:

• Select cell F3.
• Navigate to “Format” in the top menu.
• Choose “Conditional formatting.”
• Set up two rules:
  • For positive percentage change (green):
    • Under “Format cells if,” choose “Custom formula is.”
    • Enter the formula: =F3 > 0
    • Set the formatting style for positive values (e.g., green).
  • For negative percentage change (red):
    • Under “Format cells if,” choose “Custom formula is.”
    • Enter the formula: =F3 < 0
    • Set the formatting style for negative values (e.g., red).

This way, the background color of cell F3 will change to green when the percentage change is positive and red when it’s negative. Adjust the formatting options as needed.

Download our example Google Sheet here (the example coins we used on this sheet are: BTC, ETH, LINK, SOV, SOL, and SUSHI)

The post How to Retrieve Crypto Ticker Prices in Google Sheets for Bitcoin and Other ALT Cryptocurrencies first appeared on Daddy Design.

ACF describes the Flexible Content field as follows:

The Flexible Content field provides a simple, structured, block-based editor.

Using layouts and sub fields to design the available blocks, this field type acts as a blank canvas to which you can define, create and manage content with total control.

How difficult is the Advanced Custom Fields Flexible Content field to use?

In general the Advanced Custom Fields plugin requires a lot of development knowledge to properly utilize and the Flexible Content field is definitely an advanced feature of the plugin that requires a lot of thought behind how to properly implement it. Accessing the values is done via the have_rows, the_row, get_sub_field, and the_sub_field functions, so you should be familiar with these methods. We recommend you visit the ACF documentation resources available on their website linked below to get familiar with how this particular field needs to be implemented. 

Visit the ACF Documentation Resources

Hire Us

If you are unfamiliar with web development and need hep with your website we are available for hire. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote

The post Flexible Content is our Favorite Feature of the Advanced Custom Fields (ACF) WordPress Plugin first appeared on Daddy Design.

In the fast-paced digital landscape, staying ahead of the curve is crucial. Daddy Design, with 20 years of expertise in South Florida, understands the evolving design trends and user expectations. Make 2024 the year your business stands out with a modern, user-friendly website that captivates visitors from the moment they land on your page.

Unlocking the Potential of WordPress:

Our web design and development services are powered by the versatility and scalability of WordPress. As one of the most popular content management systems, WordPress offers a robust foundation for creating visually stunning and highly functional websites. Whether you’re a local business or an e-commerce store, we tailor WordPress solutions to meet your unique needs.

Crafting a Distinctive Identity:

Your logo is the face of your business, and a well-designed logo speaks volumes about your brand. Daddy Design’s experts specialize in creating logos that resonate with your audience and convey your brand’s essence. Let your logo be a visual representation of your business values and aspirations.

Get a Free Quote:

Curious about how Daddy Design’s services, backed by 20 years of experience, can transform your online presence? We offer a free quote to kickstart your journey towards a new website and branding. Simply reach out to us, and our team will provide you with a personalized estimate tailored to your business requirements.

Client Success Stories and Testimonials:

Don’t just take our word for it—explore our portfolio and discover the success stories of businesses we’ve had the pleasure of working with over the past two decades. Our clients’ testimonials showcase the impact our services have had on their online presence and business growth. We believe in transparency, and our track record speaks for itself.

Conclusion:

As you envision the growth and success of your business in 2024, consider the transformative power of a new website and branding with Daddy Design. South Florida businesses, with 20 years of our expertise, take the leap and elevate your online presence with our web design and development services. Contact us today for a free quote and join the ranks of satisfied clients who have experienced the positive impact of our long-standing expertise. Let’s make 2024 the year your business truly shines!

The post Elevate Your Business in 2024: Unleash the Power of Stunning Branding and a Dynamic Website in South Florida first appeared on Daddy Design.

I navigated to my iPhone’s photo gallery and entered the term “recovery.” To my relief, there it was — a screenshot containing my recovery phrase..

Surprisingly, I also located the recovery image for my MetaMask wallet using the same method. While this unconventional approach did help me regain access to my coins and NFTs, it’s crucial to note that this isn’t a secure practice. Storing recovery phrases and passwords in your photo gallery is risky. For enhanced security, always keep these sensitive details in a secure location accessible only to you, minimizing the risk of loss or unauthorized access.

The post Unlocking Your Crypto Wallet: A Clever Trick When You Forget Your Recovery Phrase first appeared on Daddy Design.

*Please note that this is a very bare bones example of how to set up the structure for this particular layout and you will need to have an understanding of HTML and CSS to style this to fit your particular needs.

Step 1: The Basics

While this step is not necessary we always use this line of code in our projects to clear out any unwanted margin and padding so that we have full control over all spacing. If you are unfamiliar with this line of  CSS code it serves as an override to clear out all default margin and padding settings. This code should be placed at the top of your stylesheet.

CSS

*{ margin: 0; padding: 0; }

Step 2: Container Element

In order to get started with our layout, we will first create our container element, this can be any structural element you want to use but for the purposes of this tutorial we used the ‘section’ element.

HTML

<section class="section">
</section>

CSS

.section{ 
width: 100%; 
float: left; 
position: relative;
 }

Step 3: Sticky Element

The next item we will set up is whatever you want to make stick(lock) to the left side next to the content, on the Moss website we used a few different options like; standard images, slideshows, and video pop-ups. We typically set this item up utilizing a background image but for purposes of this tutorial we will set this item up as a very basic example with just a background color and you will need to determine how you want to handle the image aspect of this element in your application.

HTML

<section class="section">
  <figure class="image">YOUR IMAGE HERE</figure>
</section>

CSS

.section .image{ 
width: 50%; 
height: 100vh; 
float: left; 
position: sticky; 
top: 0; 
left: 0; 
background-color: #000; 
}

Items to Note:

1. Height 100vh will use the screen size to determine the height of the element.
2. Position Sticky will keep the element locked in place until the content scrolls completely.
3. Top 0 and Left 0 positions the element in place to the left side of the screen.
4. For purposes of this tutorial we just added a background color, you will need to determine how you want to implement the displaying of the image. (We recommend as a background image)

Step 4: Main Element

The final element to create is the main element that contains all of the content. The way we created this element allows for the content to align in the center if the content is shorter than the screen height.

HTML

<section class="section">
  <figure class="image"></figure>
  <div class="main">
    <div class="wrap">
      <header class="header">
        <h1>YOUR TITLE HERE</h1>
      </header>
      <div class="content">
        <p>YOUR CONTENT HERE</p>
      </div>
    </div>
  </div>
</section>

CSS

.section .main{ 
width: 50%; 
min-height: 100vh; 
float: right;
display: table; 
position: relative; 
overflow: visible; 
position: relative;
}
.section .main .wrap{ 
display: table-cell; 
vertical-align: middle; 
padding: 60px; 
}
.section .header{ 
width: 100%; 
float: left; 
}
.section .content{ 
width: 100%; 
float: left; 
}

Items to Note:

1. Min-Height 100vh will use the screen size to determine the height of the element.
2. Display Table will allow us to position the wrap element in the center of the screen if the content is shorter than the screen height.
3. Display Table-Cell and Vertical-Align Middle will position the wrap element in the center of the screen if the content is shorter than the screen height.

Final Code

HTML

<section class="section">
  <figure class="image">YOUR IMAGE HERE</figure>
  <div class="main">
    <div class="wrap">
      <header class="header">
        <h1>Your Title Here</h1>
      </header>
      <div class="content">
        <p>Your Content Here</p>
      </div>
    </div>
  </div>
</section>

CSS

*{ margin: 0; padding: 0; }

.section{ 
width: 100%; 
float: left; 
position: relative;
 }

.section .image{ 
width: 50%; 
height: 100vh; 
float: left; 
position: sticky; 
top: 0; 
left: 0; 
background-color: #000; 
}

.section .main{ 
width: 50%; 
min-height: 100vh; 
float: right;
display: table; 
position: relative; 
overflow: visible; 
position: relative;
}
.section .main .wrap{ 
display: table-cell; 
vertical-align: middle; 
padding: 60px; 
}
.section .header{ 
width: 100%; 
float: left; 
}
.section .content{ 
width: 100%; 
float: left; 
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. Please do not email us with problems regarding this tutorial unless you want to hire us.

Hire Us

If you are unfamiliar with web development and need hep with your website we are available for hire. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote

The post How to Code a Side by Side Locked Image Layout for your Website first appeared on Daddy Design.

Pre-Made WordPress Theme Customization:

Our team will customize the chosen theme to align with your brand identity. This includes adjusting colors, fonts, layout, and overall design elements to create a unique and professional look tailored to your business.

Content Filling and Integration:

We will populate the website with your provided content, including text, images, videos, and any other multimedia elements. Our experts will ensure seamless integration, maintaining a cohesive design and user-friendly navigation throughout the website.

Functional Enhancements:

In addition to the standard theme features, we will implement necessary plugins and widgets to enhance the website’s functionality, ensuring a smooth user experience for your visitors.

Responsive Design Optimization:

Our team will optimize the website for various devices, ensuring it is fully responsive and accessible on desktops, tablets, and mobile phones. This guarantees an optimal viewing experience for all users.

Quality Assurance and Testing:

Prior to launch, we will conduct rigorous testing to ensure the website functions flawlessly across different browsers and devices. This includes checking links, forms, and overall performance to guarantee a seamless user experience.

We are here to help with your WordPress design needs!

If you’re still unsure whether custom WordPress design or using a premade template is the right decision for you, please do not hesitate to use our contact form or give us a call at 407-227-9377 to discuss your project needs. Our team of WordPress experts are here to help review your unique needs and explain the benefits of each option in order to help you reach the proper decision so that you can begin moving forward with your project.

The post Breaking Down the Customization of Premade WordPress Templates Our Most Affordable Solution first appeared on Daddy Design.

Full Sail – The Beginning:

Founders Ryan Steinhardt and Hunter Ecklund both wanted to pursue their passion for design by attending Full Sail University in Orlando Florida to obtain a degree in Digital Media of Computer Science. With Ryan being slightly older than Hunter, Ryan attended Full Sail earlier than Hunter. 

2000 – Ryan’s Time at Full Sail:

During Ryan’s time at Full Sail he purchased the domain daddydesign.com to host his college portfolio as well as his soon to become widely popular Barney Shakur video since there was no YouTube at the time. This Barney Shakur video, which featured Barney the Dinosaur rapping to 2Pac’s popular ‘Hit ‘Em Up’ song, was one of the earliest forms of a viral video. It became very popular very fast and was picked up by many popular websites at the time including the famous eBaum’s World. This was great for Ryan because at the time hosting companies were charging per download and he could only afford to host the video 5 days a month due to popularity. This video is still very well known today and there has even been a recent surge in new similar videos. 

2001 – Hunter’s Time at Full Sail:

During Hunter’s time at Full Sail he hated standard HTML and was really interested in the new Flash websites he had been seeing around the web. Since Flash was new, there were no courses being taught so he bought a book and self taught himself how to design and code in what was then Macromedia Flash. While everyone else in class presented their final website projects in standard HTML, Hunter presented a fully interactive Flash website and ended up winning the Web Design Award upon graduation. He was also part of a project team that recreated a scene from the movie ‘Pi’, this recreation drew large praise from the course director and was being shown to following classes as well as film students as one of the best examples to come out of the program.

2002 – Hunter & Ryan Meet:

While they both didn’t graduate at the same time they ended up meeting through a mutual friend that hosted a weekly poker night and quickly became good friends from that night on. 

2003 – Getting Started:

Staying in touch over the next few years, Hunter and Ryan both enjoyed successful careers as Art Directors for separate companies. However, they both wanted more and to be their own boss so they both decided to try to convince their current employers to agree to become retainer clients instead of employers. Since Ryan already had the Daddy Design domain that was still receiving high amounts of traffic every day, thanks to the popularity of the Barney Shakur video, it was an easy choice to just roll with the company name of Daddy Design. The 2 retainers were the perfect starting seed to help Daddy Design get off its feet.

2004 – Business is Good:

Through word of mouth and a high organic Google ranking Daddy Design was enjoying success during the first year in business but it wasn’t until what happened next with the emergence of Social Media that really catapulted Daddy Design into another level.

MYSPACE YEARS:

The MySpace years are really what changed everything, it was during this time that we saw tremendous growth and recognition. This boom was unlike anything that had ever happened before and we were right there at the forefront. It all started one day when Hunter started messing around with the code on his page developing a pretty basic way of manipulating the core MySpace code by overriding it with his own CSS and HTML. Once a few of our friends with businesses caught wind of the custom coding they started asking for us to enhance their pages and our MySpace business subset was created. As MySpace’s popularity grew so did its credibility with large companies which started to recognize it as a major marketing avenue and developing large budgets for campaigns. There were basically 2 main companies to choose from in the professional marketplace for MySpace design with one of them being Daddy Design. This small marketplace led to us landing many large companies and working on some high profile projects such as NBA on TNT, MLB on TBS, VEVO, Tech N9ne, Universal Music, and many more. Without spending any money on marketing we benefited from being at the top of the Google search for MySpace design until it eventually died out and was replaced by the next stage of the social media boom… Facebook.

FACEBOOK YEARS:

As we all know MySpace was short-lived and Facebook began to take over as the main social media hub. Facebook saw how popular MySpace customization was and added custom tabs where you could create special landing pages. Since these tabs were basically mini landing pages, a lot of companies began shifting their budgets from MySpace to Facebook. Since we were very heavily involved with MySpace we paid close attention to the shift in power between MySpace and Facebook and had already begun to shift a lot of our focus over to Facebook. This allowed us to carry over our dominance in social media design from MySpace to Facebook and landed new large clients such as Nike, Cisco, Sandisk, IBM, Sennheiser as well as maintain our current impressive client list. 

WORDPRESS YEARS:

After the social media boom was over we knew we had to put our focus back to the web and by this time there had been another big change with the emergence of blogging platforms. There were a few platforms to choose from and we narrowed it down to two to decide between; WordPress and Drupal. Ryan was leaning towards Drupal and Hunter saw the great potential in WordPress, the big debate was finally put to rest when a former MySpace client requested a custom WordPress blog. 

During the early years of their WordPress journey, the platform was vastly different from its current form. Customization was key, and a myriad of tweaks and hacks were necessary to transform it into a versatile, full-fledged website. The challenges of those early days shaped our expertise, teaching us to navigate the complexities of WordPress with ingenuity and creativity. Through API integrations, advanced filters, user login systems, and bespoke creations like a full fledged custom wine label maker, they continue to shape the WordPress landscape, setting new standards for innovation in the digital realm.

Additionally, we’ve created custom WordPress plugins (Social Toolbar, Report Error, Page Extension) that enhance functionality and streamline user experiences.

Daddy Design Gives Back with Tutorials:

Our commitment to the design and development community runs deep. We are passionate about sharing our knowledge and expertise, which is why we regularly create comprehensive tutorials. From general guidance to in-depth coding solutions, our tutorials cater to a wide range of skill levels. You can explore our extensive library of tutorials by visiting:

Daddy Design Tutorials

Throughout the years the industry has gone through many changes and as you can see from our timeline Daddy Design has stood the test of time. We’d be lying if we said it’s been easy but we pushed through and excelled in every challenge presented to us and we are proud and determined  to continue to push forward for many more years to come. Thank you to all of our clients over the years for trusting and believing in us, without you we wouldn’t be celebrating 20 amazing years of design excellence!

The post Celebrating 20 Amazing Years of ‘Design Excellence’! first appeared on Daddy Design.

This limited edition 80’s and 90’s inspired glass features full color printed on a 17oz Arc Nordic Cooler and will be available on Sunday April 23^rd at 1:00pm EST only on www.id10t404.com. Don’t miss out because supplies are limited and once this amazing glass sells out it will never be available again!

The post Daddy Design Collabs with ID10T404 on an 80’s Inspired Craft Beer Glass first appeared on Daddy Design.

Step 1: Search for your location on Google Maps

The first step should be self-explanatory; you’ll need to search for your location on Google Maps.

https://www.google.com/maps

Step 2: Generate your Google Maps embed code for your location

Now that you’ve found your desired location on Google Maps, the next step is to generate your Google Maps embed code to use on your website.

Step 2-A: Click on the ‘Share’ button from the left side menu.

Step 2-B: Click on the ‘Embed a Map’ tab in the pop-up window.

Step 2-C: It really doesn’t matter which size you choose since we will be resizing the map via CSS in the next steps but select ‘Large’ and then click ‘COPY HTML’.

Step 3: Add your Google Maps embed code to your website

Now that you have your embed code for your Google Map, you are ready to add it to your website. In order to control the visual sizing output of the Google Map you will need to place it inside a container div like below:

HTML

<div id="google-map">YOUR GOOGLE MAP CODE HERE</div>

Items to Note:

• You can change the html container element to anything you want, we made this as simple as possible by using a div with the id ‘google-map’ which will be used as a reference for the CSS in the next steps. Please note that if you end up changing this structure you will need to update the CSS in the next steps as well.
• Don’t forget to replace ‘YOUR GOOGLE MAP CODE HERE’ with your actual Google Maps embed code.
• Please remember that this code is meant to be a basic guideline, you may need to modify it in order to suit your particular needs.

Step 4: Use CSS to resize your Google Map and make it responsive

Now that you have your Google Map displaying on your website you will need to use CSS to resize it and set it to be responsive. Copy the CSS code below and reference the ‘Items to Note’ that follow for setup instructions:

CSS

#google-map{
width: 100%;
max-width: 100%;
display: block;
}
#google-map iframe{ 
width: 100% !important; 
height: 500px !important; 
display: block; 
}

Items to Note:

• Lines 1-5 is the CSS to control the container div, you can adjust this code to suit your particular needs based on your website structure but for simplicity and the purposes of this tutorial we just made this element fully responsive.
• Line 7 will override the Google Map embed codes default width and set it to 100% or full width of the container. We used ‘!important’ just to make sure this will always take priority.
• Line 8 will override the Google Map embed codes default height. We set the height to 500px but you can change this to any height you want. We once again used ‘!important’ just to make sure this will always take priority.
• Please remember that this code is meant to be a basic guideline, you may need to modify it in order to suit your particular needs.

Step 5 (Bonus Step): Use Media Queries to update the height of your Google Map

After completing Step 6 you should now have a fully responsive Google Map on your website but you may have noticed that the height doesn’t change, only the width. If you want to adjust your Google Maps height throughout the responsive resize process you will need to control it through the use of Media Queries.

What are Media Queries? You can find out here: https://www.w3schools.com/css/css3_mediaqueries.asp

Basic example of using Media Queries:

CSS

@ media only screen and (max-width: 600px){
#google-map iframe{ 
height: 300px !important; 
}
}

Items to Note:

• Line 1 is how you define the Media Query breakpoint on when you want your resize to take place. We set the resize to take place when the screen hits 600px wide. If you add this code and resize your browser window you will see the resize take place.
• Line 3 will override the previous height setting of 500px to 300px. You can change this to any height you want.
• If you need to change the height at more breakpoints then repeat this step.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. Please do not email us with problems regarding this tutorial unless you want to hire us.

Hire Us

If you are unfamiliar with web development and need help displaying or fixing your Google Map we are available for hire. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote

The post How to add a responsive Google Map to your website first appeared on Daddy Design.

STEP 1:  Retrieve your Google Place ID

In this first step you will need to retrieve your Google Place ID since it will be required to retrieve the correct Google Reviews URL in the next step. If you already know your Google Place ID then you can proceed to Step 2, otherwise follow these instructions:

Step 1-A: Visit this URL: Go Here

Step 1-B: Type your business name into the search bar inside the map.

Step 1-C: Click on your name to display your Google Place ID. (See Screenshot)

STEP 2:  Retrieve your Google Reviews URL

In this next step you will use your Google Place ID from Step 1 to retrieve the unique URL for your Google Reviews:

https://search.google.com/local/writereview?placeid=YOUR-ID-HERE

Items to Note:

You will need to replace “YOUR-ID-HERE” with your actual Google Place ID

STEP 3: Shorten your Google Reviews URL (*Optional)

Why shorten your Google Reviews URL? To put it simply, QR codes with long URLs can be decoded less by your Smartphone than shortened URLs. In order to alleviate any potential issues with your QR code we recommend shortening your Google Reviews URL by using any URL shortener of your choice.

We Recommend TinyURL:  https://tinyurl.com/app

*Please note that this step is optional, if you do not wish to shorten your Google Reviews URL please proceed to Step 4.

STEP 4:  Create the QR Code

There are many QR code generators available on the web from free to pay but for purposes of this tutorial we have found ‘Free QR Code Generator’ to be the best free QR generator to use. Follow these instructions to create your QR code:

Step 4-A: Visit this URL: https://qrd.by/

Step 4-B: Paste either your full or shortened Google Reviews URL in the URL box

Step 4-C: Click the ‘Download QR Code’ button

Step 4-D: Download and save your QR code in your desired file format (We recommend either EPS or PNG)

STEP 5:  Add your Google Reviews QR Code to your Marketing Materials

Now that you have your Google Reviews QR Code the final step is to utilize it in your marketing materials to allow your customers easy access to leave those coveted Google reviews. Depending on your business there are various approaches you can take for how and where to display your Google Reviews QR Code.

Advanced QR Code Marketing Services – HIRE US

If you are looking for something more custom designed to fit your brand then hire us for your marketing design needs. Daddy Design has many years of experience in print design and production and understands exactly what it takes to provide our clientele with remarkable print designs that not only look great, but also communicate the core message accurately and efficiently. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote

The post How to use your Google Reviews URL to create a custom QR Code first appeared on Daddy Design.

What does ADA Compliance mean?

In short, the Department of Justice (DOJ) published the Americans with Disabilities Act (ADA) Standards for Accessible Design that states; all electronic and information technology must be accessible to people with disabilities. Examples could include, but are not limited to, people with the following: visual impairment, speech or hearing impairments, those who use screen readers or assistive technology, such as text to speech.

ADA Compliant Services – We are here to help!

Whether you have an existing website or need to build a new website from the ground up, Daddy Design has the skill and knowledge to help ensure your website is ADA Compliant. You can now visit our new ADA Compliant Services page to learn more about this exciting new service and find out what it means for you and your current website or new project.

If you still have questions regarding ADA Compliance or want to simply start your project, please do not hesitate to use our contact form or give us a call at 407-227-9377.

The post Is your website ADA (Americans with Disabilities Act) compliant? first appeared on Daddy Design.

Step 1: Register a Facebook Developer App

Since the Instagram method for creating an Instagram feed is no longer supported in 2020 we will need to turn to a new method that utilizes a Facebook for Developers App. Before starting the steps below make sure that you are logged into your Facebook account.

Step 1-A: Visit the following Facebook Developer URL: https://developers.facebook.com/apps/

Step 1-B: Click on the ‘Add a New App‘ button and select the option ‘For Everything Else‘.

Step 1-C: Give your app an ‘App Display Name‘ to easily identify it and fill out the remaining information, when you’re ready click the ‘Create App ID‘ button.

Step 1-D: After successfully creating your app you will then be redirected to a different dashboard where you can ‘Add a Product’. From the product list you are going to use ‘Instagram Basic Display‘, once you’ve located it click the ‘Set Up‘ button to proceed.

Step 1-E: After clicking the ‘Set Up‘ button you will then once again be redirected to a different page, scroll down to the bottom and click the ‘Create New App‘ button. This should trigger a pop up window, double check your ‘Display Name‘ and then click the ‘Create App‘ button.

Step 1-F: Now that your app is created, you will need to finalize some of the settings. Scroll down to the bottom of the app dashboard to ‘My Products‘, find ‘Instagram Basic Display‘ and click on the ‘Settings‘ button.

Step 1-G: After clicking the ‘Settings‘ button you should be redirected to a settings page. Scroll down until you find the following fields and enter your website’s URL (*https only) on each of them:

• Valid OAuth Redirect URIs
• Deauthorize Callback URL
• Data Deletion Requests

In order to use the Instagram platform, your app needs to be approved for instagram_graph_user_profile and instagram_graph_user_media permission. Scroll down to the ‘App Review for Instagram Basic Display‘ and click on each of the ‘Add to Submission‘ buttons. Fill in and supply all of the other listed requirements for Facebook approval.

Step 2: Generate your Instagram Token

Since Facebook needs to review and approve your app you will need to obtain a temporary Instagram token for the meantime. On the same settings page from Step 1-G complete the following steps:

Step 2-A: Find the section ‘User Token Generator‘ and click on the button ‘Add or Remove Instagram Testers’.

Step 2-B: After clicking the ‘Add or Remove Instagram Testers’ button you will be redirected to a different page, scroll down to the section ‘Instagram Testers’ and click the button ‘Add Instagram Testers‘.

Step 2-C: After clicking the ‘Add Instagram Testers‘ button a pop up window will open, add the username of your Instagram account and click the ‘Submit‘ button.

Step 2-D: After clicking the ‘Submit‘ button you should see your profile in the ‘Instagram Testers‘ section with a pending status. You will need to approve the invitation by logging into your Instagram account and visiting the follow link: https://www.instagram.com/accounts/manage_access/

Step 2-E: Once on the ‘Apps and Websites‘ Instagram access management page click on the tab ‘Tester Invites‘, you should see your app listed here, click on the ‘Accept‘ button. Your invite has now been accepted and added as active, if you go back to your Facebook app the ‘Pending‘ next to your username should now be removed.

Step 2-F: On the Facebook app go back to the ‘Basic Display‘ dashboard and scroll down to the ‘User Token Generator‘ section from ‘Step 2-A‘ and click the ‘Generate Token‘ button next to your profile. A window should pop up with an Instagram login, make sure you are logging into the correct account. After logging in you will be taken to a page to authorize permission to allow your app to gain access to your profile info and media, click the ‘Authorize‘ button.

Step 2-G: After clicking the ‘Authorize‘ button the window will be closed and a pop up window located on your Facebook app screen will display your generated token, click ‘I Understand‘ to display your full token.

Step 2-H: Copy your Instagram token and store it for use on the next main steps.

*Please note that your temporary Instagram token will only be valid for 2 months, after which you will need to repeat this step to obtain a new one.

Step 3: Retrieve your Instagram ID

Now that you have your Instagram token generated you can use that token to retrieve your Instagram ID by following these steps:

Step 3-A: Copy the following URL: https://graph.instagram.com/me?fields=id,username&access_token=your-instagram-token

Step 3-B: Replace ‘your-instagram-token‘ with your Instagram token generated from Step 2.

Step 3-C: Paste the URL containing your Instagram token in your web browser.

Step 3-D: Your Instagram ID should now be displayed on the web page, copy and store it for use on the next main steps.

Step 4: Setup a PHP Function to Display your Instagram Feed

Now that you have generated your Instagram token (Step 2) and retrieved your Instagram ID (Step 3) you can now setup a PHP function to display your Instagram feed. Copy the PHP code below and reference the ‘Items to Note‘ that follow for setup instructions:

PHP

function dd_instagram( $AccessToken , $feed = null ){
	$timestamp = mktime(date('H'), date('i'), 0, date('n'), date('j') - 1, date('Y'));
	$AccessToken = 'Your-Instagram-Token';
	$instagram_user_id = 'Your-Instagram-User-ID';
	$url = 'https://graph.instagram.com/'.$instagram_user_id.'/media?access_token=' . $AccessToken;
	$counter = 0;

	$ch = curl_init();

	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_HEADER, false);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
	curl_setopt($ch, CURLOPT_MAXREDIRS, 10);
	curl_setopt($ch, CURLOPT_USERAGENT, 'Instagram Gallery');

	$result = curl_exec($ch);
	$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
	curl_close($ch);

	$result = json_decode($result);
	
	foreach ($result->data as $media_id){
		$id = $media_id->id;;
		
		$counter++;
		if( $counter <= $feed ){
		
			if( $id ) {
				$url = 'https://graph.instagram.com/'.$id.'?fields=id,media_type,media_url,username,timestamp,permalink&access_token=' . $AccessToken;
				$ch = curl_init();
				curl_setopt($ch, CURLOPT_URL, $url);
				curl_setopt($ch, CURLOPT_HEADER, false);
				curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
				curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
				curl_setopt($ch, CURLOPT_MAXREDIRS, 10);
				curl_setopt($ch, CURLOPT_USERAGENT, 'Instagram Gallery');

				$result_image = curl_exec($ch);
				$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
				curl_close($ch);
				$result_image = json_decode($result_image);
				echo '<span class="instagram-image"><a href="' .$result_image->permalink. '" target="_blank"><img src="' .$result_image->media_url. '"/></a></span>';
			}
		}
	}
}

Items to Note:

• Replace ‘Your-Instagram-Token‘ with your Instagram token generated from Step 2. (Make sure you keep the outer quotes ”)
• Replace ‘Your-Instagram-ID‘ with your Instagram ID generated from Step 3. (Make sure you keep the outer quotes ”)

Step 5: Display your Instagram Feed with a PHP Function Callback

Now that your PHP function is setup properly and contains your unique Instagram token and ID you can display it anywhere on your website using the PHP function callback. Copy the PHP code below and reference the ‘Items to Note‘ that follow for setup instructions:

HTML/PHP

<div id=”instagram-feed”><?php dd_instagram('instagram',4); ?></div>

Items to Note:

• You can change the html wrapper element to anything you want, we made this as simple as possible by using a div with the id ‘instagram-feed‘ which will be used as a reference for the CSS in the next and final main step. Please note that if you end up changing this structure you will need to update the CSS as well.
• You can change the number of images that display by editing the number ‘4‘. If you change this number then you will need to update the CSS as well depending on how many images you want to display on a row. (See Step 6)
• Please remember that this code is meant to be a basic guideline, you may need to modify it in order to suit your particular needs.

Step 6: Style your Instagram Feed with CSS

Now that you have your Instagram feed displaying on your webpage you will need to use CSS to style its appearance. Copy the CSS code below and reference the ‘Items to Note‘ that follow for setup instructions:

CSS

#instagram-feed{ 
  width: 100%; 
  max-width: 600px; 
  float: left; 
}
#instagram-feed .instagram-image{ 
  width: 25%; 
  float: left;
  padding: 5px;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}
#instagram-feed .instagram-image img{ 
  display: none; 
}
#instagram-feed .instagram-image a{ 
  display: block; 
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover; 
}
#instagram-feed .instagram-image a::before{ 
  content: ''; 
  display: block; 
  padding-top: 100%; 
}

Items to Note:

• On Line 3 you can edit or remove the ‘max-width‘ of 600px set on the main div element (#instagram-feed).
• If you adjusted the number of images that display on Step 5, then you will need to update the width of the Instagram image element (.instagram-image) on Line 7.
• If you want to control how many Instagram image elements (.instagram-image) display on a single row you can edit the width on Line 7. Example: If you want to display 4 Instagram images but only show 2 on each row, then you would change the width to 50%.
• On Line 9 you can control how much spacing is around each Instagram image element (.instagram-image) by editing the padding.
• Please remember that this code is meant to be a basic guideline, you may need to modify it in order to suit your particular needs.

Please Note: Temporary Solution with Limitations

Please note that this method may be subject to change at any moment and that with any third party applications we are at the mercy of the controlling party. This method contains a temporary method for obtaining an Instagram token, at the time of writing this tutorial we are still awaiting our Facebook app approval so we cannot give instructions beyond this point yet. Until approval your Facebook app also has an application rate limit, please read the official Facebook statement regarding the limitations:

Rate limiting defines limits on how many API calls can be made within a specified time period. Application-level rate limits apply to calls made using any access token other than a Page access token and ads APIs calls. The total number of calls your app can make per hour is 200 times the number of users. Please note this isn’t a per-user limit. Any individual user can make more than 200 calls per hour, as long as the total for all users does not exceed the app maximum.

Learn more here: https://developers.facebook.com/docs/graph-api/overview/rate-limiting#application-level-rate-limiting

Demo

Visit our homepage to see our new Instagram feed in action. | VIEW DEMO

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. Please do not email us with problems regarding this tutorial unless you want to hire us.

Hire Us

If you are unfamiliar with web development and need help displaying or fixing your Instagram feed we are available for hire. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote

The post The new way to add an Instagram Feed to your Website after Endpoint Retirement in 2020 first appeared on Daddy Design.

Remove the Custom Post Type Slug from the Permalink(URL) Structure using WordPress PHP Functions

In order to remove the custom post type slug from the permalink structure you will need to add the following PHP to the WordPress functions file. Simply open your functions.php file, copy and paste the code below then follow the steps below to edit for your specific custom post type.

PHP

 function dd_remove_posttype_slug( $post_link, $post, $leavename ) {
     if ( ! in_array( $post->post_type, array( 'your-post-type' ) ) || 'publish' != $post->post_status )
         return $post_link;
     $post_link = str_replace( '/your-post-type-slug/', '/', $post_link );
         return $post_link;
 }
 add_filter( 'post_type_link', 'dd_remove_posttype_slug', 10, 3 );
 function dd_parse_request_posttype( $query ) {
     if ( ! $query->is_main_query() )
         return;
     if ( 2 != count( $query->query )
         || ! isset( $query->query['page'] ) )
         return;
     if ( ! empty( $query->query['name'] ) )
         $query->set( 'post_type', array( 'post', 'page', 'your-post-type' ) );
 }
 add_action( 'pre_get_posts', 'dd_parse_request_posttype' ); 

1. Replace ‘your-post-type’ on line 2 and line 15 with your actual custom post type.
2. Replace ‘your-post-type-slug’ on line 4 with the slug for your actual custom post type.
3. Upload your functions.php file to your server.
4. Refresh your permalink settings in the WordPress dashboard.

How to Remove the Slug from the Permalink Structure of Multiple Custom Post Types using WordPress PHP Functions

In order to remove the slug from the permalink structure of multiple custom post types you will use the same code above but with slight modifications. Simply open your functions.php file, then copy and paste the code below and follow the steps below to edit for your specific custom post types.

PHP

 function dd_remove_posttype_slug( $post_link, $post, $leavename ) {
     if ( ! in_array( $post->post_type, array( 'your-post-type1', 'your-post-type2' ) ) || 'publish' != $post->post_status )
         return $post_link;
     $post_link = str_replace( '/your-post-type-slug1/', '/', $post_link );
     $post_link = str_replace( '/your-post-type-slug2/', '/', $post_link );
     return $post_link;
 }
 add_filter( 'post_type_link', 'dd_remove_posttype_slug', 10, 3 );
 function dd_parse_request_posttype( $query ) {
     if ( ! $query->is_main_query() )
         return;
     if ( 2 != count( $query->query )
         || ! isset( $query->query['page'] ) )
         return;
     if ( ! empty( $query->query['name'] ) )
         $query->set( 'post_type', array( 'post', 'page', 'your-post-type1', ’your-post-type2' ) );
 }
 add_action( 'pre_get_posts', 'dd_parse_request_posttype' );  

1. Replace ‘your-post-type1’ and ‘your-post-type2’ on line 2 and line 16 with your actual custom post types.
2. Replace ‘your-post-type-slug1’ on line 4 and ‘your-post-type-slug2’ on line 5 with the slugs for your actual custom post types.
3. Upload your functions.php file to your server.
4. Refresh your permalink settings in the WordPress dashboard.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. Please do not email us with problems regarding this tutorial unless you want to hire us.

The post How to Remove the Custom Post Type Slug from the Permalink(URL) Structure in WordPress first appeared on Daddy Design.

HIGHLIGHTS

100% Soft and Breathable, Constructed of 2 plys of protection (Non Medical Grade), Outer Shell layer polyester fabric/ Inside Middle Layer of Cotton fabric/ Face Side Extra soft Polyester fabric.

• Stretch Material forms to the users face and allows for a comfortable fit
• Trim Available in Black only
• Production time approximately 10 to 15 days
• After 6 internal prototypes we have come out with a real winner that we want to proceed in making for our clients.

Please place your order soon as the quality and comfort of these masks are much better than what is out in the marketplace and we are expecting longer lead times after this initial launch.

CUSTOM FACE MASK SAMPLES

PRICES

Custom Fully Dye Sublimated (unlimited colors)

ORDER YOUR MASK TODAY!

Please fill out form below and send artwork to daddydesign@gmail.com, we will follow up with a Virtual mock up and Invoice accordingly. We will not any extend terms on Mask orders.

These are Non Medical Grade Masks not rated by NIOSH or OSHA, Do not use for gases or vapors, This face mask does not remove all the risks of contracting disease or infections. We make no respresenation within and are not responsible for performance of them for that cause.

The post Custom Reusable & Washable Protective Mask first appeared on Daddy Design.

Our New Premium WordPress Theme Packages

After speaking with many of our clients about their project needs we were able to gather real world feedback which we then used to develop 3 Premium WordPress Theme Packages:

• Standard WordPress Theme Package
• Super WordPress Theme Package
• Deluxe WordPress Theme Package

These WordPress packages are geared at making the entire process from start to finish much easier and less stressful which will help you get your website up and running as fast as possible. While we spent a lot of time researching these packages we do understand that they may require modifications over time and they will be constantly evolving. If after reviewing our packages you feel that your project needs still don’t align with any of them please contact us to speak with one of our representatives so that we can help determine the best approach for your specific WordPress development project.

You can now visit our new Premium WordPress Themes page to learn more about this exciting new service and find out if it’s the right option for your WordPress project.

We are here to help!

If you have any questions or simply just want to get your WordPress project started please use our contact form or give us a call at 407-227-9377.

The post NEW SERVICE: Introducing Premium WordPress Themes! first appeared on Daddy Design.

Method 1: Use the oEmbed feature built into WordPress

You can easily embed an image or video from Instagram on your WordPress site by using the built-in oEmbed feature. First, copy the Instagram image’s URL from the web browser’s address bar which looks like this example:

https://www.instagram.com/p/B4C1Ga1j_zt

Then simply paste the URL on its own line in the WordPress Visual Editor making sure that it’s not hyperlinked. After saving the changes your WordPress post should now contain the embedded Instagram content.

Please Note: This method by default will display the largest Instagram image size available, which is 612 pixels wide. If you want more control over the image size then you will want to use Method 2 below.

Method 2: Use the WordPress embed shortcode

If you want more control over the embedded image size then you will need to use the WordPress embed shortcode to display your Instagram content. First, copy the Instagram image’s URL from the web browser’s address bar which looks like this example:

https://www.instagram.com/p/B4C1Ga1j_zt

Then simply paste the URL on its own line in the WordPress Visual Editor making sure that it’s not hyperlinked and wrap it in the embed shortcode which looks like this example:

[ embed width="320"]https://www.instagram.com/p/B4C1Ga1j_zt[/embed]

Please Note: Remove the space between ‘[‘ and ’embed’

We used 320 pixels for this example but you can adjust the width to any size you want below 612 pixels. After saving the changes your WordPress post should now contain the embedded Instagram content displayed at your desired width.

Embedded Example

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to properly embed an Instagram image or video on a WordPress site first appeared on Daddy Design.

Automatically link Twitter usernames to their profile via a WordPress Function

In order to automatically link Twitter usernames to their profile in WordPress, we will add the following PHP filters to the WordPress functions file. Simply open your functions.php file, then copy and paste the code below. After uploading your updated functions.php file all of your Twitter @ mentions added inside of the content editor will now link to their corresponding Twitter profile.

PHP

function twitter_name_replace($content) {
$twitter_name_replace = preg_replace('/([^a-zA-Z0-9-_&])@([0-9a-zA-Z_]+)/',"$1<a href=\"http://twitter.com/$2\" target=\"_blank\" rel=\"nofollow\">@$2</a>",$content);
    return $twitter_name_replace;
}
add_filter('the_content', 'twitter_name_replace');
add_filter('comment_text', 'twitter_name_replace');

Example

@daddydesign

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to automatically link Twitter usernames to their profile in WordPress first appeared on Daddy Design.

Limit the automatic WordPress empty trash feature by editing the wp-config.php file

In order to limit the automatic WordPress empty trash feature you will need to edit the wp-config.php file located in your WordPress site’s root folder. Download and open the wp-config.php file, copy and paste the code below just before the line that says ‘That’s all, stop editing! Happy blogging.’ After you save your changes and upload the wp-config.php file back to your server WordPress will now automatically empty the trash every 5 days, you can change this number to any number of days that you want.

PHP

define('EMPTY_TRASH_DAYS', 5 );

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to limit the automatic WordPress empty trash feature in order to reduce the size of your database first appeared on Daddy Design.

Increase the PHP memory limit in WordPress by editing the wp-config.php file

In order to increase the PHP memory limit you will need to edit the wp-config.php file located in your WordPress site’s root folder. Download and open the wp-config.php file, copy and paste the code below just before the line that says ‘That’s all, stop editing! Happy blogging.’ After you save your changes and upload the wp-config.php file back to your server the WordPress memory limit should now be increased to 256mb instead of the default 64mb.

PHP

define( 'WP_MEMORY_LIMIT', '256M' );

Please Note: If this solution does not work, you may need to contact your web hosting service provider to have them manually increase your PHP memory limit.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to fix the Memory Exhausted Error in WordPress by increasing the PHP memory limit first appeared on Daddy Design.

Completely remove the WordPress version number using PHP functions

In order to completely remove the WordPress version number, we will add the following PHP to the WordPress functions file. Simply open your functions.php file, then copy and paste the code below. Your WordPress version number will now be completely removed from displaying in your head file, RSS feeds, scripts, and styles.

PHP

// remove wp version from head
remove_action('wp_head', 'wp_generator');

// remove wp version from rss feeds
add_filter('the_generator', '__return_empty_string');

// remove wp version from scripts and styles
function dd_remove_version_scripts_styles($src) {
 if (strpos($src, 'ver=')) {
  $src = remove_query_arg('ver', $src);
 }
 return $src;
}
add_filter('style_loader_src', 'dd_remove_version_scripts_styles', 9999);
add_filter('script_loader_src', 'dd_remove_version_scripts_styles', 9999);

Please Note: It is still recommended that you update WordPress to the latest version because that is the only guaranteed way to keep your site protected. Do not rely solely on this method to keep you 100% secure.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to completely remove the WordPress version number from displaying to improve security first appeared on Daddy Design.

Stop WordPress from compressing JPG files by using 2 PHP filters

In order to stop WordPress from compressing JPG files, we will add the following 2 PHP filters to the WordPress functions file. Simply open your functions.php file, then copy and paste the code below.

PHP

add_filter('jpeg_quality', function($arg){return 100;});
add_filter( 'wp_editor_set_quality', function($arg){return 100;});

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to stop WordPress from compressing JPG image files without using a plugin first appeared on Daddy Design.

STEP 1: Create and save your SVG logo file

In Step 1, you will need to create and save your SVG logo file; this can be done using Adobe Illustrator. If you need help with this step, please reference the Adobe help link below:

Adobe Illustrator Help (Export SVG)

STEP 2: Create an HTML element for the logo

In Step 2, we will be creating an HTML element for the logo. We prefer to utilize the H1 tag for SEO purposes, but please note you can utilize any HTML element you want for this method. Another standard practice of ours is to link the logo to the homepage, if you choose not to link your logo you will need to modify the method below.

HTML

<h1 id="logo"><a href="YOUR-WEBSITE-LINK">YOUR-WEBSITE-TITLE</a></h1>

Items to Note:

Any HTML element can be utilized.
You can use either a CSS ID or CLASS on the logo element.
Any HTML element can be utilized.
You don’t have to link your logo but you will need to modify the code if you choose not to.
Change ‘YOUR-WEBSITE-LINK’ to your website’s homepage URL.
Change ‘YOUR-WEBSITE-TITLE’ to your website’s title or company name.

STEP 3: Use CSS3 to style and add the SVG file as a background to the logo element

In the final step we will use CSS to style and add the SVG file as a background to the logo element we created in Step 2.

CSS

h1#logo{
width: YOUR-LOGO-WIDTH;
height: YOUR-LOGO-HEIGHT;
float: left;
padding: 0;
margin: 0;
text-indent: -9000px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1#logo a{
width: 100%;
height: 100%;
display: block;
background: url(YOUR-SVG-FILE-URL) no-repeat center;
}

Items to Note:

Make sure that you are referencing the same CSS ID or CLASS placed on your HTML element.
Change ‘YOUR-LOGO-WIDTH’ to your logo’s width.
Change ‘YOUR-LOGO-HEIGHT’ to your logo’s height.
Change ‘YOUR-SVG-FILE-URL’ to the URL path where your logo SVG file is located.
You can adjust padding and margin as necessary but keep in mind padding will affect the overall size of the logo.
Setting ‘text-indent’ to -9000px will hide the text placed inside our HTML logo element.
Using ‘box-sizing’ helps to control overall sizing, if you do not know about ‘box-sizing’ we suggest that you look it up since it is very helpful with regards to responsive design.

Full Code

HTML

<h1 id="logo"><a href="YOUR-WEBSITE-LINK">YOUR-WEBSITE-TITLE</a></h1>

CSS
h1#logo{
width: YOUR-LOGO-WIDTH;
height: YOUR-LOGO-HEIGHT;
float: left;
padding: 0;
margin: 0;
text-indent: -9000px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1#logo a{
width: 100%;
height: 100%;
display: block;
background: url(YOUR-SVG-FILE-URL) no-repeat center;
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to add a Vector Logo to your Website using CSS3 and a Scalable Vector Graphic (SVG) first appeared on Daddy Design.

Redirect the Archive of a Custom Post Type using a WordPress Function

In order to redirect the Archive of a Custom Post Type in WordPress, we will need to add a PHP filter to the WordPress functions file. Open your functions.php file then copy and paste the code below, you will need to reference the ‘Items to Note’ below in order to adjust the code to work with your specific Custom Post Type and desired redirect.

PHP

function redirect_cpt_archive() {
    if( is_post_type_archive( 'YOUR-CUSTOM-POST-TYPE' ) ) {
        wp_redirect( home_url( 'YOUR-TRAILING-SLUG' ), 301 );
        exit();
    }
}
add_action( 'template_redirect', 'redirect_cpt_archive' );

Items to Note:

Change ‘YOUR-CUSTOM-POST-TYPE’ to the name of the Custom Post Type you would like to have redirected.
home_url()will automatically insert the home URL and only the trailing slug will be needed for ‘YOUR-TRAILING-SLUG’.
Change ‘YOUR- TRAILING-SLUG’ to the trailing slug you would like your Custom Post Type’s Archive to redirect to.
If you want to redirect to an external URL just replace home_url()with your desired URL inside of quotes; example: wp_redirect( ‘http://www.yoursite.com’, 301 );
If you followed the instructions correctly the Archive of your Custom Post Type will now be redirected to your desired location.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to redirect the Archive of a Custom Post Type in WordPress first appeared on Daddy Design.

Utilize WordPress Contact Form 7’s Custom DOM Event to run JavaScript

The simplest way to redirect a visitor that’s filled out a successful WordPress Contact Form 7 submission to another URL is by utilizing the custom DOM event to run JavaScript. The following methods will redirect when the ‘wpcf7mailsent’ event occurs:

Method 1: Global redirect via WordPress functions

This option will utilize a WordPress function which automatically adds the JavaScript into your WordPress footer. However, please note that this option will redirect all of your forms to the same URL. Simply open your functions.php file then copy and paste the code below, please refer to the ‘Items to Note’ below for detailed setup instructions.

PHP

function add_this_script_footer(){ ?<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'YOUR REDIRECT URL HERE';
}, false );
</script>
<?php }
add_action('wp_footer', 'add_this_script_footer');

Items to Note:

• Make sure that you change where it says ‘YOUR REDIRECT URL HERE’ to a URL of your choice.

Method 2: Global redirect added directly to the WordPress footer.php file

With this option you can simply add the JavaScript directly into your WordPress footer.php file in case you don’t feel comfortable editing the WordPress functions. However, please note that this option will also only redirect all of your forms to the same URL. Simply open your footer.php file then copy and paste the code below, please refer to the ‘Items to Note’ below for detailed setup instructions.

JavaScript

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'YOUR REDIRECT URL HERE';
}, false );
</script>

Items to Note:

• Make sure that you change where it says ‘YOUR REDIRECT URL HERE’ to a URL of your choice.
• Paste the code before the following tags; ‘wp_footer()’, ‘/body’, and ‘/html’

Method 3: Redirect form on a specific page added directly to the WordPress footer.php file

With this option you can redirect a form on a specific page by adding the JavaScript along with some PHP if statements directly into your WordPress footer.php file. Simply open your footer.php file then copy and paste the code below, please refer to the ‘Items to Note’ below for detailed setup instructions.

PHP & JavaScript

<?php if ( is_page('YOUR PAGE ID HERE')) { ?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'YOUR REDIRECT URL HERE';
}, false );
</script>
<?php } ?>

Items to Note:

• Make sure that you change where it says ‘YOUR PAGE ID HERE’ to the WordPress Page ID where your form is located.
• Make sure that you change where it says ‘YOUR REDIRECT URL HERE’ to a URL of your choice.
• Paste the code before the following tags; ‘wp_footer()’, ‘/body>, and ‘/html’

Method 4: Multiple redirects added directly to the WordPress footer.php file

With this option you can redirect multiple forms to different URL’s on different pages by adding the JavaScript along with some PHP if else statements directly into your WordPress footer.php file. Simply open your footer.php file then copy and paste the code below, please refer to the ‘Items to Note’ below for detailed setup instructions.

PHP & JavaScript

<php if ( is_page('YOUR PAGE ID HERE')) { >
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'YOUR REDIRECT URL HERE';
}, false );
</script>
<php } else if ( is_page('YOUR OTHER PAGE ID HERE')) { ?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'YOUR OTHER REDIRECT URL HERE';
}, false );
</script>
<?php } >

Items to Note:

• Make sure that you change where it says ‘YOUR PAGE ID HERE’ to the WordPress Page ID where your form is located.
• Make sure that you change where it says ‘YOUR REDIRECT URL HERE’ to a URL of your choice.
• Make sure that you change where it says ‘YOUR OTHER PAGE ID HERE’ to the WordPress Page ID where your other form is located.
• Make sure that you change where it says ‘YOUR OTHER REDIRECT URL HERE’ to a URL of your choice.
• Repeat the PHP else if statement to add additional redirects on additional pages.
• Paste the code before the following tags; ‘wp_footer()’, ‘/body’, and ‘/html’

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to redirect to another URL after WordPress Contact Form 7 Submission without using the ‘on_sent_ok’ hook method first appeared on Daddy Design.

Step 5: Create the HTML Structure for your Navigation after the Hamburger Button

Since we already created the HTML element for our navigation hamburger button we will now need to set up the basic HTML structure for the navigation element after it.

HTML

<nav id="nav" class="toggle">
Navigation UL Here
</nav>

Items to Note:

• Take note of the CSS class ‘toggle’ added to the navigation HTML element; it will be referenced throughout this tutorial.
• The purpose of this tutorial is only to teach you how to show and hide the elements, you will need to style and structure your actual navigation. Use the ID ‘nav’ to style your element with CSS and not the class ‘toggle’.

Step 6: Add the ‘toggle’ class and update the Hamburger Button CSS

In the next step we will reference the class ‘toggle’ used on the navigation element in Step 5 and style it with CSS. We will also need to update the ‘#nav_btn’ CSS in order to hide it until it is needed for responsive purposes.

CSS

.toggle{ display: block; }
#nav_btn{ display: none; }

Items to Note:

• Make sure that you are referencing the same CSS class placed on your HTML navigation element.
• Add the ‘toggle’ style before our CSS from Part 1.
• #nav_btn is updated from ‘display: block’ to ‘display: none’ in the CSS from Part 1 Step 2, it is not new CSS but a readjustment.
• When styling the navigation element ‘nav’, do not use ‘display: block’ on it as this will not enable the class ‘toggle’ to work properly with the Media Queries.

Step 7: Use Media Queries to hide the navigation element and show the navigation button when the responsive calls for it

Now that we have the navigation element showing and our navigation button hidden, it’s time to reverse this when the responsive calls for it due to screen dimensions using CSS Media Queries.

CSS

@media only screen and (max-width: 680px){
.toggle{ display: none; }
#nav_btn{ display: block; }
}

Items to Note:

• Add this after your main CSS or in a separate stylesheet.
• The screen width at which point the CSS changes is ‘680px’, adjust this to your desired width.
• We are reversing ‘display: none’ and ‘display: block’ on the elements ‘toggle’ and ‘nav_btn’.
• Resize your screen, once you hit 680px in width, the navigation element should disappear and the navigation button should now be showing.
• Clicking the navigation button will not do anything until the next and final step is complete.

Step 8: Use jQuery to enable the navigation button to toggle the navigation element open and close

In the final step of this tutorial we will now replace the jQuery from Part 1 with the new function below; this will now enable the navigation button to toggle the navigation element open and close by using the classes ‘toggle’ and ‘active’.

jQuery

$(document).ready(function() {
	$('#nav_btn').click(function(e) {
		if($('#nav').is(':hidden') == true) {
			$(this).toggleClass("active");
			$('#nav').removeClass("toggle");
		} else {
			$(this).removeClass("active");
			$('#nav').addClass("toggle");
		}
		e.preventDefault();
	});
});

Items to Note:

• Make sure that you are referencing the same ID and class placed on your HTML elements.
• This step relies on the jQuery JavaScript library in order to function; you should already have jQuery enabled from Part 1, if not you must either link directly to jQuery or download the latest version and upload it to your server.
• Make sure you replace the jQuery from Part 1 with this updated code.

Download jQuery

You can download the latest version of jQuery below:

Download jQuery

Full Code

HTML

<nav id="nav" class="toggle">
Navigation UL Here
</nav>

CSS

.toggle{ display: block; }
#nav_btn{
display: none;
float: right;
padding: 20px;
cursor: pointer;
}
#nav_btn span, #nav_btn span::before, #nav_btn span::after{
width: 28px;
height: 4px;
float: left;
display: block;
background: #000;
position: relative;
text-indent: -9000px;
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
#nav_btn span{ margin: 8px 0; }
#nav_btn span::before, #nav_btn span::after{
content: '';
position: absolute;
}
#nav_btn span::before{ top: -8px; }
#nav_btn span::after{ bottom: -8px; }
#nav_btn.active span{ background-color: transparent; }
#nav_btn.active span::before, #nav_btn.active span::after{ top: 0; }
#nav_btn.active span:before{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#nav_btn.active span::after{
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
top: 10px;
}
@media only screen and (max-width: 680px){
.toggle{ display: none; }
#nav_btn{ display: block; }
}

jQuery

$(document).ready(function() {
	$('#nav_btn').click(function(e) {
		if($('#nav').is(':hidden') == true) {
			$(this).toggleClass("active");
			$('#nav').removeClass("toggle");
		} else {
			$(this).removeClass("active");
			$('#nav').addClass("toggle");
		}
		e.preventDefault();
	});
});

LIVE DEMO

In order to test the live demo you will need to resize your screen.

View Demo

This is PART 2 of a two-part tutorial, if you missed PART 1 please click on the button below to get started:

In Part 1 of this two-part tutorial we will teach you how to create an animated hamburger button with CSS and jQuery for your responsive website.

View Part 1

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post Part 2: How to Show and Hide your Navigation using Media Queries and jQuery for your Responsive Website first appeared on Daddy Design.

Step 1: Create the HTML Structure for your Hamburger Button

In the first step we will set up the main HTML structure for the navigation button otherwise known as a hamburger button.

HTML

<a id="nav_btn"><span>Toggle Menu</span></a>

Items to Note:

• Take note of the CSS ID ‘nav_btn’ added to the HTML element, it will be referenced throughout this tutorial.
• Any call to action text (Toggle Menu) can be used, just note that it will be hidden and not actually visible.
• Any HTML element can be utilized.

Step 2: Use Pure CSS to Style your Hamburger Button

In the next step we will reference the ID used on the hamburger button in Step 1 and style it with CSS.

CSS

#nav_btn{
display: block;
float: right;
padding: 20px;
cursor: pointer;
}
#nav_btn span, #nav_btn span::before, #nav_btn span::after{
width: 28px;
height: 4px;
float: left;
display: block;
background: #000;
position: relative;
text-indent: -9000px;
}
#nav_btn span{ margin: 8px 0; }
#nav_btn span::before, #nav_btn span::after{
content: '';
position: absolute;
}
#nav_btn span::before{ top: -8px; }
#nav_btn span::after{ bottom: -8px; }

Items to Note:

• Make sure that you are referencing the same ID placed on your HTML element.
• Adjust the padding on #nav_btn if necessary.
• We feel that we have developed a pretty standard size for the button but if you need to change the height, you will then also need to adjust the margin as well as the positioning for the span tags.
• Adjust the background color to adapt to your website’s design.

Step 3: Set up the CSS Transitions for your Hamburger Button Animations

Now that we have the core HTML structure and CSS styling complete for our navigation button, we will now need to add the CSS transitions that will be used along with jQuery (next step) to power the animation. The animation that we are applying to our hamburger button will transform it into an X when clicked on and then back to the hamburger button when clicked again.

CSS

#nav_btn span, #nav_btn span:before, #nav_btn span:after{
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
#nav_btn.active span{ background-color: transparent; }
#nav_btn.active span::before, #nav_btn.active span::after{ top: 0; }
#nav_btn.active span:before{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#nav_btn.active span::after{
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
top: 10px;
}

Items to Note:

• Make sure that you are referencing the same ID placed on your HTML element.
• The first block of CSS can be added to the already pre-existing CSS. (Reference the complete code at the end of the tutorial.)
• Do not adjust anything in the code for this step.
• Nothing will animate yet until Step 4 is completed.

Step 4: Use jQuery to trigger the CSS Animations for your Hamburger Button

The final step in this tutorial is brining your CSS animations to life by using a simple jQuery click function to toggle the ‘active’ class on and off.

jQuery

$(document).ready(function() {
	$('#nav_btn').click(function(e) {
		$(this).toggleClass("active");
		e.preventDefault();
	});
});

Items to Note:

• Make sure that you are referencing the same ID placed on your HTML element.
• This step relies on the jQuery JavaScript library in order to function; you must either link directly to jQuery or download the latest version and upload it to your server.
• This jQuery is temporary and only being used to actually trigger the CSS animations; it will be updated in Part 2 of this tutorial series.

Download jQuery

You can download the latest version of jQuery below:

Download jQuery

Full Code

HTML

<id="nav_btn"><span>Toggle Menu</span></a>

CSS

#nav_btn{
display: block;
float: right;
padding: 20px;
cursor: pointer;
}
#nav_btn span, #nav_btn span::before, #nav_btn span::after{
width: 28px;
height: 4px;
float: left;
display: block;
background: #000;
position: relative;
text-indent: -9000px;
}
#nav_btn span{ margin: 8px 0; }
#nav_btn span::before, #nav_btn span::after{
content: '';
position: absolute;
}
#nav_btn span::before{ top: -8px; }
#nav_btn span::after{ bottom: -8px; }
#nav_btn span, #nav_btn span:before, #nav_btn span:after{
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
#nav_btn.active span{ background-color: transparent; }
#nav_btn.active span::before, #nav_btn.active span::after{ top: 0; }
#nav_btn.active span:before{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#nav_btn.active span::after{
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
top: 10px;
}

jQuery

$(document).ready(function() {
	$('#nav_btn').click(function(e) {
		$(this).toggleClass("active");
		e.preventDefault();
	});
});

LIVE DEMO

View Demo

PART 2: How to Show and Hide your Navigation using Media Queries and jQuery for your Responsive Website

In part 2 of this tutorial we will teach you how to show and hide your newly designed pure CSS hamburger button and navigation using Media Queries and jQuery for your responsive website.

Coming Soon

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post Part 1: How to create an Animated Hamburger Button with CSS and jQuery for your Responsive Website first appeared on Daddy Design.

Use PHP to display the custom fields for your custom post type in the WordPress theme template file

In order to display your custom fields on your actual WordPress site you will need to use PHP to access the global variable and retrieve them from the database. Open the archive theme template for your custom post type (ex. archive-YOUR-CUSTOM-POST-TYPE.php). Use the PHP code below as a base example for how to display your custom field, please refer to the ‘Items to Note’ below for detailed setup instructions.

PHP

<?php $YOUR-CUSTOM-FIELD = get_field('YOUR-CUSTOM-FIELD', 'option'); if ($YOUR-CUSTOM-FIELD) { echo $ YOUR-CUSTOM-FIELD; } ?>

Items to Note:

Make sure that you change where it says ‘YOUR-CUSTOM-FIELD’ to match the custom field name you used in the backend.
Please keep in mind that this is a basic example of how to output the custom field variable and you may need to modify it to suit your needs.

This is PART 2 of a two-part WordPress tutorial, if you missed PART 1 please click on the button below to get started:

In part 1 of this two-part tutorial we are going to teach you how to add custom fields to a custom post type using the Advanced Custom Fields (ACF) WordPress plugin and a PHP function.

View Part 1

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post PART 2: How to Display the Advanced Custom Fields (ACF) for your Custom Post Type in the WordPress Theme Template File first appeared on Daddy Design.

Step 1: Setup and Attach the Advanced Custom Fields (ACF) Options Page to a Custom Post Type via a PHP Function

In order to add an Advanced Custom Fields (ACF) Options Page to your custom post type in the WordPress dashboard we will need to add a PHP filter to the WordPress functions file. Simply open your functions.php file then copy and paste the code below, please refer to the ‘Items to Note’ below for detailed setup instructions.

PHP

if( function_exists('acf_add_options_page') ) {
	acf_add_options_sub_page(array(
		'page_title' 	=> 'YOUR-PAGE-TITLE',
		'menu_title'	=> 'YOUR-MENU-TITLE',
		'menu_slug' 	=> 'site-options-YOUR-SLUG',
		'capability'	=> 'edit_posts',
		'parent_slug'	=> 'edit.php?post_type=YOUR-CUSTOM-POST-TYPE',
	));
}

Items to Note:

Make sure that you change where it says ‘YOUR-PAGE-TITLE’ to a custom page title of your choice.
Make sure that you change where it says ‘YOUR-MENU-TITLE’ to a custom menu title of your choice.
Make sure that you change where it says ‘YOUR-SLUG’ to a custom slug of your choice.
Make sure that you change where it says ‘YOUR-CUSTOM-POST-TYPE’ to the custom post type that you want to add your custom fields option page to.

Step 2: Create the Advanced Custom Fields (ACF) Field Group in the WordPress Dashboard to attach to your Custom Post Type’s Options Page

After creating your ACF Options Page for your Custom Post Type in Step 1, the next step is to create the Field Group with the ACF Plugin settings panel in the WordPress Dashboard and then attach it to your Post Type’s Options Page. Follow the step by step instructions below:

1. Log in to the dashboard of your WordPress site
2. Go to Custom Fields -> Add New
3. Title your Field Group
4. Add your desired custom fields
5. Go to the Locations panel -> Show this field group if -> Select ‘Options Page’ -> Select ‘is equal to’ -> Select your options page
6. Publish

After completing the above steps your newly create ACF Field Group should now be attached to your Custom Post Type’s Options Page.

PART 2: How to Display the Advanced Custom Fields (ACF) for your Custom Post Type in the WordPress Theme Template File

In part 2 of this tutorial we will teach you how to display the custom fields you created for your Custom Post Type in your WordPress theme template file using PHP.

View Part 2

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post Part 1: How to add Custom Fields to a Custom Post Type using the Advanced Custom Fields (ACF) WordPress Plugin first appeared on Daddy Design.

Step 1: Create an HTML element for your text

In Step 1, we will be creating an HTML element to place our text inside. For purposes of this tutorial we are utilizing a span tag, but please note you can utilize any HTML element you want for this method.

HTML

 <span class="word_break">Loremipsumdolorsitametchoroinsolensconceptamvimc</span>

Items to Note:

• Take note of the CSS class ‘word_break added to the HTML element, it will be referenced in the next and final step.
• Any HTML element can be used.

Step 2: Use the CSS word-break property to break your overflowing text responsively

In the final step we will utilize CSS to make our span tag responsive while at the same time breaking any text strings that are too long and overflow the container element.

CSS

.word_break{
display: block;
max-width: 220px;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
}

Items to Note:

• Make sure that you are referencing the same CSS class placed on your HTML element.
• Max-width can be adjusted to any width necessary or removed if the element is already inside of another responsive element.
• The 3 different word-break CSS properties ensure that it is cross browser compatible.

Full Code

HTML

 <span class="word_break">Loremipsumdolorsitametchoroinsolensconceptamvimc</span>

CSS

.word_break{
display: block;
max-width: 220px;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to use CSS word-break to Responsively Break Overflowing Text Strings first appeared on Daddy Design.

Step 1: Create an HTML Element for your Truncated Text

In Step 1, we will be creating an HTML element to place the text we want to truncate inside of. For purposes of this tutorial we will be using a span tag. Please note that you can use any HTML element you want for this method.

HTML

<span class="truncate">Lorem ipsum dolor sit amet, choro insolens conceptam vim cu</span>

Items to Note:

Take note of the CSS class ‘truncate’ added to the HTML element, it will be referenced in the next and final step.
Any HTML element can be used.

Step 2: Use CSS to Truncate your Text Responsively while also adding Ellipsis at the End

In the final step we will use CSS to make our span tag responsive while at the same time truncating the text with ellipsis at the end of it.

CSS

.truncate{
display: block;
max-width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Items to Note:

Make sure that you are referencing the same CSS class placed on your HTML element.
Max-width can be adjusted to any width necessary or removed if the element is already inside of another responsive element.
White-space set to ‘nowrap’ and overflow set to ‘hidden’ ensures that your text remains on one line.
Text-overflow set to ‘ellipsis’ will display the ellipsis at the end of your truncated text string.

Full Code

HTML

<span class="truncate">Lorem ipsum dolor sit amet, choro insolens conceptam vim cu</span>

CSS
.truncate{
display: block;
max-width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to use CSS to Responsively Truncate Text Strings with Ellipsis first appeared on Daddy Design.

Step 1: Coding and Styling the Main Section

In the first step of this tutorial we will code and style the main section.

HTML5

<section class="section_8bit">
</section>

CSS3

.section_8bit{
width: 100%;
float: left;
border-left: 10px solid #FF6600;
border-right: 10px solid #FF6600;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Items to Note:

• We are using the HTML5 structural ‘section’ element; depending on your layout you might feel the need to change this. (ex. ‘article’, ‘header’, ‘div’, etc)
• We used a width of 100% for responsive purposes, you can adjust the width to a fixed width or add a max-width if necessary.
• We used ‘float’ but depending on your layout ‘block’ or ‘inline-block’ might work better.
• Edit the hex values #FF6600 to change the border colors.
• Position ‘relative’ is important for the positioning of the 8-bit corner effects.
• We added CSS3 ‘box-sizing’ to allow for responsiveness.

Step 2: Coding and Styling the Inner Wrapper Content DIV

In the next step of this tutorial we will code and style the inner wrapper content DIV.

HTML5

<section class="section_8bit">
  <div class="wrapper">
    Content Goes Here
 </div>
</section>

CSS3

.section_8bit .wrapper{
display: block;
color: #FF6600;
padding: 40px;
margin: -10px 0;
border-top: 10px solid #FF6600;
border-bottom: 10px solid #FF6600;
}

Items to Note:

• Edit the hex values #FF6600 to change the text and border colors.
• Adjust the ‘padding’ if necessary.
• A negative top and bottom margin have been set to offset the borders to help create the 8-bit style effect.

Step 3: Using CSS3 Pseudo Classes to Finish the 8-Bit Corner Effect

In the final step of this tutorial we will use CSS3 pseudo classes to finish the 8-bit corner effect. We will be using a total of four pseudo classes in order to create each of the corners. Since there are only two pseudo classes available per element (::before and ::after), we will apply the top two corners to the main section and the bottom two corners to the inner wrapper DIV.

CSS3

.section_8bit::before,
.section_8bit::after,
.section_8bit .wrapper::before,
.section_8bit .wrapper::after{
content: '';
width: 10px;
height: 10px;
display: block;
position: absolute;
background: #FF6600;
}
.section_8bit::before{ top: -5px; left: -5px; }
.section_8bit::after{ top: -5px; right: -5px; }
.section_8bit .wrapper::before{ bottom: -5px; left: -5px; }
.section_8bit .wrapper::after{ bottom: -5px; right: -5px; }

Items to Note:

• Since the border thickness we used on the previous steps are 10 pixels, we need the corners to match by using a width and height of 10 pixels.
• Edit the hex value #FF6600 to change the corner background colors.
• The corners will be absolute positioned to the main section since it’s the only element with relative positioning set.
• Each of the pseudo elements will be positioned by a negative value of 5 pixels to position them correctly in each of the corners.

Full Code

HTML5

<section class="section_8bit">
  <div class="wrapper">
    Content Goes Here
 </div>
</section>

CSS3

.section_8bit{
width: 100%;
float: left;
border-left: 10px solid #FF6600;
border-right: 10px solid #FF6600;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.section_8bit .wrapper{
display: block;
color: #FF6600;
padding: 40px;
margin: -10px 0;
border-top: 10px solid #FF6600;
border-bottom: 10px solid #FF6600;
}

.section_8bit::before,
.section_8bit::after,
.section_8bit .wrapper::before,
.section_8bit .wrapper::after{
content: '';
width: 10px;
height: 10px;
display: block;
position: absolute;
background: #FF6600;
}
.section_8bit::before{ top: -5px; left: -5px; }
.section_8bit::after{ top: -5px; right: -5px; }
.section_8bit .wrapper::before{ bottom: -5px; left: -5px; }
.section_8bit .wrapper::after{ bottom: -5px; right: -5px; }

See this Tutorial in Action

Visit 8bitters.com

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post UPDATED: How to Make Digital 8-Bit Style Corners Using Only CSS first appeared on Daddy Design.

Step 1: Create the PayPal Donate Button Shortcode via a WordPress Function

In order to create the PayPal Donate Button shortcode we will need to add a PHP filter to the WordPress functions file. Open your functions.php file then copy and paste the code below. Reference the ‘Items to Note’ below in order to adjust the code to work with your specific PayPal Account.

PHP

function donate_shortcode( $atts, $content = null) {
	global $post;extract(shortcode_atts(array(
		'account' => 'YOUR-ACCOUNT-HERE',
		'for' => $post->post_title,
	), $atts));
	return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" target="_blank"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" alt="PayPal - The safer, easier way to pay online!" /></a>';
}
add_shortcode('donate', 'donate_shortcode');

Items to Note:

• Make sure that you change where it says ‘YOUR-ACCOUNT-HERE’ to your actual PayPal account name.
• The ‘for’ variable will automatically grab the Page/Post Title and insert it into the PayPal Donate Button code.

Step 2: How to use the PayPal Donate Button Shortcode in a WordPress Page or Post

Now that the PayPal Donate Button shortcode has been created, it can now be inserted into any page or post. Simply copy the shortcode below and paste it inside the content editor wherever you want the PayPal Donate Button to appear.

SHORTCODE

[donate]

PayPal Donate Button Example

If you liked this tutorial and found it helpful please feel free to leave us a donation.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to add a PayPal Donate Button Shortcode in WordPress first appeared on Daddy Design.

Redirect all Single Posts of a Custom Post Type using a WordPress Function

In order to redirect all Single Posts of a Custom Post Type in WordPress, we will need to add a PHP filter to the WordPress functions file. Open your functions.php file then copy and paste the code below, you will need to reference the ‘Items to Note’ below in order to adjust the code to work with your specific Custom Post Type and desired redirect.

PHP

add_action( 'template_redirect', 'redirect_post_type_single' );
function redirect_post_type_single(){
    if ( ! is_singular( 'YOUR-CUSTOM-POST-TYPE' ) )
        return;
    wp_redirect( get_page_link( YOUR-PAGE-ID ), 301 );
    exit;
}

Items to Note:

• Change ‘YOUR-CUSTOM-POST-TYPE’ to the name of the Custom Post Type you would like to have redirected.
• Change ‘YOUR-PAGE-ID’ to the ID of the Page you would like your Custom Post Type’s Single Posts to redirect to.
• If you followed the instructions correctly all of the Single Posts of your Custom Post Type will now be redirected to your desired location.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to redirect all Single Posts of a Custom Post Type in WordPress first appeared on Daddy Design.

Protect your WordPress Site from Malicious Requests via a PHP Function

In order to protect your WordPress site from malicious requests, we will need to add a PHP filter to the WordPress functions file. Open your functions.php file then copy and paste the code below. Your WordPress site will now reject all malicious URL requests.

PHP

global $user_ID; if($user_ID) {
    if(!current_user_can('administrator')) {
        if (strlen($_SERVER['REQUEST_URI']) > 255 ||
            stripos($_SERVER['REQUEST_URI'], "eval(") ||
            stripos($_SERVER['REQUEST_URI'], "CONCAT") ||
            stripos($_SERVER['REQUEST_URI'], "UNION+SELECT") ||
            stripos($_SERVER['REQUEST_URI'], "base64")) {
                @header("HTTP/1.1 414 Request-URI Too Long");
                @header("Status: 414 Request-URI Too Long");
                @header("Connection: Close");
                @exit;
        }
    }
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to Protect your WordPress Site from Malicious Requests first appeared on Daddy Design.

Dynamically Add a Custom Class to Image Links via a WordPress Function

In order to dynamically add a class to image links in WordPress, we will need to add a PHP filter to the WordPress functions file. Open your functions.php file then copy and paste the code below. Make sure that you change where it says ‘YOUR-CLASS-HERE’ to whatever you want to name your custom class. Now, any new images with links inserted into a WordPress post via the Media Library will automatically have the custom class added to it.

PHP

function add_class_to_image_links($html, $attachment_id, $attachment) {
    $linkptrn = "/<a[^>]*>/";
    $found = preg_match($linkptrn, $html, $a_elem);
    // If no link, do nothing
    if($found <= 0) return $html;
    $a_elem = $a_elem[0];
    // Check to see if the link is to an uploaded image
    $is_attachment_link = strstr($a_elem, "wp-content/uploads/");
    // If link is to external resource, do nothing
    if($is_attachment_link === FALSE) return $html;
    if(strstr($a_elem, "class=\"") !== FALSE){ // If link already has class defined inject it to attribute
        $a_elem_new = str_replace("class=\"", "class=\"YOUR-CLASS-HERE", $a_elem);
        $html = str_replace($a_elem, $a_elem_new, $html);
    }else{ // If no class defined, just add class attribute
        $html = str_replace("<a ", "<a class=\"YOUR-CLASS-HERE\" ", $html);
    }
    return $html;
}
add_filter('image_send_to_editor', 'add_class_to_image_links', 10, 3);

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to Dynamically Add a Custom Class to Image Links in WordPress first appeared on Daddy Design.

The Base Function

In order to add features in WordPress, we will need to add a PHP filter to the WordPress functions file. Open your functions.php file then copy and paste the code below. This will be the base code to which all features requiring support will be added inside of.

PHP

if ( function_exists( 'add_theme_support' ) ) { 
    YOUR FEATURES GO HERE
}

Post Thumbnails

Add one or more of these features to enable support for post thumbnails.

EVERYWHERE

add_theme_support( 'post-thumbnails' );

ONLY PAGES

add_theme_support( 'post-thumbnails', array( 'page' ) );

ONLY POSTS

add_theme_support( 'post-thumbnails', array( 'post' ) );

ONLY CUSTOM POST TYPES

add_theme_support( 'post-thumbnails', array( 'your-post-type-name' ) ); 

Custom Background

Add this feature in order to enable support for custom backgrounds.

add_theme_support( 'custom-background' );

Custom Header

Add this feature in order to enable support for custom headers.

add_theme_support( 'custom-header' );

Custom Logo

Add this feature in order to enable support for a custom logo.

add_theme_support( 'custom-logo' );

Feed Links

Add this feature in order to enable support for automatic feed links for post and comment in the head.

add_theme_support( 'automatic-feed-links' );

HTML5

Add this feature in order to enable support for the usage of HTML5 markup for the search forms, comment forms, comment lists, gallery, and caption.

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

Title Tag

Add this feature in order to enable plugins and themes to manage the document title tag.

add_theme_support( 'title-tag' );

Customize Selective Refresh Widgets

Add this feature in order to enable selective refresh for widgets being managed within the Customizer.

add_theme_support( 'customize-selective-refresh-widgets' );

Visit WordPress.org to Learn More

Add Theme Support Function on WordPress.org

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to add Features in WordPress using add_theme_support Function first appeared on Daddy Design.

Search only WordPress Posts

In order to search only posts in WordPress, we will need to add a PHP filter to the WordPress functions file. Open your functions.php file then copy and paste the code below. Your WordPress site will now only return posts in the search results.

PHP

function SearchFilter($query) {
	if ($query->is_search) {
		$query->set('post_type', 'post');
	}
	return $query;
}

Search only WordPress Pages

In order to search only pages in WordPress, we will need to add a PHP filter to the WordPress functions file. Open your functions.php file then copy and paste the code below. Your WordPress site will now only return pages in the search results.

PHP

function SearchFilter($query) {
	if ($query->is_search) {
		$query->set('post_type', page);
	}
	return $query;
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to Search only Posts or Pages in WordPress first appeared on Daddy Design.

Step 1: Creating your Root Directory index.php Redirect

In the first step of this tutorial we will need to create a redirect for your WordPress subdirectory in order to serve it from the website root. Open the index.php file that is found on your server’s root directory or create one if it does not already exist. Copy and paste the PHP code below into your index.php file, make sure to change where it says ‘YOUR-SUBDIRECTORY’ to your WordPress installation’s specific subdirectory name, then upload your index.php file to the server’s root directory.

PHP

<?php
define('WP_USE_THEMES', true);
require('./YOUR-SUBDIRECTORY/wp-blog-header.php');
?>

Step 2: Editing the Site Address (URL) in the WordPress Dashboard

In step 2 of this tutorial we will need to edit the Site Address (URL) in the WordPress Dashboard by following the steps below:

1. Log in to the dashboard of your WordPress site
2. Go to Settings -> General
3. Change the Site Address (URL) to the root

Step 3: Modify the .htaccess File (*if necessary)

In step 3 of this tutorial we will need to modify the .htaccess file to rewrite it to your WordPress installation’s subdirectory if it has not already been automatically updated after Step 2. Open the .htaccess file that is found on your server’s root directory or create one if it does not already exist. Copy and paste the code below into your .htaccess file, make sure to change where it says ‘YOUR-SUBDIRECTORY’ to your WordPress installation’s specific subdirectory name, then upload your .htaccess file to the server’s root directory.

htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . YOUR-SUBDIRECTORY/index.php [L]
</IfModule>

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to Serve your WordPress Subdirectory Installation from the Website Root first appeared on Daddy Design.

Add a Dynamic Copyright to your WordPress Footer

Open your footer.php page, then copy and paste the code below wherever you want your copyright notice to appear.

PHP

<span class="copyright">&copy; Copyright <?php echo date('Y') ?> <?php bloginfo('name'); ?>.</span>

Items to Note:

• date(‘Y’) will dynamically output the current year in WordPress.
• Bloginfo(‘name’) will dynamically output your website name (Site Title).

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to add a Dynamic Copyright to your Footer in WordPress first appeared on Daddy Design.

We were always overlooking and neglecting our website speed over the years when we really should have placed more importance upon it. Our site tested pretty poorly in the big 3 testing sites with a dismal D average. Our worst ranking was an F in GTmetrix while Google PageSpeed was recording us with over a 4 second load time. Needless to say this was pretty terrible, not to mention embarrassing for a professional web design firm.

So with our new found mindset of just how important website speed really is, we set out to not only improve upon our speed test rankings but to achieve an A average across the board which is no easy task. We spent over a week tweaking and fixing all of the items that the 3 sites suggested we fix on our site. We first focused on fixing the items that were code related and then moved on to optimizing all of the images on our site. Once we fixed those core issues we started to research and look into how we wanted to handle our website’s cache, after lots of trial and error we finally decided on installing WP Super Cache. So after all of our hard work and tireless research we are proud to announce that we have achieved our goal of an A+ average in all 3 sites! See the results below:

Pingdom A+ 98 Ranking

Daddy Design Pingdom Score

Google PageSpeed 96/100 Ranking

Daddy Design Google Pagespeed Score

GTmetrix A 93% Ranking

Daddy Design GTmetrix Score

While some will try to convince you that in order to achieve high website speeds you need to host your site on an expensive dedicated server, like RackSpace, we are proof that this isn’t always the case. We are currently hosted with GoDaddy on a basic shared server plan and our rankings speak for themselves. Sure a more expensive server can potentially make life easier but it’s not necessary if you put in the work.

Daddy Design is proud to announce that we are now offering this as a new service. If you are interested in having Daddy Design improve your website speed ranking, please contact us at 1.888.987.1961 or fill out our FREE online quote.

The post Let us get you an A in Pingdom, Google PageSpeed and GTmetrix first appeared on Daddy Design.

Redirect all WordPress 404 Errors to the Home Page with PHP

Open your 404.php page if you already have one, if not then create a new PHP file and name it 404.php. Delete any and all code that is currently inside the 404.php page, then copy and paste the PHP redirect code below. After uploading the PHP file to your server it’s usually always a good idea to go ahead and refresh your permalinks. Open your site and test a broken link, all of your 404 errors should now be redirecting to your WordPress home page.

PHP

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));
exit();
?>

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to redirect all 404 Errors to the Home Page in WordPress first appeared on Daddy Design.

Hide the WordPress Content Editor on a Specific Page

In order to hide the WordPress content editor on a specifc page, we will add a PHP filter to the WordPress functions file. Open your functions.php file then copy and paste the code below, you will need to reference the ‘Items to Note’ below in order to adjust the code to work with your specific page title.

PHP

add_action( 'admin_init', 'hide_editor' );
function hide_editor() {
  $post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;
  if( !isset( $post_id ) ) return;
  $pagetitle = get_the_title($post_id);
  if($pagetitle == 'Your Page Title'){
    remove_post_type_support('page', 'editor');
  }
}

Items to Note:

• $pagetitle is a specific variable that will grab the title of the page you are on in the dashboard by its unique post ID.
• The $pagetitle variable is then referenced in the ‘if’ statement; this is where you need to make sure you change ‘Your Page Title’ to the actual page title you are using.
• The ‘if’ statement is basically saying if the current page title is equal to this title then hide the content editor.
• If you followed the instructions correctly the content editor will now be hidden from your specific page in the WordPress dashboard.

Hide the WordPress Content Editor on Multiple Pages

In order to hide the WordPress content editor on multiple pages, we will need to slightly modify the PHP filter used above in your functions.php file.

PHP

add_action( 'admin_init', 'hide_editor' );
function hide_editor() {
  $post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;
  if( !isset( $post_id ) ) return;
  $about = get_the_title($post_id);
  $contact = get_the_title($post_id);
  if($about == 'About' || $contact == 'Contact'){ 
    remove_post_type_support('page', 'editor');
  }
}

Items to Note:

• You will notice that we are no longer using the variable $pagetitle anymore. You will need to setup specific variables for the pages you would like to hide the content editor on. For purposes of this tutorial we used ‘about’ and ‘contact’.
• You will then need to add the multiple variables to the ‘if’ statement. Remember to make sure that your specific page titles need to match with what is in the quotes.
• The ‘if’ statement is now basically saying that if any of the page title variables equal the current page title then hide the content editor.
• If you followed the instructions correctly the content editor will now be hidden from your specific pages in the WordPress dashboard.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to Hide the WordPress Content Editor on Specific Pages first appeared on Daddy Design.

Step 1: Add Theme Support for Post Thumbnails (Featured Images)

In the first step of this tutorial we will add theme support for post thumbnails otherwise known as featured images using the built-in feature ‘Post Thumbnails’. Simply open your functions.php file then copy and paste the code below. You will now be able to add post thumbnails using the built in media settings.

PHP

if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'post-thumbnails' );
}

Step 2: Add a Custom Image Size using the Built-in Function add_image_size()

In the next step of this tutorial we will add the built-in function ‘add_image_size()’ to our initial code from Step 1 in order to add custom image sizes. You will need to reference the ‘Items to Note’ below in order to adjust the 4 arguments to suit your needs.

PHP

if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'post-thumbnails' );	
    add_image_size( 'name', width, height, crop );
}

Items to Note (add_image_size() Arguments):

• Name: This is a required argument where you just need to give it a unique name in order to call your custom image size later, make sure you keep it inside the quotes.
• Width: This is an optional argument for the max width of the image.
• Height: This is an optional argument for the max height of the image.
• Crop: This is a boolean (true/false) argument that will either hard crop or soft crop the image. The default (false) is set to soft crop which basically only resizes your image proportionality within the dimensions you specify. The hard crop will basically cut the image to a predefined shape and size based on your dimensions, in order to achieve a hard crop set the argument to true.

Example with Actual Arguments

add_image_size( 'cropped-img', 800, 600, true );

Step 4 (Optional): Resize Images Previously Uploaded to WordPress using the ‘Regenerate Thumbnails’ Plugin

This final step is optional but is also necessary if you want to apply your custom image size to any images that have been uploaded to your WordPress install prior to the addition of adding these built-in image functions. If you choose to skip this step, then your custom image size will only be applied to any new images uploaded to WordPress. This is made easy by using the plugin called ‘Regenerate Thumbnails’.

Download the Plugin (WordPress Plugin Directory)

Items to Note:

• Install and activate the plugin.
• Visit the plugin’s settings page in the WordPress Dashboard, Tools > Regen. Thumbnails
• Click the button ‘Regenerate all Thumbnails’ to resize all images uploaded to your WordPress installation.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to add and use Custom Image Sizes in WordPress using Built-in Functions first appeared on Daddy Design.

Hide the Advanced Custom Fields (ACF) WordPress Plugin Settings via Functions

In order to hide the Advanced Custom Fields (ACF) plugin settings in the dashboard from all users that are not designated as admins, we will add a PHP filter to the WordPress functions file. Simply open your functions.php file then copy and paste the code below. The plugin settings for the ACF plugin will now be hidden from all non admin users.

PHP

add_filter('acf/settings/show_admin', 'my_acf_show_admin');
function my_acf_show_admin( $show ) {
    return current_user_can('manage_options');
}

Learn More About the Advanced Custom Fields (ACF) WordPress Plugin

ACF on the WP Plugin Directory ACF Website

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

The post How to Hide the Advanced Custom Fields (ACF) WordPress Plugin Settings Unless User is an Admin first appeared on Daddy Design.